1、塊元素躺盛，行內(nèi)塊元素项戴，行內(nèi)元素定義
2、盒子模型
3槽惫、文本操作
文本垂直操作：vertical-align的使用圖示周叮。middle設(shè)置居中辩撑。
vertical-align 只對(duì)行內(nèi)元素、行內(nèi)塊元素和表格單元格（table-cell）元素生效：不能用它垂直對(duì)齊塊級(jí)元素仿耽。
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.父容器開啟flex布局，子容器margin:auto;也可以設(shè)置設(shè)置子容器居中谨设。
5熟掂、塌陷問(wèn)題
-
父子元素間margin上下方向異常俗稱“塌陷”
1.float引起的父容器“塌陷”問(wèn)題，而自己本身不會(huì)塌陷扎拣。自己當(dāng)前元素脫離文檔流后赴肚，不再能撐起父元素的高度，導(dǎo)致父元素高度塌陷鹏秋，但父元素的寬度依然束縛浮動(dòng)的子元素尊蚁。解決方法見文章下方浮動(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)題
7蓖捶、樣式繼承
8地回、元素空白問(wèn)題，x基線對(duì)齊導(dǎo)致處理
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
清楚浮動(dòng)影響，通過(guò)對(duì)父容器末尾添加一個(gè)偽元素蠢壹，設(shè)置內(nèi)容空字符
parent::after{
content :"";
display: block;
clear :both;
}
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)用定位。
定位元素與float浮動(dòng)的關(guān)系
給一個(gè)span行內(nèi)元素設(shè)置寬高是不生效的棵帽，有特殊情況可以如下操作可以使行內(nèi)元素塊狀化：
- 通過(guò)設(shè)置absolute絕對(duì)定位和fixed固定定位后設(shè)置span寬高可以生效熄求，其它定位方式不生效
- 設(shè)置display: inline-block;行內(nèi)塊元素設(shè)置span寬高可以生效
- 絕對(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ú)效的 ;
12藻雪、彈性盒子模型flex
- 彈性盒子又叫伸縮盒模型秘噪，或者叫開啟flex模式。子元素默認(rèn)沿著主軸方向排列勉耀。
-
定位元素與彈性盒子都會(huì)變成“行內(nèi)塊”化指煎，彈性盒子作用于子元素，定位元素作用于自身便斥。
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; 寫在父級(jí)元素(容器)里
容器屬性
1. flex-direction： 主軸方向
2. flex-wrap： 主軸一行滿了換行
3. flex-flow： 1和2的組合
4. justify-content： 主軸元素對(duì)齊方式
5. align-items： 交叉軸元素對(duì)齊方式//單行
6. align-content： 交叉軸行對(duì)齊方式//多行
側(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效果一樣膜毁。
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胧沫、拉伸和壓縮
15昌简、響應(yīng)式布局
-
可以設(shè)置在不同的媒體特征下時(shí)，顯示不同的樣式绒怨。如屏幕寬度達(dá)到小于（max-width）一個(gè)臨界值的時(shí)候颤难，顯示手機(jī)移動(dòng)版網(wǎng)頁(yè)等惶看；大于（min-width）一個(gè)臨界值則顯示pc端網(wǎng)頁(yè)樣式。
媒體查詢特征.png
16、BFC功能---全稱：塊級(jí)格式化上下文
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枢希。
18、偽類
偽類操控現(xiàn)有盒子元素朱沃。偽元素操作內(nèi)容子元素苞轿，對(duì)子元素增加茅诱、刪除，設(shè)置樣式等搬卒。
: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>
