柚子快報(bào)激活碼778899分享：前端 HTML詳解連載（7）
HTML詳解連載（7）
專欄鏈接 [link](http://t.csdn.cn/xF0H3)下面進(jìn)行專欄介紹
開始嘍結(jié)構(gòu)偽類選擇器作用
:nth-child（公式）作用舉例
偽元素選擇器作用注意：
PxCoook盒子模型-組成作用盒子模型-重要組成部分
盒子模型-邊框線屬性名屬性值
常用線條樣式設(shè)置單方向邊框線屬性名屬性值
盒子模型-內(nèi)邊距作用屬性名
盒子模型-尺寸計(jì)算默認(rèn)情況結(jié)論解決方法
盒子模型-外邊距作用屬性名示例
盒子模型-元素溢出作用屬性名屬性值
外邊距問題-合并現(xiàn)象場景現(xiàn)象
外邊距問題-塌陷問題場景現(xiàn)象解決方法
行內(nèi)元素-內(nèi)外邊距問題場景解決方法
盒子模型-圓角作用屬性名屬性值注意多值常見應(yīng)用-正圓形狀常見應(yīng)用-膠囊形狀
盒子模型-陰影作用屬性名屬性值注意：
標(biāo)準(zhǔn)流舉例
浮動作用屬性名：float屬性值特點(diǎn)
專欄鏈接 link
下面進(jìn)行專欄介紹
本專欄是自己學(xué)前端的征程，純手敲的代碼，自己跟著黑馬課程學(xué)習(xí)的，并加入一些自己的理解，對代碼和筆記 進(jìn)行適當(dāng)修改。希望能對大家能有所幫助，同時也是請大家對我進(jìn)行監(jiān)督，對我寫的代碼進(jìn)行建議，互相學(xué)習(xí)。
開始嘍
結(jié)構(gòu)偽類選擇器
作用
根據(jù)元素的結(jié)構(gòu)關(guān)系查找元素
關(guān)鍵字含義E:first-child查找第一個E元素E:last-child查找最后一個E元素E:nth-child（N）查找第N個元素(第一個元素N值為1)
:nth-child（公式）
作用
根據(jù)元素的結(jié)構(gòu)關(guān)系查找多個元素
舉例
偶數(shù) 2n 奇數(shù) 2n-1,2n+1 5的倍數(shù) 5n 5個以后 n+5 5個以前 -n+5
偽元素選擇器
作用
創(chuàng)建虛擬元素（偽元素），用來擺放裝飾性的內(nèi)容 E::before 在E元素里面最前面添加一個偽元素 E::after 在E元素里面最后面添加一個偽元素
注意：
必須設(shè)置content：“”屬性，用來設(shè)置偽元素的內(nèi)容，如果沒有內(nèi)容，則引號留空即可 不寫偽元素失效 偽元素默認(rèn)是行內(nèi)顯示模式 權(quán)重和標(biāo)簽選擇器相同
PxCoook
像素大廚是一款切圖設(shè)計(jì)工具軟件，支持PSD文件的文字、顏色、距離自動智能識別 開發(fā)面板（自動智能識別） 設(shè)計(jì)面板（手動測量尺寸和顏色）
盒子模型-組成
作用
布局網(wǎng)頁，擺放盒子和內(nèi)容
盒子模型-重要組成部分
內(nèi)容區(qū)域-width & height 內(nèi)邊距-padding（出現(xiàn)在內(nèi)容和盒子邊緣之間） 邊框線-border 外邊距-margin（出現(xiàn)在盒子外面）
盒子模型-邊框線
屬性名
boder(bd)
屬性值
邊框線粗細(xì) 線條樣式 顏色（不區(qū)分順序）
常用線條樣式
關(guān)鍵字含義solid實(shí)線dashed虛線dotted點(diǎn)線
設(shè)置單方向邊框線
屬性名
border-方位名詞（bd+方位名詞首字母）
屬性值
邊框線粗細(xì)，線條樣式 顏色（不區(qū)分順序）
盒子模型-內(nèi)邊距
作用
設(shè)置內(nèi)容與盒子邊緣之間的距離
屬性名
padding/padding-方位名詞
盒子模型-尺寸計(jì)算
默認(rèn)情況
盒子尺寸=內(nèi)容尺寸+border尺寸+內(nèi)邊距尺寸
結(jié)論
給盒子加border/padding會撐大盒子
解決方法
手動做減法，減掉border/padding的尺寸 內(nèi)減模式：box-sizing:border-box
盒子模型-外邊距
作用
拉開兩個盒子之間的距離
屬性名
margin 清除默認(rèn)樣式
示例
默認(rèn)的內(nèi)外邊距
盒子模型-元素溢出
作用
控制溢出元素的內(nèi)容的像是方式
屬性名
overflow
屬性值
關(guān)鍵字含義hidden退出隱藏scroll溢出滾動（無論是否溢出，都顯示滾動條位置）auto溢出滾動（溢出才顯示滾動條）
外邊距問題-合并現(xiàn)象
場景
垂直排列的兄弟元素，上下margin會合并
現(xiàn)象
取兩個margin中的較大值生效
外邊距問題-塌陷問題
場景
父子級的標(biāo)簽，子級的添加上外邊距會產(chǎn)生塌陷問題
現(xiàn)象
導(dǎo)致父級一起向下移動
解決方法
取消子集margin，父級設(shè)置padding 父級設(shè)置overflow：hidden 父級設(shè)置border-top
行內(nèi)元素-內(nèi)外邊距問題
場景
行內(nèi)元素添加margin和padding，無法改變元素垂直位置
解決方法
給行內(nèi)元素添加line-height可以改變垂直位置
盒子模型-圓角
作用
設(shè)置元素的外邊框?yàn)閳A角
屬性名
border-radius
屬性值
數(shù)字+px/百分比（取值最大為50%）
注意
屬性值是圓角半徑
多值
從坐上叫順時針賦值，沒有對應(yīng)的角與對角值相同
常見應(yīng)用-正圓形狀
給正方形盒子設(shè)置圓角屬性值為寬高的一半/50%
常見應(yīng)用-膠囊形狀
給長方形盒子圓角屬性值為盒子高度的一半
盒子模型-陰影
作用
給元素設(shè)置陰影效果
屬性名
box-shadow
屬性值
X軸偏移量 Y軸偏移量 模糊半徑 擴(kuò)展半徑 顏色 內(nèi)外陰影
注意：
X軸偏移量和Y軸偏移量必須書寫 默認(rèn)是外陰影，內(nèi)陰影需要添加inset
標(biāo)準(zhǔn)流
也叫文檔流，指的是標(biāo)簽在頁面中默認(rèn)的排布規(guī)則
舉例
塊元素獨(dú)占一行，行內(nèi)元素可以一行顯示多個
浮動
作用
讓塊元素水平排列
屬性名：float
屬性值
關(guān)鍵字含義left左對齊right右對齊
特點(diǎn)
頂對齊，具備行內(nèi)塊顯示模式特點(diǎn) 浮動的盒子會脫標(biāo)
柚子快報(bào)激活碼778899分享：前端 HTML詳解連載（7）
精彩內(nèi)容
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Emex通道出海
