css之display属性之inline-block布局实现详解
5星 · 超过95%的资源 157 浏览量
2020-11-21
17:54:44
上传
评论
收藏 105KB PDF 举报 
css之之display属性之属性之inline-block布局实现详解布局实现详解
CSS display 属性属性
注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-
caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。所有主流浏
览器都支持 display 属性。
定义和用法定义和用法
display 属性规定元素应该生成的框的类型。
说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能
违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。
默认值：默认值： inline
继承性：继承性： no
版本：版本： CSS1
JavaScript 语法：语法： object.style.display="inline"
1.解释一下解释一下display的几个常用的属性值，的几个常用的属性值，inline ，， block，， inline-block
inline（行内元素）:使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改
元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top
和bottom就不行.block（块级元素）:使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父
级元素的宽度.
能够改变元素的
height
，
width
的值
.
可以设置
padding
，
margin
的各个属性值，
top
，
left
，
bottom
，
right
都能够
产生边距效果
. inline-block（融合行内于块级）:结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3
个特点.用通俗的话讲，就是不独占一行的块级元素。如图:
图一:
图二：
两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-
block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。
2.inline-block布局布局 vs 浮动布局浮动布局
a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高
度坍塌的效果
评论10