校招進行時（四）---css基礎

時間 2019-11-10

標籤進行 css 基礎欄目 CSS 简体版

原文原文鏈接

恩，小菜鳥又來了，上篇文章在這，話很少說，此次羅列總結一下css基礎知識，和我同樣的菜鳥能夠看看。css

引入方式

css的引入方式主要有如下幾種：html

外部樣式表web

經過在head標籤中加入link標籤來引入外部樣式表，由於其良好的分離性和可維護性，大多數css樣式都是經過這種方式引入的bootstrap
內部樣式表segmentfault

直接將css樣式放入style標籤置於head標籤內瀏覽器
內聯樣式表ide

直接將css樣式寫入html元素的style屬性佈局

盒子模型與BFC

在一個文檔中，每一個元素都被表示爲一個矩形的盒子。肯定這些盒子的尺寸, 屬性（顏色，背景，邊框方面）和位置是渲染引擎的目標。性能

在CSS中，使用標準盒模型描述這些矩形盒子中的每個。這個模型描述了元素所佔空間的內容。每一個盒子有四個邊：外邊距邊（margin）, 邊框邊（border）, 內填充邊（padding）與內容邊（content）flex

行內元素和塊級元素

內聯元素(inline)

和相鄰的內聯元素在同一行
padding和margin的left和right能夠進行設置改變
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，固定爲裏面文字或圖片撐開的大小

塊級元素(block)

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制

內聯塊元素（inline-block）

擁有內在尺寸，可設置高寬，但不會自動換行
一些瀏覽器默認的inline-block元素： input 、img 、button 、textarea 、label

外邊距重疊

在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

摺疊結果遵循下列計算規則：

兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值
兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值
兩個外邊距一正一負時，摺疊結果是二者的相加的和

BFC

Formatting context

在說BFC以前，先解釋一下Formatting context，即FC。其是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增長了 GFC 和 FFC。

BFC定義

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box（塊級元素）參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

BFC內部規則

內部的Box會在垂直方向，一個接一個地放置
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個box的margin-left，與內容塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此
BFC的區域不會與float box重疊
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此
計算BFC的高度時，浮動元素也參與計算

BFC的做用

BFC的經常使用功能以下

文檔佈局
清除浮動
清除重疊外邊距

觸發BFC的條件

根元素
float屬性不爲none
overflow不爲visible
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex

例子

自適應兩欄式佈局

<style>
    body {
      margin: 0;
      padding: 0;
      position: relative;
    }
    .aside {
        width: 200px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        overflow: hidden;
        background: #fcc;
    }
</style>

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果

根據BFC第三條規則，雖然存在浮動元素aside，可是main元素的左邊依然會跟包含塊的border相接觸，這時經過設置main元素的overflow：hidden觸發產生一個新的BFC，便實現了簡單的兩欄自適應佈局。

更多例子能夠查看

選擇器與優先級

選擇器

css經過選擇器關聯html標籤，以達到控制html元素樣式的效果，基本的選擇器有如下幾種：

派生選擇器：直接用html標籤進行選擇
類選擇器：使用html元素的class屬性進行選擇
id選擇器：使用html元素的id屬性進行選擇

以上三種選擇器爲css中最基本的選擇器，其餘選擇器都是三者的延伸、擴展或者組合，例如：

僞元素選擇器：利用 : 選擇僞元素
後代選擇器：利用空格進行後代的選擇
```
.header .nav{//選取header類中的nav類}
```
兄弟選擇器（貓頭鷹選擇器）：使用+來選擇兩個緊接着的元素，且它們擁有相同的父元素，由於其樣子酷似貓頭鷹，因此又被稱爲貓頭鷹選擇器，貓頭鷹選擇器雖然冷門，可是應用在多個相同元素的排列的時候會自動幫你處理一些邊緣問題，這裏就不展開了詳情請戳
```
.warp div + div{//選取warp類下的全部兄弟div}
```
羣組選擇器：利用逗號進行多個元素的選取
```
div, .avatar, a{//選取全部div、avatar類和a標籤}
```
屬性選擇器：利用中括號選擇帶有特定屬性的元素
```
a[title]{//選擇全部帶有title屬性的a標籤}
```

優先級（特殊性）

通常來講，越複雜越精確的選擇器優先級就越高，在css權威指南上，是這樣來定義和區分優先級的：

選擇器的特殊性由選擇器自己的組件肯定。特殊性值表現爲4個部分，如：0， 0， 0， 0

一個選擇器的具體特殊性以下肯定：

對於選擇器中給定的各個ID屬性值，加 0100
對於選擇器中給定的各個類屬性值、屬性選擇或僞類，加 0010
對於選擇器中給定的各個元素或僞元素，加 0001。僞元素是否有特殊性？在這方面CSS2有些自相矛盾，可是在CSS2.1中明確指出，僞元素有特殊性，而且爲0001
結合符和統配選擇器對特殊性沒有任何貢獻（後面還會更多地介紹這些值）
內聯樣式的聲明特殊性都是1000
重要性：有時某個聲明可能很是重要，超過了其餘全部聲明。CSS2.1稱之爲重要聲明，並容許這些聲明的結束分號以前插入 !important 來標誌

CSS的優先級還遵循疊加規則，即

span#xxx .songs li{//這個選擇器的特殊性爲0112}

補充

* 號表明通配符，選取文檔中的全部元素，通常不建議使用，首先過於暴力，其次影響渲染性能

樣式最後的渲染效果與樣式定義在文件中的前後順序有關，即後面的覆蓋前面的，與在html文檔中的前後關係無關。例如：

<style>
  .A{ color:blue;}
  .B{ color:red;}
</style>

<body>
<p class='B A'> 123 </p>
</body>

最後「123」的顏色是 red

CSS Hack

什麼是CSS Hack

因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不同，致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，咱們把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack

CSS Hack的方法

條件註釋法

<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->

類內屬性前綴法

.hack{  
  background-color:red; /* All browsers */  
  background-color:blue !important;/* All browsers but IE6 */  
  *background-color:black; /* IE6, IE7 */  
  +background-color:yellow;/* IE6, IE7*/  
  background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
  background-color:purple\0; /* IE8, IE9, IE10 */  
  background-color:orange\9\0;/*IE9, IE10*/  
  _background-color:green; /* Only works in IE6 */  
}

媒體查詢

@media \0screen\,screen\9 {
  .hack{
    /* IE 6 7 8 */
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
   .demo {
      /* Webkit內核 */
    }
}

基礎佈局

垂直居中

方法有不少，我大概羅列一下我用得比較多的

包裹法

<div id="warpper">  
  <div id="content">Content here</div>
</div>

#warpper {
  float: left;
  height: 50%;
  margin-bottom: -150px;
}

#content {
  clear: both;
  height: 300px;
  position: relative;
}

這種方法在須要垂直居中的div外再包裹一個div，並將其設置浮動，margin-bottom爲內部div的 1/2 * height，以後content觸發BFC，內部也能放元素。優勢是兼容性比較好，缺點是增長了額外的元素，而且高度不能改變。

flexbox

<div id="warpper">  
  <div id="content">Content here</div>
</div>

#warpper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

用起來最舒服最簡單的方法，可是，兼容性是個大問題，好比IE要IE11才兼容，很尷尬。

水平居中

水平居中比較簡單，通常不會問到，可是做爲複習也說得過去

margin

<div id="content">Content here</div>


#content {
  margin: 0 auto;
}

絕對定位

<div id="content">Content here</div>

.content {
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -(width/2);
}

flexbox

<div id="warpper">  
  <div id="content">Content here</div>
</div>

#warpper {
  display: flex;
  align-items: center;
}

柵格佈局

原理

一個柵格佈局通常分爲：容器（container）、行（row）、列（col）

其中容器用於肯定總體佈局的寬度，設定了容器的寬度之後，再設置一個容器中容納多少行，最後在在每一行中肯定有多少列，同時列與列之間的間隔也被提早規定，這使得咱們在佈局的時候就很簡單了，不用過多的考慮對齊問題。其中列是真正顯示文檔內容的元素。

列寬

一個能用的柵格系統，會提早準備一個聲明列寬的類，將容器的寬度平分爲幾個等分，這個等分通常時3或4的倍數，這樣比較容易排版，固然，分的越多排版越精確

嵌套

柵格系統能夠嵌套，即列也能夠做爲容器繼續嵌套柵格，這即是嵌套柵格

列的換行與行的偏移

一個完美支持響應式的柵格系統支持列的換行，即同一行的不一樣列之間的高度能夠不相同，這種行爲可以大大增強柵格系統的響應式能力。同時其還支持列的偏移，便可以不從第一列開始，將某幾列做爲空隙。

具體的柵格系統可參考bootstrap官網

後記

做爲一個菜鳥能羅列收集的東西大概也就那麼多了，還有一些比較基礎的因爲篇幅緣由就沒有放上來，固然還有好多也很重要的東西沒羅列出來，這要歸結於本身仍是太菜，要是對你有幫助的話，就點個贊咯。有問題的話也接受一切批評和建議，我會努力加油的。上一篇文章在本篇頭部，全部文章收錄於個人博客中。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。