專欄鏈接 link

下面進行專欄介紹

本專欄是自己學前端的征程，純手敲的代碼，自己跟著黑馬課程學習的，并加入一些自己的理解，對代碼和筆記
進行適當修改。希望能對大家能有所幫助，同時也是請大家對我進行監督，對我寫的代碼進行建議，互相學習。

開始嘍

結構偽類選擇器

作用

根據元素的結構關系查找元素

關鍵字	含義
E:first-child	查找第一個E元素
E:last-child	查找最后一個E元素
E:nth-child（N）	查找第N個元素(第一個元素N值為1)

:nth-child（公式）

作用

根據元素的結構關系查找多個元素

舉例

偶數 2n
奇數 2n-1,2n+1
5的倍數 5n
5個以后 n+5
5個以前 -n+5

偽元素選擇器

作用

創建虛擬元素（偽元素），用來擺放裝飾性的內容
E::before 在E元素里面最前面添加一個偽元素
E::after 在E元素里面最后面添加一個偽元素

注意：

必須設置content：“”屬性，用來設置偽元素的內容，如果沒有內容，則引號留空即可
不寫偽元素失效
偽元素默認是行內顯示模式
權重和標簽選擇器相同

PxCoook

像素大廚是一款切圖設計工具軟件，支持PSD文件的文字、顏色、距離自動智能識別
開發面板（自動智能識別）
設計面板（手動測量尺寸和顏色）
## 盒子模型-組成

作用

布局網頁，擺放盒子和內容

盒子模型-重要組成部分

內容區域-width & height
內邊距-padding（出現在內容和盒子邊緣之間）
邊框線-border
外邊距-margin（出現在盒子外面）

盒子模型-邊框線

屬性名

boder(bd)

屬性值

邊框線粗細 線條樣式 顏色（不區分順序）

常用線條樣式

關鍵字	含義
solid	實線
dashed	虛線
dotted	點線

設置單方向邊框線

屬性名

border-方位名詞（bd+方位名詞首字母）

屬性值

邊框線粗細，線條樣式 顏色（不區分順序）

盒子模型-內邊距

作用

設置內容與盒子邊緣之間的距離

屬性名

padding/padding-方位名詞

盒子模型-尺寸計算

默認情況

盒子尺寸=內容尺寸+border尺寸+內邊距尺寸

結論

給盒子加border/padding會撐大盒子

解決方法

手動做減法，減掉border/padding的尺寸
內減模式：box-sizing:border-box

盒子模型-外邊距

作用

拉開兩個盒子之間的距離

屬性名

margin
清除默認樣式

示例

默認的內外邊距

盒子模型-元素溢出

作用

控制溢出元素的內容的像是方式

屬性名

overflow

屬性值

關鍵字	含義
hidden	退出隱藏
scroll	溢出滾動（無論是否溢出，都顯示滾動條位置）
auto	溢出滾動（溢出才顯示滾動條）

## 外邊距問題-合并現象

場景

垂直排列的兄弟元素，上下margin會合并

現象

取兩個margin中的較大值生效

外邊距問題-塌陷問題

場景

父子級的標簽，子級的添加上外邊距會產生塌陷問題

現象

導致父級一起向下移動

解決方法

取消子集margin，父級設置padding
父級設置overflow：hidden
父級設置border-top

行內元素-內外邊距問題

場景

行內元素添加margin和padding，無法改變元素垂直位置

解決方法

給行內元素添加line-height可以改變垂直位置

盒子模型-圓角

作用

設置元素的外邊框為圓角

屬性名

border-radius

屬性值

數字+px/百分比（取值最大為50%）

注意

屬性值是圓角半徑

多值

從坐上叫順時針賦值，沒有對應的角與對角值相同

常見應用-正圓形狀

給正方形盒子設置圓角屬性值為寬高的一半/50%

常見應用-膠囊形狀

給長方形盒子圓角屬性值為盒子高度的一半

盒子模型-陰影

作用

給元素設置陰影效果

屬性名

box-shadow

屬性值

X軸偏移量 Y軸偏移量 模糊半徑 擴展半徑 顏色 內外陰影

注意：

X軸偏移量和Y軸偏移量必須書寫
默認是外陰影，內陰影需要添加inset

標準流

也叫文檔流，指的是標簽在頁面中默認的排布規則

舉例

塊元素獨占一行，行內元素可以一行顯示多個

浮動

作用

讓塊元素水平排列

屬性名：float

屬性值

關鍵字	含義
left	左對齊
right	右對齊

特點

頂對齊，具備行內塊顯示模式特點
浮動的盒子會脫標