css世界总结

清除浮动clear:both

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

“块级元素”和“display 为 block 的元素”不是一个概念。例如，<li>元
素默认的 display 值是 list-item，<table>元素默认的 display 值是 table，但是它们
均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一
个元素，多个块级元素则换行显示。

 块级元素清楚浮动

class::after{clear:both;content:"";diaplay:block/table;}

display:inline-table/inline-block都可以设置宽度

table中当每一列空间都不够的时候，文字能断就断，但中文是随便断的，英文单词不能断，于是，
第一列被无情地每个字都断掉，形成一柱擎天。

“包裹性”对实际开发有什么作用呢？
请看这个需求：页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然
后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？
核心 CSS 代码如下：
.box {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
}

除了 inline-block 元素，浮动元素以及绝对定位元素都具有包裹性，
均有类似的智能宽度行为。

1. width

转载于:https://my.oschina.net/u/3052153/blog/1840270