學(xué)習(xí)路線

1、塊元素，行內(nèi)塊元素，行內(nèi)元素定義

image.png

image.png

image.png

image.png

image.png

2、盒子模型

image.png

3、文本操作

image.png

image.png

文本垂直操作：vertical-align的使用圖示。middle設(shè)置居中。
vertical-align 只對(duì)行內(nèi)元素、行內(nèi)塊元素和表格單元格（table-cell）元素生效：不能用它垂直對(duì)齊塊級(jí)元素。

image.png

image.png

image.png

image.png

image.png

4、外邊距margin

1.對(duì)于行內(nèi)元素來(lái)說(shuō)，左右的margin是可以完美設(shè)置的，上下的margin設(shè)置后是無(wú)效的。對(duì)于行內(nèi)元素來(lái)說(shuō)，左右的padding是可以完美設(shè)置的，上下的padding設(shè)置后是會(huì)被遮擋。反之塊元素和行內(nèi)塊元素則正常。
2.給一個(gè)固定寬高的塊級(jí)元素左右margin-left，margin-right設(shè)置auto可以實(shí)現(xiàn)該元素在其父容器里面水平左右居中，反之設(shè)置豎直方向的margin則豎直方向居中。但是行內(nèi)元素設(shè)置無(wú)效，因?yàn)樾袃?nèi)元素?zé)o法設(shè)置寬高生效。
3.父容器開(kāi)啟flex布局，子容器margin:auto;也可以設(shè)置設(shè)置子容器居中。

image.png

5、塌陷問(wèn)題

• 父子元素間margin上下方向異常俗稱“塌陷”
  1.float引起的父容器“塌陷”問(wèn)題，而自己本身不會(huì)塌陷。自己當(dāng)前元素脫離文檔流后，不再能撐起父元素的高度，導(dǎo)致父元素高度塌陷，但父元素的寬度依然束縛浮動(dòng)的子元素。解決方法見(jiàn)文章下方浮動(dòng)解析，如設(shè)置父元素清除浮動(dòng)。
  2.設(shè)置float浮動(dòng)后的元素不會(huì)出現(xiàn)內(nèi)部子元素上下margin合并問(wèn)題，也可以清除第一個(gè)子元素上邊距和最后一個(gè)子元素下邊距被父元素剝奪問(wèn)題。
  

  image.png

• 兄弟元素之間，上下發(fā)生重疊合并margin-top和margin-bottom的問(wèn)題，它們的距離會(huì)合并取其中最大的一個(gè)值。
  1.無(wú)需特殊解決，只需設(shè)置一個(gè)方向的margin-top或margin-bottom其中之一即可
  2.可以在元素多套一個(gè)父容器，給父容器設(shè)置overflow：hidden
  

  image.png

6、內(nèi)容溢出問(wèn)題

image.png

image.png

7、樣式繼承

image.png

8、元素空白問(wèn)題，x基線對(duì)齊導(dǎo)致處理

image.png

image.png

9、浮動(dòng)float

• 創(chuàng)建的初衷是為了實(shí)現(xiàn)文字環(huán)繞效果，也就導(dǎo)致浮動(dòng)模塊蓋住的區(qū)域內(nèi)的文字會(huì)被擠出來(lái)到浮動(dòng)模塊外展示給用戶觀看。

• 定位功能可以代替大部分浮動(dòng)實(shí)現(xiàn)效果。定位模塊式：相對(duì)定位(relative)，絕對(duì)定位( absolute)，固定定位(fixed)，粘性定位(sticky)，默認(rèn)定位模式static。

  
  
  image.png
  
  
  image.png
  
  
  image.png

image.png

image.png

清楚浮動(dòng)影響，通過(guò)對(duì)父容器末尾添加一個(gè)偽元素，設(shè)置內(nèi)容空字符
parent::after{
content :"";
display: block;
clear :both;
}

image.png

10、 定位

定位元素（positioned element）是其計(jì)算后位置屬性為 relative, absolute, fixed 或 sticky 的一個(gè)元素（換句話說(shuō)，除static以外的任何東西）。

• 默認(rèn)定位元素static按照正常文檔流布局，不會(huì)影響浮動(dòng)(float)屬性的生效。
• 相對(duì)定位元素（relatively positioned element）是計(jì)算后位置屬性為 relative的元素，會(huì)占用原來(lái)位置并留下空白。同時(shí)設(shè)置的float浮動(dòng)生效，且浮動(dòng)優(yōu)先級(jí)更高。
• 絕對(duì)定位元素（absolutely positioned element）是計(jì)算后位置屬性為 absolute 的元素。絕對(duì)定位必須是作用于父級(jí)或往上的層級(jí)非static模式的布局里面才生效。同時(shí)設(shè)置的float浮動(dòng)失效。
• 固定定位元素 fixed 的元素相對(duì)于視口html定位，且不隨視口滾動(dòng)而滑動(dòng)，不占原來(lái)的位置。同時(shí)設(shè)置的float浮動(dòng)失效。
• 粘性定位元素（stickily positioned element）是計(jì)算后位置屬性為 sticky 的元素。不能同時(shí)設(shè)置的float浮動(dòng)，否則定位不生效。
  注：所有的定位都是同一層級(jí)。建議大模塊用浮動(dòng)，微調(diào)用定位。

定位1.png

定位元素與float浮動(dòng)的關(guān)系

定位2.png

定位3.png

定位4.png

定位5.png

定位6.png

定位7.png

定位8.png

定位9.png

定位10.png

定位11.png

定位12.png

給一個(gè)span行內(nèi)元素設(shè)置寬高是不生效的，有特殊情況可以如下操作可以使行內(nèi)元素塊狀化：

• 通過(guò)設(shè)置absolute絕對(duì)定位和fixed固定定位后設(shè)置span寬高可以生效，其它定位方式不生效
• 設(shè)置display: inline-block;行內(nèi)塊元素設(shè)置span寬高可以生效

image.png

image.png

• 絕對(duì)定位和固定定位margin的居中方式，在設(shè)置了寬高后，可以居中。不設(shè)置寬高，則充滿父容器。

• transform: translateX(-50%);平移的居中方式，不用設(shè)置寬高。

  
  
  image.png

11、元素變換transform

移動(dòng)盒子模型位置的方法 :

• transform: translate 中可以傳入百分比值 , 百分比是相對(duì)于元素自身尺寸來(lái)說(shuō)的 ;
• 通過(guò)定位樣式移動(dòng)盒子 : 相對(duì)定位 relative 樣式 , 絕對(duì)定位 absolute 樣式 ;
• 通過(guò)設(shè)置盒子外邊距 : 外邊距 margin樣式 ;
• 2D 轉(zhuǎn)換中的 Translate 移動(dòng) ; transform: translate() 樣式 ;
• Translate 移動(dòng) 相對(duì)于其它方式 移動(dòng)盒子模型 的優(yōu)點(diǎn) : 使用 Translate 移動(dòng)標(biāo)簽元素 , 不會(huì)影響其它元素的位置 , 不會(huì)脫標(biāo) ;
• Translate 只能移動(dòng)塊級(jí)元素 , 對(duì)于 行內(nèi)元素 / 行內(nèi)塊元素 是無(wú)效的 ;

image.png

image.png

12、彈性盒子模型flex

• 彈性盒子又叫伸縮盒模型，或者叫開(kāi)啟flex模式。子元素默認(rèn)沿著主軸方向排列。

• 定位元素與彈性盒子都會(huì)變成“行內(nèi)塊”化，彈性盒子作用于子元素，定位元素作用于自身。

  
  
  image.png

image.png

image.png

image.png

image.png

浮動(dòng)與彈性盒子選擇上的區(qū)別：
浮動(dòng)(float)：可以讓元素同行顯示，元素排列不下時(shí)會(huì)自動(dòng)讓元素?fù)Q行顯示。
彈性容器(display: flex)：可以讓元素同行顯示，元素排列不下時(shí)不會(huì)自動(dòng)換行，而是將元素進(jìn)行壓縮排列顯示，除非設(shè)置flex-warp屬性才會(huì)換行顯示。

flex(彈性盒子)
采用flex布局的元素，稱為flex容器；這個(gè)容器的子元素稱為flex項(xiàng)目。
格式：display: flex; 寫(xiě)在父級(jí)元素(容器)里
容器屬性
1. flex-direction： 主軸方向
2. flex-wrap： 主軸一行滿了換行
3. flex-flow： 1和2的組合
4. justify-content： 主軸元素對(duì)齊方式
5. align-items： 交叉軸元素對(duì)齊方式//單行
6. align-content： 交叉軸行對(duì)齊方式//多行

image.png

image.png

側(cè)軸：
align-items:stretch;屬性是單行子元素默認(rèn)值，在不設(shè)置固定高度的時(shí)候，側(cè)軸方向高度自動(dòng)充滿父容器。子元素設(shè)置固定高度時(shí)，與flex-start效果一樣。
align-content:stretch;屬性是多行子元素默認(rèn)值，在不設(shè)置固定高度的時(shí)候，側(cè)軸方向高度自動(dòng)平分父容器。子元素設(shè)置固定高度時(shí)，與flex-start效果一樣。

image.png

image.png

image.png

image.png

image.png

13、border邊框使用

• box-sizing設(shè)置
  content-box：
  padding不被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border、padding之和，即 ( Element width = width + border + padding)
  此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。

• border-box設(shè)置
  padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即 ( Element width = width )
  

  image.png

14、拉伸和壓縮

image.png

image.png

image.png

15、響應(yīng)式布局

• 可以設(shè)置在不同的媒體特征下時(shí)，顯示不同的樣式。如屏幕寬度達(dá)到小于（max-width）一個(gè)臨界值的時(shí)候，顯示手機(jī)移動(dòng)版網(wǎng)頁(yè)等；大于（min-width）一個(gè)臨界值則顯示pc端網(wǎng)頁(yè)樣式。

  
  
  媒體查詢特征.png

媒體類型.png

媒體運(yùn)算符.png

image.png

16、BFC功能---全稱：塊級(jí)格式化上下文

開(kāi)啟BFC.png

開(kāi)啟BFC.png

17、布局技巧

可以通過(guò)margin，text-align:center，vertical-align:middle，定位布局，flex彈性盒子，transform平移等方式實(shí)現(xiàn)居中效果。

1.居中父容器

》方式1：絕對(duì)定位和固定定位margin的居中方式，在設(shè)置了寬高后，可以居中。不設(shè)置寬高，則充滿父容器。
子元素{
  left:0;
  right :0;
  top :0;
  bottom:0;
  margin :auto；
}

》方式2：transform屬性平移
父元素{  
  position: relative; 
 }
子元素 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

》方式3：使用flex彈性布局，簡(jiǎn)單
父元素{  
  display: flex;
  flex-direction: column;//主軸方向：默認(rèn)column垂直方向，row水平方向
  justify-content: center;//主軸方向居中
  align-items: center;//側(cè)軸方向居中
}

2.其他水平居中方式

》方式1：若子元素為塊元素，給子元素加上:margin:0 auto 注意子元素只能是塊級(jí)元素才能生效。

》方式2：text-align:center方式，若子元素為行內(nèi)元素、行內(nèi)塊元素，給父元素加上:text-align:center 因?yàn)樾袃?nèi)塊和行內(nèi)元素可以當(dāng)做文本元素設(shè)置。

》方式3：transform: translateX(-50%);平移的居中方式，不用設(shè)置寬高。
父元素{  
  position: relative; 
}
子元素 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

3.其他垂直居中方式

》方式1：若子元素為塊元素，給子元素加上: margin-top ，值為:(父元素 content - 子元素盒子總高)/2
》方式2：vertical-align:middle方式，若子元素為行內(nèi)元素、行內(nèi)塊元素
讓父元素的 height = line-height高度，每個(gè)子元素都加上:vertical-align:middle;
補(bǔ)充:若想絕對(duì)垂直居中，父元素 font-size 設(shè)置為0。

image.png

18、偽類

偽類操控現(xiàn)有盒子元素。偽元素操作內(nèi)容子元素，對(duì)子元素增加、刪除，設(shè)置樣式等。

動(dòng)態(tài)偽類.png

結(jié)構(gòu)偽類.png

:nth-of-type()
nth-of-type他是當(dāng)前元素的同類型兄弟元素的第n個(gè)，而nth-child是當(dāng)前元素的兄弟節(jié)點(diǎn)的第n個(gè)當(dāng)前元素

<html>
<head>
    <meta charset="utf-8">
    <title>偽類</title>
    <style>
        //nth-of-type同類型的兄弟元素
        .province:nth-of-type(4) {
            color: red
        }
        //當(dāng)前元素的所有的兄弟節(jié)點(diǎn)的第n個(gè)元素
        .province:nth-child(4) {
            color: green
        }
    </style>
</head>
<body>
    <div class="province">
        111
    </div>
    <li>
        222
    </li>
    <div class="province">
        333
    </div>
    <div class="province">
        444，:nth-child(4)
    </div>
    <div class="province">
        555，:nth-of-type(4)
    </div>
    <div class="province">
        666
    </div>
    <input type="button" value="加載新文檔" onclick="newDoc()">
</body>
</html>

image.png

偽類.png

視頻：尚硅谷前端入門html+css零基礎(chǔ)教程，零基礎(chǔ)前端開(kāi)發(fā)html5+css3視頻

【狂神說(shuō)Java】CSS3最新教程快速入門通俗易懂