CSS學(xué)習(xí)筆記

HTML與CSS布局

1、html布局標(biāo)簽：

推薦使用有具體語義的標(biāo)簽，而不是一味的使用div。

頭部標(biāo)簽：header，適用于一個(gè)區(qū)域頭部的內(nèi)容。

底部標(biāo)簽：footer，適用于一個(gè)區(qū)域底部的內(nèi)容。

主標(biāo)簽：main，控制頁面主要內(nèi)容區(qū)域。

導(dǎo)航標(biāo)簽：nav

內(nèi)容標(biāo)簽：article，適用于獨(dú)立的內(nèi)容區(qū)域。

局部標(biāo)簽：section，適用于內(nèi)容區(qū)域很多相似區(qū)域的組合，與ul，li類似。

掛件標(biāo)簽：aside，適用于掛件區(qū)域，側(cè)邊欄。

2、html文本標(biāo)簽

段落標(biāo)簽：p

換行標(biāo)簽：br

水平線標(biāo)簽：hr

無語義的文件標(biāo)簽：span

申明一段文本采用標(biāo)簽：small

時(shí)間標(biāo)簽：time

進(jìn)度條標(biāo)簽：progress

強(qiáng)調(diào)標(biāo)簽：strong

3、盒子模型

外邊距：margin（上右下左）一個(gè)控制四個(gè)邊，兩個(gè)：第一個(gè)控制上下，第二個(gè)控制左右

內(nèi)邊距：padding（同上）

邊線：border（樣式寬度顏色）

盒子居中，margin：0 auto

外邊距可以有負(fù)值

邊距合并：如果有一個(gè)向下的邊距，一個(gè)向上的邊距，實(shí)際的邊距是取這兩個(gè)邊距的我最大值。

控制div大?。翰皇軆?nèi)邊距的影響，box-sizing：border-box。

圓角：border-radius屬性

輪廓線：outline

溢出：overflow：scroll（滾動(dòng)條），overflow：auto（內(nèi)容裝不下顯示滾動(dòng)條，顯示的我下不顯示滾動(dòng)條）

文本溢出顯示點(diǎn)點(diǎn)：三個(gè)屬性控制，overflow：hidden，white-space：nowrap，text-overflow：ellipsis。

盒子大小控制：max-width，min-width，max-height，min-height

塊級(jí)元素?fù)螡M父級(jí)元素：height：fill-available

行級(jí)元素?fù)螡M父級(jí)元素：首先講行級(jí)元素變成塊級(jí)元素然后進(jìn)行操作。display：inline-block height：fill-available weight：fill-available

寬度隨內(nèi)容自適應(yīng)：width：fit-content

盒子根據(jù)內(nèi)容尺寸自適應(yīng)：父級(jí)元素，width：max-content，width：min-content

文本縮進(jìn)：text-indent

盒子陰影：box-shadow：

4、選擇器

選擇器是快速找到頁面中的元素，并對(duì)其進(jìn)行操作。

結(jié)構(gòu)選擇器：空格表示后代，包括子代孫代等，>表示子代。

后代選擇器：作用于某一類元素

main article section

子代選擇器：作用于特定的元素

main article>section

兄弟選擇器：作用于同一級(jí)別的元素

main article h1～h2

main article h1+h2（作用于臨近h1的h2）

屬性選擇器：

h1[title]? h1[title="name"]

偽類選擇器：結(jié)構(gòu)

div :first-child（div后代里面的第一個(gè)元素）

div>:first-child（div中的第一個(gè)元素）

div h1:first-of-type（div中類型為h1的第一個(gè)元素）

div :nth-child (1) （元素編號(hào)）

div h1:nth-of-type (1) （與上面一樣）

input:checked+label（表示input選中緊挨著的label元素）

input:valid（驗(yàn)證有效）

input:invalid（驗(yàn)證無效）

table tr:nth-child (odd) （奇數(shù)行）

table tr:nth-child (even) （偶數(shù)行）

5、背景與漸變

?? 背景顏色：background-color

?? 背景圖片：background-image

?? 背景裁切：background-clip

?? 背景重復(fù)：background-repeat

?? 背景固定：background-attachment

?? 背景定位：background-position

?? 背景尺寸：background-size

?? 線性漸變：background：linear-gradient(90deg,red,yellow,blue)

?? 鏡像漸變：background：radial-gradient(10px10px,red,green,blue)

? ?標(biāo)志位：background：linear-gradient(45deg,red50%,green 50%)

6、Float（浮動(dòng)）

行級(jí)元素float之后會(huì)變成塊級(jí)元素。

清除浮動(dòng)：clear：

父級(jí)div中含有兩個(gè)子級(jí)div，兩個(gè)子級(jí)div采用浮動(dòng)，如果不設(shè)定父級(jí)div的高度，父級(jí)則無法感知子級(jí)div的高度。如何不設(shè)定父級(jí)div的高度解決這個(gè)問題？

（1）兩個(gè)子級(jí)div后再設(shè)定一個(gè)塊級(jí)標(biāo)簽，將其清除浮動(dòng)，那么父級(jí)能夠感知其位置，則自然能夠適應(yīng)上面兩個(gè)子級(jí)div的高度。

（2）采用偽類元素方法，在父級(jí)元素之后追加一個(gè)內(nèi)容，將其清除浮動(dòng)，并設(shè)置為塊級(jí)元素。main::after{content:"",display:block,clear:both}

（3）觸發(fā)BFC機(jī)制：在父級(jí)元素中設(shè)置：overflow:hidden或者overflow:auto

7、定位

??? 相對(duì)定位：position：relactive，其空間位是保留的。相對(duì)于原來的位置進(jìn)行偏移操作。

絕對(duì)定位：position：absolute，其空間位是丟失的。默認(rèn)情況下是參照頁面進(jìn)行偏移，如果想要其沒有那么靈活，則需要對(duì)其父元素也設(shè)定定位屬性，那么子元素就會(huì)參照父元素的位置進(jìn)行偏移操作。

如果子元素沒有設(shè)定寬度和高度，父元素和子元素都設(shè)定了定位元素，那么可以改變子元素的尺寸。

如果子元素相對(duì)于父元素進(jìn)行定位，如果父元素有滾動(dòng)條的時(shí)候，那么子元素也會(huì)跟著滾動(dòng)條進(jìn)行滾動(dòng)。

定位元素遇到多個(gè)div層疊時(shí)候，需要z-index屬性來控制疊層的優(yōu)先級(jí)，一般定位元素的優(yōu)先級(jí)大于非定位元素，多個(gè)定位元素，后加載的定位元素優(yōu)先級(jí)大于先加載。

粘性定位：position：sticky top：0 將其定位到父元素的頂部。

固定定位：position：fixed，參照頁面進(jìn)行偏移，將元素固定在頁面的某個(gè)位置。

8、彈性盒子

? （1）基本元素：盒子和元素，彈性盒子模型解決的就是如何將元素放到盒子里面。

?? （2）普通盒子變成彈性盒子display：flex

? （3）彈性盒子布局的方向

?? 行排列：flex-direction：row/row-reverse

?? 列排列：flex-direction：column/column-reverse

? （4）彈性盒子的元素，默認(rèn)會(huì)隨著彈性盒子的大小進(jìn)行壓縮，如果不讓其壓縮，則可以換行排列，屬性：flex-wrap：wrap

? （5）元素控制方向和折行屬性：flex-flow：row wrap

? （6）主軸對(duì)齊方式：justify-content：flex-start/flex-end/center/space-between/space-around/space-evenly（主軸的開始/主軸的結(jié)尾/中間/兩端對(duì)齊/左右兩邊等邊距/完全平均分配）

? （7）交叉軸對(duì)齊方式：align-items：flex-start/flex-end/center/stretch（交叉軸開始/結(jié)尾/中間/拉稱）

? （8）換行交叉軸對(duì)齊方式：align-content：flex-start/flex-end/center/space-between/space-around（只適用于多行顯示的彈性容器，它的作用是當(dāng)flex容器在交叉軸上有多余的空間時(shí)，對(duì)元素的對(duì)齊處理。）

?（9）單個(gè)元素對(duì)齊方式（設(shè)置的是彈性盒子里面的元素）：align-self：flex-start/flex-end/center/stretch（拉撐時(shí)高度不能夠設(shè)置固定）

?（10）元素可用空間的分配：元素自動(dòng)占滿剩余的彈性盒子：flex-grow：1（如果存在多個(gè)元素則多個(gè)元素平均分配）每個(gè)元素1等份flex-grow：0默認(rèn)大小。

?（11）元素縮?。篺lex-shrink：0/1/2不縮小，每個(gè)元素都是指定的寬度或者高度。其計(jì)算方式每個(gè)元素的寬度和高度之和減去彈性盒子寬度或者高度剩余下來的除以flex-shrink之和，每個(gè)元素縮小的寬度和高度就可以知道。

?（12）彈性元素組合定義：flex-grow，flex-shrink，flex-basis（主軸基準(zhǔn)尺寸類似于寬度和高度，優(yōu)先級(jí)大于寬度和高度，小于最大寬度高度）flex：1 2 200px

?（13）元素的排列順序：order 默認(rèn)都是0順序越大越靠后。

9、柵格布局

（1）柵格布局就是使用水平線和垂直線劃好的一塊一塊的小格子。首先是容器，然后是柵格，最后是柵格里的元素。

（2）柵格屬性：display:grid。

（3）水平線屬性：grid-template-rows：repeat(5,20%)，垂直線屬性：grid-template-columns：repeat(5,20%)。一般推薦重復(fù)形式，也可以直接寫數(shù)值。

（4）繪制柵格的方法：

?? 1）數(shù)值法，grid-template-rows：50px 50px

?? 2）重復(fù)法，grid-template-rows：repeat(2,50%)

?? 3）自動(dòng)填充法：grid-template-rows：repeat(auto-fill,100px)

?? 4）比例法：grid-template-rows：repeat(3,1fr)

?? 5）限定法：控制柵格的水平方向或者垂直方向的范圍：grid-template-rows：repeat(2,minmax(50px,100px))

（5）柵格間距屬性：row-gap：5px， column-gap：5px，gap：5px 5px。

（6）控制元素在柵格中的位置：

?? 1）柵格線編號(hào)法：grid-row-start（行開始）grid-row-end（行結(jié)束）grid-column-start（列開始）grid-column-end（列結(jié)束）

簡(jiǎn)寫方式：grid-row： 1/2 grid-column：1/2

?? 2）柵格命名法：grid-template-row：repeat（3 [r-start] 1fr [r-end]），

grid-template-column：repeat（3 [c-start] 1fr [c-end]）

grid-row-start：r-start 1（列同上）

grid-row-end：r-end 1（列同上）

簡(jiǎn)寫方式：

? 3）偏移量法：偏移量法是首先確定元素行的開始位置和列的開始位置，然后進(jìn)行偏移確定所占的空間。

grid-row-start：2 grid-column-start：2

grid-row-end：span 3 grid-column-end：span 3

簡(jiǎn)寫方式：grid-row：1/span 1 grid-column：1/span 3

? 4）區(qū)域定位法：與邊線法類似，都是控制邊線，grid-area：2/2/3/3（行的開始/列的開始/行的結(jié)束/列的結(jié)束）（上左下右）

? 5）區(qū)域命名法：首先畫好柵格，然后對(duì)柵格每一塊區(qū)域進(jìn)行命名。grid-template-area："header

header" "nav main" "footer footer"（該法是對(duì)每一行的柵格進(jìn)行命名）然后根據(jù)grid-area指定元素所在的區(qū)域，grid-area：header，footer，nav，main，復(fù)雜的布局可以柵格里面在進(jìn)行柵格劃分。

? 6）區(qū)域占位，柵格劃好之后，如果想對(duì)指定區(qū)域不需要進(jìn)行合并，則不需要對(duì)區(qū)域進(jìn)行命名，可以采用.進(jìn)行占位。grid-template-area：“. .”“. .”“footer footer”

（7）柵格的流動(dòng)方向：柵格默認(rèn)的流動(dòng)方向是從左到右，從上到下。行排列。

grid-auto-flow：row

（8）柵格對(duì)齊的方式：如果柵格不占滿整行或者整列，則需要考慮其對(duì)齊方式，對(duì)齊方式與彈性盒子類似，水平對(duì)齊方式：justify-content：start/center/end/space-around/space-between/space-evenly，

垂直對(duì)齊方式：align-content：start/center/end/space-around/space-between/space-evenly簡(jiǎn)寫：place-content：center end（垂直方向 水平方向）

（9）柵格元素的對(duì)齊方式：元素水平對(duì)齊方式：justify-items：start/end/center/stretch（開始/結(jié)束/中間/拉撐）元素垂直對(duì)齊方式：

align-items：start/end/center/stretch（開始/結(jié)束/中間/拉撐）簡(jiǎn)寫：place-items：center end（垂直方向 水平方向）

（10）柵格元素獨(dú)立控制對(duì)齊方式：水平獨(dú)立控制：justify-self：

start/end/center（開始/結(jié)束/中間）垂直獨(dú)立控制：align-self：

start/end/center（開始/結(jié)束/中間）簡(jiǎn)寫：place-self：center end（垂直方向 水平方向）

10、變形與透視

（1）移動(dòng)

屬性：transform：translateX()

/translateY() /translate3d(x，y，z）向X軸或者Y軸或者3D進(jìn)行移動(dòng)。transition：移動(dòng)過程。簡(jiǎn)寫：transform：translate(x軸移動(dòng)量，y軸移動(dòng)量)

控制。

（2）縮放

屬性：transform：scaleX()/scaleY()簡(jiǎn)寫：scale(x,y) ?？s放Z軸是將父元素的Z軸的我距離進(jìn)行放大或者縮小，因此作用在父元素上。transform：scaleZ() 。簡(jiǎn)寫：transform:scale3d(x,y,z) 作用在父元素上。

（3）旋轉(zhuǎn)

屬性：transform：rotateX()

/rotateY()/rotate Z() 簡(jiǎn)寫：transform：rotate3d(1,0,0,90deg) 3d中表示的是xyz旋轉(zhuǎn)的向量，向量越大，旋轉(zhuǎn)的力度就越大，后面表示旋轉(zhuǎn)角度。

（4）傾斜

屬性：transform：skewX()

/skewY() 簡(jiǎn)寫：skew(45deg,45deg)

（5）參考基點(diǎn)

2D基點(diǎn)屬性：transform-origin：left top/50%50%

3D基點(diǎn)屬性：transform-origin：left top 100px，由于Z軸無窮大，因此只能用數(shù)值表示。

（6）透視

基本屬性：transform：perspective(100px)

3d樣式：transform-style:preserve-3d