display:inline,display:inline | 您所在的位置:网站首页 › 文字云具有什么和什么两个组成元素的特点 › display:inline,display:inline |
一,行内元素与块级元素的区别:
块级元素 会占领页面的一行,其后多个block元素自动换行、 可以设置width,height,设置了width后同样也占领一行、同样也可以设置 margin与padding属性。 ps:常见的块级元素:div,img,ul,form,p等 行级元素 与其他元素在同一行上,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。 ps:em,strong,br,input等 1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。 块级元素各占据一行(默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关),垂直方向排列。块级元素从新行开始,结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或者其它行内元素。 3.行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效 二、行内元素和块级元素转换display:block; (字面意思表现形式设为块级元素) display:inline; (字面意思表现形式设为行内元素) 三、inline-blockinline-block 的元素(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。 HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。 display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始。 display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行。 display:inline-block看上去值名inline-block是一个混合产物,实际上确是如此,将元素显示为行内块状元素,设置该属性后,其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block,使其既有block的宽度高度特性,又有inline的同行特性,在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。 使用inline-block 会产生元素间的空隙: Document .child { display: inline-block; background-color: #04b6fd; width: 100px; height: 100px; }空隙产生的原因 在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙,这就是“换行符/空格间隙问题”。 解决方法: 方法一:解决元素之间的空白符将设置有display:inline-block的写到一行 方法二:为父元素中设置font-size: 0,在子元素上重置正确的font-size 方法三:为inline-block元素添加样式float:left Document 1 2 .child1{ font-size: 30px; display: inline-block; background-color: #04b6fd; width: 100px; height: 100px; float: left; } .child2{ font-size: 30px; display: inline-block; background-color: #04b6fd; width: 100px; height: 100px; float: left; } 方法四:设置子元素margin值为负数 Document .child1{ display: inline-block; background-color: #04b6fd; width: 100px; height: 100px; } .child2{ display: inline-block; background-color: #04b6fd; width: 100px; height: 100px; margin-left: -6px; } 方法五:最优解在这,设置父元素,display:table和word-spacing Document .parent{ display: table; word-spacing:-1em; /*兼容其他浏览器,题主还未验证*/ } .child1{ display: inline-block; background-color: #04b6fd; width: 100px; height: 100px; } .child2{ display: inline-block; background-color: #04b6fd; width: 100px; height: 100px; } |
CopyRight 2018-2019 实验室设备网 版权所有 |