CSS でよく混同されがちな属性と値の違い (1)
CSS には多くの属性があり、各属性には多くの値の組み合わせがあります。 CSS は、さまざまな属性を組み合わせることで、さまざまなスタイルを生成することもできます。以下は、作業でよく混同される属性と値の要約です:
1. Line-height (行の高さ) 単位の有無の違い:
行の高さは継承できることがわかっています。親要素の line-height 値に単位がない場合、子要素は独自のフォント サイズを使用して行の高さを計算します (子要素の line-height = 親要素の line-height の値 *子要素のフォント サイズ)。親要素の行の高さの値に単位がある場合、親要素はまず自身のフォントサイズに基づいて行の高さを計算し（絶対単位がpxの場合は計算不要）、子要素はそれを継承します（行の高さ）。子要素の行の高さ = 親要素の行の高さ)。
(1). 親要素の行の高さの値に単位がある場合:
<div>
<p>当哈罗德站在斑马线前按下行人按钮时——如果一直是她(莫琳，哈罗德的妻子)在做哈罗德该做的事，那么——“我是谁？”他就这样走过了邮局，连停都没有停下。原本很短的一段路由于内心的呼唤便再也无法停住脚步。</p>
<p>一路上我记起了很多东西，很多我都没有意识到自己忘了的回忆，有戴维的，还有你和我的。我还记起了我的母亲，有些回忆很不容易，但大部分都很美。我很害怕，我怕有一天，或许很快，我就会把他们弄丢，这一次永远都找不回来了。”哈罗德泪流满面.</p>
</div>body { background-color: #efefef; }
div {
font-size: 12px;
line-height: 1.5em;
}
p { font-size: 22px; }上記と同様: 親要素のフォントサイズが 12px の場合、行の高さは 1.5em、子要素のフォントサイズはが 22px の場合、表示効果は次のとおりです。
上の例では、親要素 div 1.5em = 12 * 1.5 = 18px の行の高さを継承しているため、p の行の高さは 18px です。自身のフォントサイズが22pxなので、絞られた効果になります。さらに、テキストが占める高さは font-size と直接の関係はありませんが、テキストが占める幅は font-size の値と同じです。
(2). 親要素の行の高さの値に単位がない場合:
<div>
<p>你以为走路是世界上最简单的事呢？只不过是把一只脚放到另一只脚前面。但我一直很惊讶这些原本是很本能的事情实际上做起来有多困难。而吃，吃也是一样的。说话也是。还有爱。这些东西都可以很难。</p>
<p>我们大家都以为哈罗德徒步是因为很多年前他与奎妮有一段罗曼史。但那不是事实。哈罗德走这条路，是因为奎妮救了他，而他从来没有说过一句谢谢。</p>
</div>body { background-color: #efefef; }
div {
font-size: 12px;
line-height: 1.5;
}
p { font-size: 22px; }上記と同様: 親要素のフォントサイズが12pxの場合、行の高さは1.5、子要素のフォントサイズはが 22px の場合、表示効果は次のとおりです。
上の例では、p の行の高さは 33px です。これは、親要素 div の行の高さ 1.5 を継承し、独自のフォント サイズが 22px であるためです。したがって、独自の行の高さの値は 22 * 1.5 = 33px です。最初のケースの圧縮効果が表示されます。
2. display (表示モード) の値は inline-block、table、flex です。 使用環境と違い:
(1). 要素の表示モードの場合。は、display: block ; ですが、幅を定義しない場合と、幅を width: 100%; または width: auto; として定義する場合の効果は同じです。これは、ブロックレベルの要素が親要素の幅の値を継承するためです。 100% (つまり、親要素と同じ幅) まで) は、独自の幅を定義します。ただし、実際のプロジェクトでは、幅を 100% にする必要はなく、要素の幅、高さ (またはパディング) などの属性も設定したい場合があります。このとき、display: inline-block; を使用する必要があります。
dom は次のようになります:
<div class="text">
<h3 id="成都王府井百货">成都王府井百货</h3>
<p>成都王府井购物中心是北京王府井百货(集团)斥资4.5亿元打造的第一个购物中心项目。购物中心集购物、餐饮、娱乐、服务、文化、教育等多项功能于一身，建筑面积约10万平方米，共计5层营业。</p>
<div><a href="#" title="查看详情" class="look-details">查看详情</a></div>
</div>.text > div {
margin-top: 1.2rem;
text-align: center;
}
.text a.look-details {
display: inline-block;
padding: .5rem 1rem;
font-size: .8rem;
color: #fff;
background-color: #e04728;
}上記の詳細表示リンクでは、display: inline-block; と定義します。幅と高さを設定せずに、高さと幅のアイデアを得ました。表示効果は次のとおりです。
そして、その親要素に text-align: center; を設定すると、水平方向の中央揃えの目的を達成できます。
要素を display: inline-block; に設定すると、display: block; と display: inline; の両方の効果が得られ、高さを設定し、幅が 100% になるのを避けることができます。
拡張子:
親要素 text-align: center; 子要素 display: inline-block; 通常、ニュース一覧ページなどのページネーション効果に使用されます。
<ul class="pagination">
<!-- 当前页面时，给 li 添加 active 类 -->
<li><a href="#" aria-label="Previous">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next">»</a></li>
</ul>.pagination {
display: inline-block;
text-align: center;
}
.pagination:before,
.pagination:after {
display: table;
content: "";
}
.pagination:after { clear: both; }
.pagination {
display: inline-block;
text-align: center;
}
.pagination > li {
float: left;
display: inline-block;
}
.pagination > li > a {
display: block;
margin-left: -1px; /*消除两个 a 在一起时引起的双倍左外边距*/
padding: 6px 12px;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination > li:first-child > a {
margin-left: 0; /*第一个 a 不需要消除左外边距*/
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > a:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
z-index: 3;
color: #fff;
cursor: default; /*当前这一页，让鼠标悬浮在 a 元素上时，显示为默认光标样式，给人感觉不能点击的效果*/
background-color: #337ab7;
border-color: #337ab7;
}
(2)。display: table;
最初のケースの拡張では、display: table; を使用すると、この要素はブロックレベルのテーブルとして表示されます。
まで）、表の前後に改行があります。 "147642812531464CSS でよく混同されがちな属性と値の違い (1)")
初心者向けチュートリアル http://www.runoob.com/w3cnote/flex-grammar.html で詳しく説明されています。 
