CSS でよく混同されがちな属性と値の違い (1)

CSS には多くの属性があり、各属性には多くの値の組み合わせがあります。 CSS は、さまざまな属性を組み合わせることで、さまざまなスタイルを生成することもできます。以下は、仕事においてよく混同される属性と値の概要です:

1. line-height (行の高さ) の単位ありと単位なしの違い:

行の高さは継承可能であることがわかっています。親要素の line-height 値に単位がない場合、子要素は独自のフォント サイズを使用して行の高さを計算します (子要素の line-height = 親要素の line-height の値 *子要素のフォント サイズ)。親要素の行の高さの値に単位がある場合、親要素はまず自身のフォントサイズに基づいて行の高さを計算し（絶対単位がpxの場合は計算不要）、子要素はそれを継承します（行の高さ）。子要素の行の高さ = 親要素の行の高さ)。

(1). 親要素の行の高さの値に単位がある場合:

リーリー

リーリー

上記と同様: 親要素のフォント サイズが 12px、行の高さが 1.5em、子要素のフォント サイズが 22px の場合、表示効果は次のようになります:

上記の例では、親要素 div の行の高さ 1.5em = 12 * 1.5 = 18px を継承しているため、p の行の高さは 18px であり、独自のフォント サイズは 22px であるため、次のような効果があります。圧迫されてる。さらに、テキストが占める高さは font-size と直接の関係はありませんが、テキストが占める幅は font-size の値と同じです。

(2). 親要素の行の高さの値に単位がない場合:

リーリー

リーリー

上記と同様: 親要素のフォント サイズが 12px、行の高さが 1.5、子要素のフォント サイズが 22px の場合、表示効果は次のようになります:

上記の例では、親要素 div から行の高さ 1.5 を継承しているため、p の行の高さは 33px であり、自身のフォント サイズは 22px であるため、自身の行の高さの値は 22 * 1.5 = となります。 33px、最初のケースではスクイーズ効果は表示されません。

2. display (表示モード) の値は、使用環境と inline-block、table、flex の違いです:

(1). 表示: インラインブロック;

要素が display: block; で表示される場合、幅を定義しない場合と width: 100%; または width: auto; として定義する場合の効果は同じです。これは、ブロックレベルの要素が幅を継承するためです。親要素の値 100% (つまり、親要素と同じ幅) に従って独自の幅を定義します。ただし、実際のプロジェクトでは、幅を 100% にする必要はなく、要素の幅、高さ (またはパディング) などの属性も設定したい場合があります。現時点では、display: inline-block;

を使用する必要があります。

ダムは次のとおりです:

リーリー

リーリー

上記の詳細表示リンクについては、display: inline-block; として定義されている場合、幅と高さを設定せずにパディングを設定することで希望の高さと幅を実現できます。表示効果は次のとおりです:

また、親要素に text-align: center; を設定すると、水平方向の中央揃えを実現できます。

要素を display: inline-block; に設定すると、display: block; と display: inline; の両方の効果が得られ、高さを設定して中央に配置し、幅が 100% になるのを避けることができます。

拡張子:

親要素 text-align: center; 子要素 display: inline-block; 通常、ニュース リスト ページなどのページネーション効果に使用されます。

リーリー

リーリー

(2). テーブル;

最初のケースの展開では、display: table; が使用されています。display: table; を使用すると、この要素はテーブルの前後に改行が入ったブロックレベルのテーブルとして表示されます。 。

フローティング要件をクリアするときによく使用されます。

要素がその float をクリアする必要がある理由は、その要素には定義された高さがなく、その子要素には float があるためです。

上記の例の拡張では、ul.pagenation で高さが定義されておらず、子要素に float があるため、float をクリアする必要があります。フロートをクリアする方法は次のとおりです:

リーリー

这种清除浮动的方式， 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; 使子元素水平居中。