『決定版CSSガイド』基礎復習＋漏れチェック_html/css

数日前、友人から CSS についていくつか質問されました。私は 1 年生の時から CSS に触れてきて、約 3 年半になります。 CSSに詳しい方。しかし、まだいくつかの質問に「混乱」していました...そこで、新しい会社に入社したばかりで、あまりやることがなかったので、「基礎学習」+「確認と確認」のために「CSS権威ガイド」を手に取りました。この記事では主に、CSS で注目すべきと思われるいくつかの知識点をまとめています (この記事の知識点は本書の範囲に限定されています。CSS のすべてのスタイルについて話したい場合は、ゆっくり行くことにします〜）。

Selector

ここで説明したいのは、クラスセレクターの入れ子選択とマルチクラスセレクターの違いですちなみに、第1レベルのサブ要素の選択も含まれます

基本的な書き方クラスセレクター:

.your-class{/*...*/}

ログイン後にコピー

クラスセレクターのネストされた選択記述方法:

.first-class .second-class{/*...*/}

ログイン後にコピー

マルチクラスセレクターの基本的な記述方法:

.first-class.second-class{/*...*/}

ログイン後にコピー

第一レベルの子要素の選択記述方法:

.first-class > .second-class{/*...*/}

ログイン後にコピー

コードとの違い:

rrree

結論:

· クラスセレクターのネストされた選択では、(レベルに関係なく) 2 番目のスタイルクラスを含む最初のスタイルクラスの下のすべてのサブ要素が選択されます。サブ要素)

· 1 第 1 レベルの子要素の選択には、第 1 スタイルの下にある第 1 レベルの子要素はカウントされません。最初のスタイルと 2 番目のスタイルのクラスの組み合わせ

スタイルの優先度

スタイルの優先度は、セレクター自体のコンポーネントによって決まります。優先度の値は、次のような 4 つの部分で表されます。注

: 前半部分の優先度は後半部分の優先度よりも大きいため、値の間の大きさは無視してください。たとえば、0.0.1.0 は 0.0.0.12 より大きいなどです。

セレクターの具体的な優先順位は次のとおりです:

· セレクターで指定された各 ID 属性値に対して 0.1.0.0 を追加します。

· セレクターで指定された各クラス属性値、属性選択、または疑似クラスに対して、 add 0.0.1.0;

· セレクターで指定された各要素と擬似要素に対して、add 0.0.0.1;

· コンバイナーとワイルドカードの選択は優先順位に何も影響しません。

コードを使用して優先度を説明します:

<style>    .first-style.second-style{ color: blueviolet}    .first-style .third-style{ font-style: italic}    .first-style > .fourth-style{ font-weight: bold}</style>    <div class="first-style second-style">HELLO</div><div class="first-style third-style">hello</div><div class="first-style"><div class="second-style">HELLO</div></div><div class="first-style"><div class="third-style">hello</div></div><div class="first-style"><div><div class="third-style">Hello World</div></div></div><div class="first-style"><div class="fourth-style">Hello World</div></div><div class="first-style"><div><div class="fourth-style">Hello World</div></div></div>

ログイン後にコピー

すると、0.0.0.0 の 4 つの部分のうち、最初の部分が決して使用されていないことに気づくでしょう。どのように使用されますか?

一般に、最初の 0 は、他の宣言よりも具体的なインラインスタイル宣言用に予約されています。

例:

rrree

このセクションには「!重要」の問題もあります

「!重要」はスタイル宣言の後、つまりセミコロンの前に配置されます。また、特別な優先順位の値はありません。では、その優先順位にどう対処すればよいのでしょうか?次のコードを見てください:

rrree

結論:

"! important" 宣言の重要性は、他のすべての宣言を上回ります。

CSS の通常のフローと要素

通常のフロー

これは、左から右、上から下に表示される西洋言語のテキストを指します。これは、私たちがよく知っている従来の HTML ドキュメントのテキストレイアウトでもあります。要素を通常のフローから外す唯一の方法は、要素を浮動/配置要素にすることです。

非置換要素

文書内に要素内容が含まれる場合、それを非置換要素と呼びます。例:

置換要素

は、他のコンテンツのプレースホルダーとして使用される要素を指します。例: 、

ブロックレベル要素

通常のフローでは、「display:block」を宣言することで「改行」がボックスの前後に生成されます。この要素はブロックレベルのボックスを生成します。

インライン要素

これらの要素は、その前後に「行区切り文字」を生成しません。これらの要素は、「display:inline」を通じて、インラインボックスを生成できます。

margin マージン

1. マージンは垂直方向に結合されます

垂直方向に隣接するマージンが結合されます。 2 つのマージンのうち小さい方が、大きい方とマージされます (「重なる」と考えることもできます)。

特定の効果については例を参照してください:

div{ color: black} /* 0.0.0.1 */div p{ color:black} /* 0.0.0.2 */.my-div{ color:black} /* 0.0.1.0 */div.my-div{ color: black} /* 0.0.1.1 */.my-div .my-p{ color: black} /* 0.0.2.0 */.my-div p.my-p{ color: black} /* 0.0.2.1 */div.my-div p.my-p{ color: black} /* 0.0.2.2 *//*... 以此类推*/#div-id{ color: black} /*0.1.0.0 *//*... 继续类推*/

ログイン後にコピー

2.margin スタイルの順序

<div style="/*...*/"></div> <!--1.0.0.0 - ->

ログイン後にコピー

順序は次のように記録できます: 12 時から時計回りに 1 周します。

省略規則:

・左マージンの値が欠落している場合は、右マージンの値が使用されます

・下マージンの値が欠落している場合は、上マージンの値が使用されます

・右マージンの値が欠落している場合は、上マージンの値を使用します

缩写代码：

.first-margin{ margin: 50px;} /* 50px 50px 50px 50px */.second-margin{ margin: 50px 20px ;} /* 50px 20px 50px 20px */.third-margin{ margin: 50px 30px 10px;} /* 50px 30px 10px 30px */

ログイン後にコピー

3.margin应用于行内元素的效果

当margin应用于行内元素，则对水平面有影响，对垂直面无任何影响。

效果代码：

<style>　　.mar-strong{ margin:20px 0}</style><div><strong class="mar-strong">hello world</strong>

ログイン後にコピー

既然这里提到margin与行内元素之间的关系，我们也顺便看下padding与行内元素的关系吧。

当padding应用于行内元素，则对水平面有影响，对垂直面无影响(在没有设置background的情况下)。

看例子：

<style>　　.mar-strong{ padding:20px 0px; background: red}</style><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<strong class="mar-strong">hello world</strong>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

ログイン後にコピー

以上例子可以去掉padding或者background看看布局上有什么影响来验证。请慎重处理这三者之间的关系哦。

background-attachment

这里稍微提下这个属性。

background: scroll || fixed || inherit

初始值：scroll

看效果代码：

<style>　　.div-bg{ width: 100%; height: 3000px;}　　.bg-attachment{ background-image: url(img/1.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center}</style><div class="div-bg bg-attachment"></div>

ログイン後にコピー

从上面例子可以看到，当滚动页面的时候，背景图始终居中跟随滚动。

浮动与清除

元素浮动

· CSS允许所有元素浮动

· 浮动元素周围外边距不会合并

<style>    .div-float{float: left;margin: 50px}</style><div class="div-float">HELLO WORLD</div><div  class="div-float">hello world</div>

ログイン後にコピー

· 浮动元素会生成一个块级框，不论这个元素本身是什么。

<style>    .span{ margin: 50px}    .span-float{ float: left;}    </style><span class="span span-float">HELLO WORLD</span><span class="span span-float">hello world</span>

ログイン後にコピー

清除浮动

清除浮动可由clear属性完成。

clear: left || right || both || none || inherit

初始值: none

这里我们主要说明下left、right和both。分别是清除左边浮动元素(左边不让你浮动)、清除右边浮动元素(右边不让你浮动)和清除左右两边的浮动(两边都不让存在浮动元素)。

<style>    .div-mar{ width: 100px;padding: 50px}    .div-red{ background: red}    .div-yellow{ background: yellow}    .div-float-left{ float: left}    .div-float-right{ float: right}    .div-clear-both{ clear: both}    .div-clear-left{ clear: left}    .div-clear-right{ clear: right}</style><div class="div-mar div-red div-float-left">HELLO WORLD</div><div class="div-mar div-yellow div-float-left div-clear-right">Hello World</div>

ログイン後にコピー

可以对以上[class*="div-red"]元素进行左右浮动，再用[class*="div-yellow"]元素进行清除浮动。

元素定位

元素的定位可以通过使用position属性。

positon: static || relative || absolute || fixed || inherit

初始值： static

static(静态/正常定位)

正常生成元素框。

relative(相对定位)

元素偏移某个距离，元素仍保持其未定位之前的形状。

absolute(绝对定位)

元素从文档流完全删除，并相对其包含块定位。

fixed(固定定位)

元素框的表现类似于absolute，不过其包含块是视窗本身。

元素relative/absolute/fixed定位的同时，会为其后代元素建立一个包含块。

什么是包含块？

在HTML中，根元素就是html元素。

· "根元素"的包含块由用户代理建立

· 对于一个非根元素，如果其position值为relative或static，则包含块由最近的块级框、表单元格或行内块祖先框的内容边界构成

· 对于一个非根元素，如果其position值为absolute，包含块设置为最近的position值不是static的祖先元素

"visibility:hidden"与"display:none"的区别

当我们设置一个元素visibility为hidden的时候，元素处于不可见状态，但元素仍然会影响到文档的布局(元素仍存在，只是看不见)。

当我们设置一个元素display为none的时候，元素不显示，并从文档流中删除(元素不存在，可用于渲染优化)。

"content" 生成内容

使用content属性插入内容或属性值。

<style>    .div-content:before{ content: "[ "attr(value)" ] "}    .div-content:after{content:" hello world"}</style><div class="div-content" value="H">ello World</div>

ログイン後にコピー

附上在写的时候突然想到的一个问题

在不同元素内的子元素使用z-index的时候受不受父(祖先)元素之间关系的影响？

<style>    .div-out{width: 400px; height: 200px; background: black;border-bottom: 1px solid white; position: relative;}    .div-index-1{ width: 200px; height: 100px; background: red; position: absolute; bottom: -50px; z-index: 1}    .div-index-2{ width: 200px; height: 100px; background: yellow; position: absolute; top: -50px; left: 20px; z-index: 1}</style>        <div class="div-out">    <div class="div-index-1"></div>    </div>    <div class="div-out">    <div class="div-index-2"></div></div>

ログイン後にコピー

得出结论：不受影响。

新手文章，有问题可交流讨论，不喜勿喷~~~ 觉得本文还行的就小手点个赞给个鼓励吧~