主講人

• 趙文博
• 360前端技術專家
• 奇舞團

一、選擇器的特異度(Specificity)

提出問題：哪條規則生效？

<article><h1 class="title">拉森火山國家公園</h1> </article><style>.title {color: blue;}article h1 {color: red;} </style>

解決問題：選擇器的特異度(Specificity)

可以看成 122 > 22，所以第一個選擇器的優先級更高。
高優先級選擇器會覆蓋低優先級選擇器相同屬性的值，可以利用此特性實現CSS代碼的復用。
公共的樣式復用，特殊的樣式覆蓋。
例：

<button class="btn">普通按鈕</button> <button class="btn primary">主要按鈕</button> <style>.btn {display: inline-block;padding: .36em .8em;margin-right: .5em;line-height: 1.5;text-align: center;cursor: pointer;border-radius: .3em;border: none;background: #e6e6e6;color: #333;}.btn.primary {color: #fff;background: #218de6;} </style>

運行效果：

3. 繼承：某些屬性會自動繼承其父元素的計算值，除非顯式指定一個值。
舉例：p元素、em元素、strong元素繼承了body元素的字體大小，strong元素繼承了p元素的顏色。

<p>This is a <em>test</em> of<strong>inherit</strong> </p><style>body {font-size: 20px;}p {color: blue;}em {color: red;} </style>

運行效果：

有些屬性（比如：字體系列屬性）可以繼承，有些屬性是不可以直接繼承的（除text-indent、text-align之外的文本系列屬性），此時需要inheit屬性使它能夠繼承。
4. 顯式繼承inherit

* {box-sizing: inherit; /*從父級獲取*/ }html {box-sizing: border-box; }.some-widget {box-sizing: content-box; }

初始值

• CSS 中，每個屬性都有一個初始值
  1）background-color 的初始值為 transparent（透明）
  2）margin-left 的初始值為 0
• 可以使用 initial 關鍵字顯式重置為初始值
  background-color: initial （強迫設置初始值：透明）

二、CSS 求值過程

布局（Layout）是什么?

• 確定內容的大小和位置的算法
• 依據元素、容器、兄弟節點和內容等信息來計算

布局相關技術

• 常規流：行級、塊級、表格布局、Flexbox、Grid 布局
• 浮動
• 絕對定位

盒模型

1）width

• 指定 content box 寬度
• 取值為長度(px、em)、百分數、auto
• auto 由瀏覽器根據其它屬性確定
• 百分數相對于容器的 content box 寬度

2）height

• 指定 content box 高度
• 取值為長度(px、em)、百分數、auto
• auto 取值由內容計算得來（依賴子元素高度）
• 百分數相對于容器的 content box 高度
• 容器有指定的高度時，百分數才生效

3）padding

• 指定元素四個方向的內邊距
• 百分數相對于容器寬度
  
  padding有1個值的時候：上下左右都是一個值。
  padding有2個值的時候：上下是第一個值，左右是第二個值
  padding有2個值的時候：依次表示上右下（左=右）的值
  padding有4個值的時候：依次表示上右下左的值
  

4） border：指定容器邊框樣式、粗細和顏色???????

• 邊框

• 三種屬性
  border-width：邊框粗細
  border-style：邊框樣式，none（無樣式）、solid（實線）、dashed（虛線）、dotted（點狀線）
  border-color：邊框顏色

• 四個方向
  border-top
  boder-right
  border-bottom
  border-left

例子：

border: 1px solid #ccc;border-left: 1px solid #ccc; border-right: 2px dotted red;border-width: 1px 2px 3px 4px; border-style: solid; border-color: green blue;border-left-width: 3px; border-top-color: #f00;

可以使用border畫三角形
5）margin

• 指定元素四個方向的外邊距
• 取值可以是長度、百分數、auto
• 百分數相對于容器寬度

使用 margin:auto 水平居中

<div></div><style> div {width: 200px;height: 200px;background: coral;margin-left: auto;margin-right: auto; } </style>

• margin collapse
  上下相鄰的margin會疊加，取較大值，相同時，取相同值。
  只會發生在垂直方向上，不會發生在水平方向上。
  在下邊例子中，margin-bottom: 100px;margin-top:100px; 最后間距是100px。

<div class="a"></div> <div class="b"></div><style>.a{background: lightblue;height: 100px;margin-bottom: 100px;}.b {background: coral;height: 100px;margin-top: 100px;} </style>

運行結果

6）box-sizing

• 默認值：content+padding+boder的width和height。
• 設置border-box：包含boder在內的高度和寬度。
  

overflow

• 設置固定高度時，內容溢出時的處理
• 屬性：visible（默認值）：顯示超出的文字 ，hidden：超出的文字不可見，scroll：有滾動條 ，auto：超出時有滾動條，不超出時沒有滾動條

塊級 vs. 行級
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
行內元素有：a b span img input select strong
空元素：<br> <hr> <img> <input> <link> <meta>
塊級元素會生成塊級的盒子：Block Level Box
行級元素會生成行級的盒子：Inline Level Box，不能設置寬度和高度，由內容計算得到。

塊級元素與行級元素
display: block：設置成塊級元素
display: inline：設置成行級元素

display

• block：塊級盒子
• inline：行級盒子
• inline-block：本身是行級，可以放在行盒中；可以設置寬高；作為一個整體不會被拆散成多行
• none：排版時完全被忽略

三、常規流 Normal Flow

流：按照某種流向擺放。

• 根元素、浮動和絕對定位的元素會脫離常規流
• 其它元素都在常規流之內（in-flow）
• 常規流中的盒子，在某種排版上下文中參與布局

行級排版上下文

• Inline Formatting Context (IFC)
• 只包含行級盒子的容器會創建一個IFC
• IFC 內的排版規則
  盒子在一行內水平擺放
  一行放不下時，換行顯示
  text-align 決定一行內盒子的水平對齊
  vertical-align 決定一個盒子在行內的垂直對齊
  避開浮動(float)元素*

<div>This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image<img src="https://p4.ssl.qhimg.com/t01364272cf34a8f4d1.png" alt="cat">And <em>Inline Block</em> </div><style>div {width: 10em;font-size: 20px;//overflow-wrap: break-word; 必要的時候可換行background: #fcc;}em {display: inline-block;width: 3em;background: #99f;} </style>

2. 塊級排版上下文

• Block Formatting Context (BFC)
• 某些容器會創建一個BFC
  根元素
  浮動、絕對定位、inline-block
  Flex子項和Grid子項
  overflow 值不是 visible 的塊盒

1）BFC 內的排版規則

• 盒子從上到下擺放
• 垂直 margin 合并
• BFC 內盒子的margin不會與外面的合并
• BFC 不會和浮動元素重疊

<span>This is a text and<div>block</div>and other text. </span><style>span {line-height: 3;border: 2px solid red;background: coral;}div {line-height: 1.5;background: lime;} </style>

3. Flex Box 是什么？

• 一種新的排版上下文:Flex 排版上下文
• 它可以控制子級盒子的：
  擺放的流向 ( → ← ↑ ↓ )單向布局
  擺放順序
  盒子寬度和高度
  水平和垂直方向的對齊
  是否允許折行

1）display: flex

• display: flex 使元素生成一個塊級的 Flex 容器
• display: inline-flex 使元素生成一個行級的 Flex 容器

<div class="container"><div class="a">A</div><div class="b">B</div><div class="c">C</div> </div> <style>.container {display: flex;border: 2px solid red;}.a, .b, .c {text-align: center;padding: 1em;}.a { background: #fcc; }.b { background: #cfc; }.c { background: #ccf; } </style>

2）flex-direction
控制元素流向，默認從左到右。
flex-direction：row（默認值）從左到右
flex-direction：row-reverse 從右到左
flex-direction：colum 從上到下
flex-direction：colum-reverse 從下到上

3）Flexibility

• 可以設置子項的彈性：當容器有剩余空間時，會伸展；容器空間不夠時，會收縮。
• flex-grow 有剩余空間時的伸展能力，默認值：0（不可伸展）
• flex-shrink 容器空間不足時收縮的能力，默認值：1（可收縮），0：不可收縮
• flex-basis 沒有伸展或收縮時的基礎長度，關鍵字：content（內容的寬度）
• flex可表示以上3個屬性
  例：flex:1 1 auto
• flex-wrap：控制是否換行
  flex-wrap:nowrap（默認不換行）
  flex-wrap:wrap（換行）
  
  主軸：flex-direction，元素的流向
  側軸：與主軸垂直
  
  主軸對齊：justify-content
  flex-start：左對齊
  flex-end：右對齊
  center：居中
  space-between：第一個元素和最后一個元素分別在兩端，中間元素通過空白平分
  space-around：在首位元素的兩邊都加一些空白
  space-evenly：用相等的空白把元素分割開
  
  側軸對齊：align-items
  屬性
  flex-start：元素位于容器的開頭。
  flex-end：元素位于容器的結尾。
  center：元素位于容器的中心。
  stretch：（默認值）元素被拉伸以適應容器。
  baseline：元素位于容器的基線上。
  
  自己特殊對齊：align-self
  屬性
  auto：默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 “stretch”。
  flex-start：元素位于容器的開頭。
  flex-end：元素位于容器的結尾。
  center：元素位于容器的中心。
  stretch：（默認值）元素被拉伸以適應容器。
  baseline：元素位于容器的基線上。
  

order：控制擺放順序
默認值為0

Grid 布局（二維布局方式）

1）display: gird

• display: grid 使元素生成一個塊級的 Grid 容器
• 使用 grid-template 相關屬性將容器劃分為網格
• 設置每一個子項占哪些行/列
  

第一步：劃分網格：
grid-template-colums（列的劃分），grid-template-rows（行的劃分）
3種寫法：
grid-template-colums: 100px 100px 200px；grid-template-rows: 100px 100px;
grid-template-colums: 30% 30% auto；grid-template-rows: 100px auto;
grid-template-colums: 100px 1fr 1fr；grid-template-rows: 100px 1fr;

第二步：指定區域
按照網格編號劃分
Grid line 網格線

Grid area 網格區域 ：編號
屬性
grid-row-start：指定開始顯示項目的行。
grid-column-start：指定開始顯示項目的列。
grid-row-end：指定停止顯示項目的行線或要跨越的行數。
grid-column-end：指定停止顯示項目的行線或要跨越的列數。
簡寫：grid-area: 1/1/3/3

四、浮動

文字環繞圖片時：左浮動、右浮動。
例：

<section><img src="/m.jpg" width="300"alt="mojave"><p>莫哈韋沙漠不僅...</p> </section><style>img {float: left; /*左浮動*/}p {font-size: 20px;line-height: 1.8;} </style>

position 屬性

• static：默認值，非定位元素
• relative：相對自身原本位置偏移，不脫離文檔流（相對定位）
• absolute：絕對定位，相對非 static 祖先元素定位
• fixed：相對于視口絕對定位

1）position: relative

• 在常規流里面布局
• 相對于自己本應該在的位置進行偏移
• 使用 top、left、bottom、right 設置偏移長度
• 流內其它元素當它沒有偏移一樣布局
  
  2）position: absolute
• 脫離常規流
• 相對于最近的非 static 祖先定位
• 不會對流內元素布局造成影響
  

<h1>頁面標題</h1> <div class="container"><div class="box"></div><p>段落內容段落內容 1</p><p>段落內容段落內容 2</p><p>段落內容段落內容 3</p><p>段落內容段落內容 4</p> </div><style>.container {background: lightblue;}.box {position: absolute;top: 0;left: 0;width: 100px;height: 100px;background: red;} </style>

運行結果：box相對于根元素定位

3）position: fixed

• 相對于 Viewport 定位
• 不會隨面滾動發生位置變化

<nav><a href="#">首頁</a><a href="#">導航1</a><a href="#">導航2</a> </nav> <main><section>1</section><section>2</section><section>3</section><section>4</section><section>5</section> </main> <a href="#" class="go-top">返回頂部</a><style>nav {position: fixed;line-height: 3;background: rgba(0,0,0,0.3);width: 100%;}nav a {padding: 0 1em;color: rgba(255,255,255,0.7);}nav a:hover {color: #fff;}.go-top {position: fixed;right: 1em;bottom: 1em;color: #fff;}body {margin: 0;font-size: 14px;}a {color: #fff;text-decoration: none;}section {height: 100vh;color: #fff;text-align: center;font-size: 5em;line-height: 66vh;}section:nth-child(1) {background: #F44336;}section:nth-child(2) {background: #3F51B5;}section:nth-child(3) {background: #FFC107;}section:nth-child(4) {background: #607D8B;}section:nth-child(5) {background: #4CAF50;} </style>

總結

以上是生活随笔為你收集整理的第六届360前端星计划_深入CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。