css世界总结

清除浮动clear:both

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

“块级元素”和“display 为 block 的元素”不是一个概念。例如,


  • 素默认的 display 值是 list-item,元素默认的 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

    你可能感兴趣的:(css世界总结)