CSS為什麼能被廣泛使用？

前面的話

　　在CSS學習目錄中，已經詳細地介紹了CSS如何使用。知其然，還要知其所以然。本文將介紹CSS各部分出現的原因，僅限個人理解，如有不妥，歡迎交流

 

Why CSS

　　早期的大多數網站標記幾乎完全由表格和font元素組成，且對於所要表現的內容不能傳達任何實際含義，使文件可用性降低，且不易於維護。於是1995年，W3C發布了CSS草案，試圖解決結構與樣式混雜的問題

　　1、如果考慮結構與樣式徹底分離，且樣式表可能用於多個HTML文件，使用外部樣式表

　　2、如果樣式表只用於目前頁面，且減少HTTP請求數量，使用內部樣式表

　　3、如果只是想為單一元素指定一些樣式，可以使用HTML的style屬性來設定一個行間樣式

 

Why 選擇器

#　　透過CSS選擇器，在文件中套用某些規則

1.通配選擇器選擇所有元素

　　2、元素選擇器依照HTML標籤來選擇元素

　　3、類別選擇器透過定義類別名稱來選擇一類元素

　　4、ID選擇器選擇特定ID的元素

　　5、屬性選擇器根據元素的屬性及屬性值來選擇元素

　　6、後代選擇器透過HTML層級關係來選擇元素

　　7、分組選擇器將具有相同規則的元素合併設定

 

Why 層疊

　　CSS（cascading style sheets）中文翻譯過來是層疊樣式表，最基本的特性就是層疊。衝突的宣告透過層疊進行排序，由此確定最終的文檔表示######　　在下面的例子，元素選擇器div和類別選擇器.test都可以選擇出

，這就發生了衝突。由於類別選擇器的特殊性大於元素選擇器，所以透過層疊進行排序，最終該元素的樣式為{height: 200px;} ，如果去掉 .test{height: 200px;}  這條規則，則元素的樣式為{height: 100px;}######

<style>div{height: 100px;}.test{height: 200px;}    </style><div></div>

###### ######Why Hack######　　CSS Hack是實現瀏覽器樣式相容的兜底辦法，能不用就盡量不要使用。但是，針對某些瀏覽器的bug，例如舊版IE的bug，有時使用CSS Hack是不得已而為之的做法######　　比如，對於IE6-瀏覽器主要使用下劃線_和中劃線-這兩種字符實現hack。如下圖所示，在IE6瀏覽器中，div的文字顏色為藍色，其他瀏覽器則為紅色######

<span   style="max-width:90%">div{<br>　　color:red;<br>　　_color:blue;<br>}</span>

###### ######Why 偽類別與偽元素# #####　　個人認為，偽類和偽元素是對HTML元素的一個擴展，透過它們可以豐富元素的樣式表現######　　偽類即假的類，類似於透過添加一個實際的類來達到效果，例如常見的hover滑鼠懸停效果######

a:hover{background-color:lightblue;}/*浅蓝，鼠标悬停*/

################　　偽元素即假的元素，類似於透過添加一個實際的元素才能達到。當然，加入的不是元素，而是產生內容，###產生內容主要指由瀏覽器創建的內容###，例如###:before和:after############ ###### ######Why 單位######　　從廣義上講，單位是相對概念，其為事物座標系中的座標軸中能構成個體的抽象概念。長度單位是指測量空間距離上的基本單元，是CSS為了規範長度而製定的基本單位。 ######　　為了更好的測量和表示頁的長度，CSS規定了絕對長度單位、字體相關的長度單位、視口相關的長度單位######【絕對長度單位】### ###　　絕對長度單位代表一個物理測量，包括像素px(pixels)、英吋in(inches)、英吋in(inches)、英吋in(inches)、英吋in(inches)、1/4毫米q(quarter- millimeters)、點pt(points)、派卡pc(picas)######　　在web上，像素px是典型的度量單位，許多其他長度單位直接對應成像素。最終，他們被依照像素處理　　######

1in = 2.54cm = 96px　
1cm = 10mm = 96px/2.54 = 37.8px
1mm = 0.1cm = 3.78px
1q = 1/4mm = 0.945px
1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px
1pc = 12pt = 1/6in = 1/6*96px = 16px

###

【字体相关的长度单位】

　　字体相关的相对长度单位包括em、ex、ch、rem

　　em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size

　　rem是相对于根元素html的font-size属性的计算值

　　ex是指所用字体中小写x的高度。但不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值

　　ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值

【视口相关的长度单位】

　　视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，他们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在

　　关于视口相关的单位有vh、vw、vmin、vmax4个单位

vh:布局视口高度的 1/100
vw:布局视口宽度的 1/100
vmin:布局视口高度和宽度之间的最小值的 1/100
vmax:布局视口高度和宽度之间的最大值的 1/100

 

Why 盒模型

　　盒模型是CSS布局的基础，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小　　

【box-sizing】

　　在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型，但对于表单form中的部分元素还是基于IE的怪异盒模型，如input里的radio、checkbox、button等元素，如果给其设置border和padding它们也只会往元素盒内延伸

　　在W3C的标准模型下，宽度和高度仅仅包含了内容宽度，除去了边框和内边距两个区域，这样为web设计师处理效果带来了不少麻烦。为了解决这个问题，CSS3新增了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式

 

Why margin重叠

　　在网页布局中，因为margin重叠的原因，我们常常把margin作为一个“问题样式”而尽量少地使用它。但实际上，它是在很大的作用的

  HTML文档创建的初衷只是用来展示信息的。HTML文档只使用默认样式的前提下，如果上下margin不发生重叠，则会出现以下几个问题：1、连续段落或列表之类，如果没有margin重叠，首尾项间距会和其他兄弟元素呈现1:2的关系，排版不自然；2、web中任何地方嵌套或直接放入任何裸div，都会影响原生的布局，与web设计原则相违背；3、遗落的空的任意多个p标签，会影响原来的阅读排版

  所以，我们要善用重叠，可以在列表项中同时使用margin-top和margin-bottom。这样，使页面结构更具有健壮性，最后一个元素移除或位置调换，都不会破坏原生的布局

【-webkit-margin-collapse】

-webkit-margin-collapse: <collapse>(默认重叠) | <discard>(取消) | <separate>(分隔)</separate></discard></collapse>

　　此屬性用於設定margin是否重疊，作用於發生margin重疊的兩個元素之一。如果，兩個都使用該屬性，一個設定為discard，一個設定為separate，則最終效果為重疊collase

 

Why auto

　　理解視覺格式化，可以確定得到的效果是應該顯示的正確效果，還是瀏覽器相容性的bug。視覺格式化中比較重要的一個概念就是auto，auto值是用來彌補實際值與所需總和的差距

【為什麼區塊級元素的寬度預設撐滿父級元素】

　　因為區塊級元素width預設值為auto，而margin、border和padding預設值都為0，依據區塊級元素框的水平總和等於父元素的width的計算公式，區塊級元素的寬度width預設等於包含區塊也就是父元素的寬度width

【為什麼區塊級元素設定寬度後，預設居左顯示】

　　因為為區塊級元素設定寬度後，而margin、border和padding預設值都為0，依據區塊級元素框的水平總和等於父元素的width的計算公式。 這種情況，叫做格式化屬性過度受限(overconstrained)，此時總是會把margin-right強制為auto，從而使居左顯示，margin-right來補足剩餘的寬度

【為什麼固定寬度的區塊級元素設定margin:auto可以實現水平居中顯示】

　　同樣依據區塊級元素框的水平總和等於父元素的width的計算公式，border、padding為0，設定固定寬度後，margin -left和margin-right平分剩餘的寬度

【為什麼塊級元素的高度預設為元素自身高度】

　　個人認為，這與瀏覽器先從左到右，再從上到下的渲染機制有關。這種渲染機制決定了寬度值是確定的，高度值是元素本身高度。如果高度值也是確定的，即視口高度，則每渲染一個區塊級元素，就要佔滿整個螢幕大小，無疑是一個災難；所以，瀏覽器在保證足夠寬的情況下，就需要盡量小的高度，這個盡量小的高度就是元素自身高度

【為什麼區塊級元素設定margin:auto無法實現垂直居中顯示】

　　瀏覽器對於margin-top、margin-bottom為auto時，會自動將其重設為0。如果要實現垂直居中，可以利用calc()自行計算，如果height為100px，border為0，padding為10px，包含區塊的高度為200px，則margin-top = calc((200px - 100px - 10px -10px) / 2)

　　[注意]要考慮垂直方向上的margin重疊問題

【為什麼圖片設定margin:auto不可以實現水平居中顯示】

# 　　圖片無法水平居中，類似塊級元素無法垂直居中。因為圖片的寬度width預設為自身寬度，左右margin設定為auto，會被重設為0；如果要實現水平居中顯示，把圖片display設定為block即可

 

Why 行高與垂直對齊

　　普通流下，區塊級元素的佈局主要基礎是盒模型，而行內元素(包括inline-block元素)的佈局則主要依靠

line-height

和

vertical-align

　　

line-height行高是指文字行基線之間的距離

。 vertical-align用來設定垂直對齊方式，所有垂直對齊的元素都會影響行高

【為什麼inline-block元素會存在底部空隙】　　inline- block元素在區塊級元素中留空隙是因為影像的預設垂直對齊方式是基線對齊(基線對齊在原理上相當於圖像底邊與匿名文字大寫英文字母X的底邊對齊)；而匿名文字是有行高的，繼承父級元素設定的行高，預設為normal(chrome下為font-size的1.334倍)，所以X的底邊距離行框的底邊有一段距離，這段距離就是影像留出的空隙

###　　於是，解決這個問題有以下3種解決方法######　　1、設定display:block，因為垂直對齊方式只能作用於替換元素和行內元素，改為區塊級元素，會使垂直對齊方式失效######　　2、設定父級的line-height: 0，這樣使匿名文字與行框的距離為0######　　3、設定vertical-align為top /middle/bottom######【為什麼行內元素垂直margin無效】######　　因為行內元素垂直佈局主要是透過行高line-height和垂直對齊vertical-align來影響的，垂直margin並不會影響它們，所以不會影響垂直佈局。而在顯示方式，margin區域不會顯示元素背景，所以也不會影響自身元素的顯示，所以行內元素垂直margin無效###### ######Why 浮動######## ##　　浮動最早的使用是出自，用於文字環繞圖片的排版處理。如今浮動行為為CSS中常用的佈局方式#######

　　浮動元素脫離普通流，然後按照指定方向，向左或向右移動，碰到父級邊界或另外一個浮動元素停止。浮動具有以下4個特性：

　　1、浮動流：正常流中元素一個接一個排列；浮動元素也構成浮動流

　　2、塊級框：浮動元素本身會生成一個塊級框，不論這個元素本身是什麼，使浮動元素周圍的外邊距不會合併

　　3、包裹性：浮動元素的包含塊是指其最近的塊級祖先元素，後代浮動元素不應該超出包含區塊的上、左、右邊界。若不設定包含塊的高度，包含塊若浮動，則包含塊會延伸，進而包含其所有後代浮動元素；若不設置包含塊的寬度，包含塊若浮動，則包含塊寬度由後代浮動元素撐開

　　4、破壞性：浮動動元素脫離正常流，並破壞了自身的行框屬性，使其包含塊元素的高度塌陷，使浮動框旁的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框重新排列

【為什麼需要清除浮動】

　　清浮動，其實就是解決浮動元素的包含塊高度塌陷的問題

　　對於標準瀏覽器來說，清浮動其實就兩種方法，一種是在浮動元素下面添加新元素設定clear屬性；另一種是觸發包含區塊的BFC，使其包含浮動元素

 

#Why BFC

　　經常地，我們使用BFC來清除浮動，但實際上BFC還有很多其他的用途

　　在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位流、浮動流和普通流三種。而普通流其實就是指BFC中的FC。 FC是formatting context的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局，以及和其他元素之間的關係和作用。常見的FC有BFC、IFC，還有GFC和FFC。 BFC是block formatting context，也就是區塊級格式化上下文，是用於佈局區塊級盒子的一塊渲染區域

##　　滿足下列條件之一就可觸發BFC

　　1、根元素，即HTML元素

　　2、float的值不為none

　　3、overflow的值不為visible

#　　4、display的值為inline-block、table-cell、table-caption

　　5、position的值為absolute或fixed

　　BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面元素，反之亦然。經常使用BFC實現以下3個用途

　　1、阻止元素被浮動元素覆蓋

　　透過改變內容為BFC背景為紅色的盒子的屬性值，使其成為BFC，以此阻止被綠色的浮動盒子覆蓋

　　2、包含浮動元素

　　透過改變高度塌陷的黑色邊框的盒子的屬性值，使其成為BFC，以此來包含綠色的浮動盒子 

#　　3、

屬於同一個BFC的兩個相鄰區塊級子元素的上下margin會發生重疊，(設定writing-mode:tb-rl時，水平margin會發生重疊)。所以當兩個相鄰區塊級子元素分屬於不同的BFC時可以阻止margin重疊

　　

淡紅色背景的區塊級盒子二的外麵包一個div ，透過改變此div的屬性使紅色盒子與綠色盒子分屬於兩個不同的BFC，以此來阻止margin重疊卷 

 

Why 定位

　　CSS有三種基本的佈局機制：普通流、浮動流和定位流。利用定位，可以精確定義元素框相對於其正常位置應該出現的位置，或相對於父元素、另一個元素甚至瀏覽器視窗本身的位置

　　當元素絕對定位時，會從文檔流中完全刪除。元素位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於初始包含塊document，其邊界根據偏移屬性放置。元素定位後產生一個區塊級框，而不論原來它在正常流中產生何種類型的框。定位元素不會流入其他元素的內容，反之亦然

　　當元素相對定位時，它會從其正常位置移走，不過，原來所佔的空間並不會因此消失。相對定位元素，會為其所有子元素建立一個新的包含區塊。這個包含區塊對應於該元素原本所在的位置#

　　固定定位与绝对定位很类似，元素会完全从文档流中去除，但固定元素的偏移是相对于视窗

【为什么clip属性无效】

　　绝对定位或固定定位元素才可以使用clip属性。绝对定位元素常配合clip属性达到元素隐藏的效果

.hide{
    position:absolute;
    clip: rect(0,0,0,0);
}

【为什么静态位置的元素会发生跳动】

　　对于居中对齐的行内元素来说，将元素设置为absolute或fixed会发生静态位置跳动问题。而relative或static则不会有此问题。这是因为元素默认的居中对齐是元素的内容中线对应父级块级元素中线，而当元素绝对定位或固定定位之后，定位元素左边界将与其父级块级元素的中线对齐

【为什么overflow属性会失效】

　　当overflow在绝对定位元素和其包含块之间时，绝对定位元素不会被父级overflow属性剪裁

　　解决办法就是有两种， 一种是让overflow元素自身成为包含块，给父级设置position:absolute或fixed或relative；另一种是设置overflow元素的子元素为包含块，在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative

 

Why z-index

　　对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性z-index

　　利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高z-index值的元素比较低z-index值的元素离用户更近，这会导致较高z-index值的元素覆盖其他元素，这也称为堆叠或叠放

　　对于CSS2.1来说，页面元素的堆叠规则如下图所示

　　对于定位元素(position不是static的元素)来说，不设置z-index或z-index相同时，后面元素覆盖前面元素；对于处于同一堆叠上下文中的同一层次的元素来说，默认z-index较大值覆盖z-index较小值

　　一旦为一个元素指定了z-index值(不是auto)，该元素会建立自己的局部堆叠上下文。这意味着，元素的所有后代相对于该祖先元素都有其自己的叠放顺序

　　[注意]auto值指当前堆叠上下文中生成的栈层次与其父框的层次相同，这个框不会建立新的局部叠放上下文。z-index:auto与z-index:0的值相等，但z-index:0会建立新的局部堆叠上下文

　　CSS3的出现对过去的很多规则发出了挑战。对层叠上下文z-index的影响更加显著，主要包括以下8个属性 

　　1、z-index值不为auto的flex项(父元素display:flex | inline-flex)

　　2、元素的透明度opacity值不等于1

　　3、元素的变形transform不是none

　　4、元素的mix-blend-mode值不是normal

　　5、元素的filter值不是none

　　6、元素的isolation值是isolate

　　7、will-change指定的属性值为上面的任意一个

　　8、元素的-webkit-overflow-scrolling设置为touch

　　设置以上8个属性的任意一个，都和设置absolute类似，层叠上下文z-index会生效

 

Why 溢出

　　当一个元素固定为某个特定大小，但内容在元素中放不下。此时可以利用溢出(overflow)来控制这种情况

　　overflow-x和overflow-y的属性原本是IE浏览器独自拓展的属性，后来被CSS3采用，并标准化。overflow-x主要用来定义对水平方向内容溢出的剪切，而overflow-y主要用来定义对垂直方向内容溢出的剪切

　　当overflow设置为auto或scroll或hidden时可以触发BFC，使得overflow可以实现一些相关应用 

【为什么会出现滚动条】

　　滚动条和overflow是紧密相关的。只有当父级的overflow的值是auto或scroll，并且元素的内容超出元素区域时，才有可能出现滚动条

　　无论什么浏览器，默认滚动条均来自，而不是。因为元素默认有8px的margin。若滚动条来自元素，则滚动条与页面则应该有8px的间距，实际上并没有间距，所以滚动条来自元素

　　chrome/firefox/IE浏览器的默认滚动条宽度是17px，safari浏览器则是21px

 

Why flex

　　CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写，一般称之为弹性盒模型。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕 

　　伸缩容器默认存在两条轴: 水平的主轴(main axis) 和垂直的侧轴(cross axis)

　　[注意]主轴方向不一定是水平的，它主要取决于justify-content属性

　　主轴起点叫main start，主轴终点叫main end；侧轴起点叫cross start，侧轴终点叫cross end

　　伸缩项目默认沿主轴排列。单个伸缩项目占据的主轴空间叫main size ，占据的侧轴空间叫cross size

　　[注意]伸缩项目的main size和cross size主要由宽度或高度决定

　　利用flex可以简单的实现各种布局形式，详细情况移步至此

 

Why 多列布局

　　浮动作为常见排版方式只是不得已为之的行为，最初只是用来实现图文混排，也最好只用于图文混排，而不是更复杂的布局结构

　　定位用于对元素的精准定位布局

　　个人认为，flex布局提供的灵活布局方式可以用来替代被泛滥使用的浮动布局

　　而多列布局则提供了类似于报纸、杂志类的排版方式

　　CSS新增了多列布局特性，可以让浏览器确定何时结束一列和开始下一列，无需任何额外的标记。简单来说，就是CSS3多列布局可以自动将内容按指定的列数排列，这种特性实现的布局效果和报纸、杂志类排版非常相似

 

以上是CSS為什麼能被廣泛使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！