主講人

• 趙文博
• 360前端技術(shù)專家
• 奇舞團(tuán)

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

提出問題：哪條規(guī)則生效？

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

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

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

<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>

運(yùn)行效果：

3. 繼承：某些屬性會自動繼承其父元素的計(jì)算值，除非顯式指定一個值。
舉例：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>

運(yùn)行效果：

有些屬性（比如：字體系列屬性）可以繼承，有些屬性是不可以直接繼承的（除text-indent、text-align之外的文本系列屬性），此時(shí)需要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 關(guān)鍵字顯式重置為初始值
  background-color: initial （強(qiáng)迫設(shè)置初始值：透明）

二、CSS 求值過程

布局（Layout）是什么?

• 確定內(nèi)容的大小和位置的算法
• 依據(jù)元素、容器、兄弟節(jié)點(diǎn)和內(nèi)容等信息來計(jì)算

布局相關(guān)技術(shù)

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

盒模型

1）width

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

2）height

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

3）padding

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

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

• 邊框

• 三種屬性
  border-width：邊框粗細(xì)
  border-style：邊框樣式，none（無樣式）、solid（實(shí)線）、dashed（虛線）、dotted（點(diǎn)狀線）
  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

• 指定元素四個方向的外邊距
• 取值可以是長度、百分?jǐn)?shù)、auto
• 百分?jǐn)?shù)相對于容器寬度

使用 margin:auto 水平居中

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

• margin collapse
  上下相鄰的margin會疊加，取較大值，相同時(shí)，取相同值。
  只會發(fā)生在垂直方向上，不會發(fā)生在水平方向上。
  在下邊例子中，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>

運(yùn)行結(jié)果

6）box-sizing

• 默認(rèn)值：content+padding+boder的width和height。
• 設(shè)置border-box：包含boder在內(nèi)的高度和寬度。
  

overflow

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

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

塊級元素與行級元素
display: block：設(shè)置成塊級元素
display: inline：設(shè)置成行級元素

display

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

三、常規(guī)流 Normal Flow

流：按照某種流向擺放。

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

行級排版上下文

• Inline Formatting Context (IFC)
• 只包含行級盒子的容器會創(chuàng)建一個IFC
• IFC 內(nèi)的排版規(guī)則
  盒子在一行內(nèi)水平擺放
  一行放不下時(shí)，換行顯示
  text-align 決定一行內(nèi)盒子的水平對齊
  vertical-align 決定一個盒子在行內(nèi)的垂直對齊
  避開浮動(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; 必要的時(shí)候可換行background: #fcc;}em {display: inline-block;width: 3em;background: #99f;} </style>

2. 塊級排版上下文

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

1）BFC 內(nèi)的排版規(guī)則

• 盒子從上到下擺放
• 垂直 margin 合并
• BFC 內(nèi)盒子的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
控制元素流向，默認(rèn)從左到右。
flex-direction：row（默認(rèn)值）從左到右
flex-direction：row-reverse 從右到左
flex-direction：colum 從上到下
flex-direction：colum-reverse 從下到上

3）Flexibility

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

order：控制擺放順序
默認(rèn)值為0

Grid 布局（二維布局方式）

1）display: gird

• display: grid 使元素生成一個塊級的 Grid 容器
• 使用 grid-template 相關(guān)屬性將容器劃分為網(wǎng)格
• 設(shè)置每一個子項(xiàng)占哪些行/列
  

第一步：劃分網(wǎng)格：
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;

第二步：指定區(qū)域
按照網(wǎng)格編號劃分
Grid line 網(wǎng)格線

Grid area 網(wǎng)格區(qū)域 ：編號
屬性
grid-row-start：指定開始顯示項(xiàng)目的行。
grid-column-start：指定開始顯示項(xiàng)目的列。
grid-row-end：指定停止顯示項(xiàng)目的行線或要跨越的行數(shù)。
grid-column-end：指定停止顯示項(xiàng)目的行線或要跨越的列數(shù)。
簡寫：grid-area: 1/1/3/3

四、浮動

文字環(huán)繞圖片時(shí)：左浮動、右浮動。
例：

<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：默認(rèn)值，非定位元素
• relative：相對自身原本位置偏移，不脫離文檔流（相對定位）
• absolute：絕對定位，相對非 static 祖先元素定位
• fixed：相對于視口絕對定位

1）position: relative

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

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

運(yùn)行結(jié)果：box相對于根元素定位

3）position: fixed

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

<nav><a href="#">首頁</a><a href="#">導(dǎo)航1</a><a href="#">導(dǎo)航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>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。