css常見的易混淆屬性和值的差異(一)

css的屬性很多，每個屬性的值也很多，組合起來便有成千上萬種。不同屬性之間的相互組合也可以產生不同的樣式，css真是一種優美的樣式設計語言。以下將工作中常見的易混淆的屬性和值進行總結：

1. line-height(行高) 有單位與不含單位的差異：

我們知道行高是可以繼承的。當父元素的行高值沒有帶上單位時，子元素使用自己的字體尺寸併計算出行高（子元素的行高=父元素中 line-height 的值 * 子元素的字體尺寸）。當父元素的行高值帶有單位時，父元素先根據自己的字體尺寸計算出行高（絕對單位px 時，無需計算），讓子元素繼承（子元素的行高=父元素的行高） 。 

(1). 當父元素的行高值有單位時：

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>当哈罗德站在斑马线前按下行人按钮时——如果一直是她(莫琳，哈罗德的妻子)在做哈罗德该做的事，那么——“我是谁？”他就这样走过了邮局，连停都没有停下。原本很短的一段路由于内心的呼唤便再也无法停住脚步。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>一路上我记起了很多东西，很多我都没有意识到自己忘了的回忆，有戴维的，还有你和我的。我还记起了我的母亲，有些回忆很不容易，但大部分都很美。我很害怕，我怕有一天，或许很快，我就会把他们弄丢，这一次永远都找不回来了。”哈罗德泪流满面.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">body </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #efefef</span>; }<span style="color: #800000;">
div </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.5em</span>;
}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 22px</span>; }

如上：當父元素的字體大小為 12px，行高為 1.5em，子元素的字體大小為 22px 時，顯示效果如下：

上例中，p 的行高為 18px，因為它繼承了父元素 div 的行高 1.5em = 12 * 1.5 = 18px; 而自己的字體大小為 22px，所以就有被擠壓的效果。另外文字所佔的高度與 font-size 沒有直接任何關係，倒是文字所佔的寬度與 font-size 的值是一樣的。

(2). 當父元素的行高值沒有單位時：

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你以为走路是世界上最简单的事呢？只不过是把一只脚放到另一只脚前面。但我一直很惊讶这些原本是很本能的事情实际上做起来有多困难。而吃，吃也是一样的。说话也是。还有爱。这些东西都可以很难。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我们大家都以为哈罗德徒步是因为很多年前他与奎妮有一段罗曼史。但那不是事实。哈罗德走这条路，是因为奎妮救了他，而他从来没有说过一句谢谢。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">body </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #efefef</span>; }<span style="color: #800000;">
div </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.5</span>;
}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 22px</span>; }

如上：當父元素的字體大小為 12px，行高為 1.5，子元素的字體大小為 22px 時，顯示效果如下：

上例中，p 的行高為33px，因為它繼承了父元素div 的行高1.5， 而自己的字體大小為22px，所以自己的行高值就為22 * 1.5 = 33px，不會出現第一種情況下的被擠壓效果。

 

2. display(顯示方式)的值為 inline-block，table，flex 的使用環境和區別：

(1). display: inline-block;

當一個元素顯示方式為display: block; 時，不定義寬度和將寬度定義為：width: 100%; 或width: auto; 效果是一樣的，因為區塊級元素會繼承父元素的寬度值，依照100%(也就是和父元素一樣的寬度) 的值定義自己的寬度。但在實際專案中我們有時並非需要寬度為 100%，但又想要設定元素的 width, height（或 padding）等屬性。這時就需要用到 display: inline-block;

dom如下：

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>成都王府井百货<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>成都王府井购物中心是北京王府井百货(集团)斥资4.5亿元打造的第一个购物中心项目。购物中心集购物、餐饮、娱乐、服务、文化、教育等多项功能于一身，建筑面积约10万平方米，共计5层营业。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="查看详情"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="look-details"</span><span style="color: #0000ff;">></span>查看详情<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">.text > div </span>{<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 1.2rem</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.text a.look-details </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> .5rem 1rem</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> .8rem</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e04728</span>;
}

對於上面的查看詳情鏈接，定義為了 display: inline-block;  就可以不用設置寬度和高度，通過設置 padding 來實現自己想要的高度和寬度的想法了。顯示效果如下：

並且，為其父元素設定 text-align: center;  可以達到水平居中的目的。

將元素設為 display: inline-block; 既含有 display: block; 又含有 display: inline; 的效果，可設定其高度，又能將其居中，還可以避免寬度為 100%。

擴充：

父元素 text-align: center; 子元素 display: inline-block; 通常用於諸如新聞列表頁分頁效果。

<span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
    <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当前页面时，给 li 添加 active 类 </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> aria-label</span><span style="color: #0000ff;">="Previous"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&laquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> aria-label</span><span style="color: #0000ff;">="Next"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&raquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">.pagination </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.pagination:before,
.pagination:after </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>;
}<span style="color: #800000;">
.pagination:after </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }<span style="color: #800000;">
.pagination </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.pagination > li </span>{<span style="color: #ff0000;">            
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;
}<span style="color: #800000;">
.pagination > li > a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -1px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">消除两个 a 在一起时引起的双倍左外边距</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 6px 12px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #337ab7</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;
}<span style="color: #800000;">
.pagination > li:first-child > a </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">第一个 a 不需要消除左外边距</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    border-top-left-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    border-bottom-left-radius</span>:<span style="color: #0000ff;"> 4px</span>;
}<span style="color: #800000;">
.pagination > li:last-child > a </span>{<span style="color: #ff0000;">
    border-top-right-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    border-bottom-right-radius</span>:<span style="color: #0000ff;"> 4px</span>;
}<span style="color: #800000;">
.pagination > li > a:hover,
.pagination > li > a:focus </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #23527c</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #eee</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ddd</span>;
}<span style="color: #800000;">
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> default</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">当前这一页，让鼠标悬浮在 a 元素上时，显示为默认光标样式，给人感觉不能点击的效果</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #337ab7</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #337ab7</span>;
}

 (2). display: table;

第一種情況的擴展中，已經用到了 display: table; 使用 display: table; 此元素會作為塊級表格來顯示（類似

），表格前後帶有換行符。

常用在清除浮動的需求中。 一個元素之所以需要清除浮動，是因為自身沒有定義高度，而子元素有浮動。

如上例的擴充中，ul.pagenation 沒有定義高度，而子元素又有浮動，所以它需要清除浮動。清除浮動的方式如下：

<span style="color: #800000;">.parent-box:before,
.parent-box:after </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>; /*伪元素 before 和 after 的样式里必须添加 content 属性才会起作用*/
}<span style="color: #800000;">
.parent-box:after </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }

这种清除浮动的方式， ie8 不支持。如果需要支持 ie6 - ie8，需要使用下面这种复杂一些的样式(这样的写法暂时不理解)：

<span style="color: #800000;">.clearfix::after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ” ”</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
.clearfix </span>{<span style="color: #ff0000;"> zoom</span>:<span style="color: #0000ff;"> 1</span>; }

(3). display: flex;

2009年，W3C 提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

菜鸟教程http://www.runoob.com/w3cnote/flex-grammar.html 中说得非常详细。

内容很多，但是我们平时一般会用到的就三个属性，display: flex; align-items: center; justify-content: center; 这三个属性都是用在父元素中，display: flex; 定义子元素的布局方式为弹性伸缩布局，align-items: center; 使子元素垂直居中，justify-content: center; 使子元素水平居中。