【CSS學習筆記3】css特性

1css三大特性

1.1層疊性：就近原則，最新定義的樣式

1.2繼承性：子標簽集成父標簽的樣式，如文本和字號

行高的繼承：不加單位指的是當前文字大小的倍數

body {font: 12px/1.5  'Microsoft YaHei';color: #be1313;}
div {/* 子元素繼承父元素body的行高1.5 *//* 這個1.5是當前元素大小font-size的1.5倍 當前行高為21px*/font-size:14px;
}
p {/* 這個1.5是當前元素大小font-size的1.5倍 當前行高為24px */font-size: 16px;
}

優先級：選擇器相同-》層疊性，選擇器不同根據選擇器權重

權重分為四組權重疊加時不會有組間進位

依次遞增

div {

color:pink !important;

}

最后會顯示這個樣式

注意：

繼承的權重是0 對于繼承的標簽我們用元素選擇器修改樣式這個權重是1 最后會顯示元素選擇器的樣式

不管父元素的權重多高，子元素得到的權重都是0，除非單獨選定該元素設置樣式

這里p是繼承的但是繼承的權重是0 p的權重是1 1>0所以最后p的顏色是綠色

#father {color:#be1313}
p {color:aqua ;
}
<div id="father"><p>你本身就很好</p>
</div>

另外鏈接a在瀏覽器中默認是藍色下劃線央視，想要修改必須單獨指定

如：

color:green;

}

在父選擇器中設置無效

1.3權重疊加-復合選擇器

復合選擇器有權重疊加

ul {color:aliceblue}
ul li {/* 這里ul li兩個選擇的權重疊加了為0002 */color: aqua;
}
.nav li {/* 這里.nav li兩個選擇的權重疊加了為0011 */color: #be1313;
}

.nav li {/* 這里.nav li兩個選擇的權重疊加了為0011 */color: #be1313;} 
pink {/* 這里pink的權重為1 */color: #df5ccdf6;
}.nav .pink {/* 這里.nav .pink兩個選擇的權重疊加了為0020 */color: #df5ccdf6; 
}
<ul class="nav"><li class="pink">大豬頭</li><li>小豬頭</li><li>豬頭</li>
</ul>

組間不會有進位

0，0，0，10

四組為一個單位不會有進位

練習題

想要給第一個小li單獨添加顏色可以利用權重疊加給第一個li設置一個類這樣兩個類的權重疊加是0020超過了類和元素的疊加0011

2.盒子模型

網頁布局的三大核心：盒子模型、浮動和定位

網頁布局的三個過程：用box 裝好網頁元素，利用css設置好盒子樣式擺到相應位置（核心），在盒子里裝內容

2.1盒子模型 box

css盒子用來封裝周圍的html元素包括邊框、外邊距內邊距和實際內容

2.2border

1）

border-width:粗細 px單位

border-style: 記住三個實線、虛線、點線，solid、dashed、dotted

none : 無邊框。與任何指定的border-width值無關 hidden : 隱藏邊框。IE不支持 dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線 dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線 solid : 實線邊框 double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值 groove : 根據border-color的值畫3D凹槽 ridge : 根據border-color的值畫菱形邊框 inset : 根據border-color的值畫3D凹邊 outset : 根據border-color的值畫3D凸邊

border-color:

簡寫：border:1px solid red;//沒有順序要求

邊框四邊可以分別設置

border-top:1px solid red;

border-bottom:5px dashed red;

2）實例：200*200的盒子上邊框為紅色其余為藍色

div {width:200px;height:200px;border:5px solid blue;border-top:5px solid red;  /*層疊性、反過來不行*/}

3）css實現細邊框表格

使用css 來優化表格樣式

設置表格細邊框的關鍵

?border-collapse: collapse; 繪制表格邊框的方式控制相鄰單元格的邊框

4）邊框影響表格尺寸

邊框會為影響實際盒子的大小比如一個盒子外面加上10pc的邊框盒子的尺寸就會變大

如果想要最終的盒子不變大需要改變盒子原本的尺寸使得盒子+邊框滿足最終的要求

5）內邊距padding

內容與盒子的邊距

padding：10px；

都要記住

padding也會影響盒子的大小跟邊框一樣可以修改width和height來調整，

但如果不特殊指定width和height的大小就不會撐大盒子 width=100%也算指定

父親設置尺寸孩子沒有設置尺寸給孩子加padding 不會撐大盒子

使用padding來靈活設置導航欄

.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {/* a屬于行內元素 此時必須要轉換 行內塊元素 */display: inline-block;height: 41px;padding: 0 20px;//只要左右邊距font-size: 12px;color: #4c4c4c;text-decoration: none;//不要下劃線}.nav a:hover {//單獨設置鏈接的顏色background-color: #eee;color: #ff8500;}

6）外邊距margin

控制兩個盒子之間的距離

可以讓塊級盒子實現水平居中：盒子必須指定寬度盒子的左右邊距都設置成auto

.header{ width:960px; margin:0 auto;}

margin：0 auto；

上、右、下、左

如果想讓行內元素或者行內塊元素水平居中需要給其父元素添加text-align：center既可

對應嵌套關系（父子關系）的塊元素，父子同時有外邊距的情況下，父元素會他先較大的外邊距值而子元素不會有外邊距 只對標準流是這樣浮動的不會有影響

三種解決方法：

給父元素加上邊框border:1px sloid transparent、內邊距padding:1px、添加overflow：hidden

7）清除內外邊距

這是css設置格式的第一行

* {

padding:0;

margin:0;

}

注意：行內內元素為了照顧兼容性，盡量值設置作于內外邊距不要上下的但轉化為塊級和行內元素就可以

3.彈性盒子flexbox

父盒子控制子盒子如何排列

彈性盒子核心：
1.父控子 (親父子）
父盒子控制子盒子如何排列布局
父盒子稱為容器，子盒子稱為項目
2.主軸和交叉軸（側軸）
主軸默認水平方向，交叉軸默認垂直方向，可以更改

父容器屬性

容器（父盒子）設置display:flex;可以讓子盒子按照主軸方式排列。主軸默認水平
如果子元素有大小，則按照給定大小來顯示。
如果子元素沒有大小，則拉伸充滿父容器。
若子元素總寬度超過容器寬度，默認會壓縮子元素。


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性布局-容器flex</title><style>* {margin: 0;padding: 0;}.box {/* 添加彈性布局 */display: flex;width: 500px;height: 100px;border: 1px solid red;}.box .item {width: 100px;/* height: 100px; */background-color: pink;border-radius: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>

justify-content定義主軸上的對齊方式


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性布局-容器flex</title><style>* {margin: 0;padding: 0;}.box {/* 添加彈性布局 */display: flex;/* 主軸的對齊方式 *//* justify-content: flex-start; *//* justify-content: flex-end; *//* justify-content: center; *//* 兩端對齊 *//* justify-content: space-between; *//* justify-content: space-around; *//* 平均分配 */justify-content: space-evenly;width: 500px;height: 100px;border: 1px solid red;margin: 20px 0 0 10px;}.box .item {width: 100px;height: 100px;background-color: pink;border-radius: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>

開發中大部分情況下子元素大小是設定的

align-items定義交叉軸上的對齊方式垂直居中


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性布局-容器flex</title><style>* {margin: 0;padding: 0;}.box {/* 添加彈性布局 */display: flex;/* 交叉軸的對齊方式 *//* align-items: flex-start; *//* align-items: flex-end; */align-items: center;/* align-items: stretch; *//* 主軸的對齊方式 */justify-content: space-between;width: 500px;height: 300px;border: 1px solid red;margin: 20px 0 0 10px;}.box .item {width: 100px;height: 100px;background-color: pink;border-radius: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>

flex-direcition改變主軸的方向，這種情況下主軸是豎向的交叉軸是橫向的

flex-wrap 自動換行

之前的盒子是設置的浮動


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性布局-強制換行</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;/* 強制換行 */flex-wrap: wrap;/* 主軸對齊 */justify-content: space-between;width: 830px;border: 1px solid blue;margin: 30px auto;}.box .item {width: 200px;height: 300px;background-color: pink;border-radius: 10px;margin-bottom: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div><div class="item">12</div><div class="item">13</div></div>
</body></html>

algin-content多行交叉軸對齊


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性布局-多行交叉軸對齊</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;/* 強制換行 */flex-wrap: wrap;/* 主軸對齊 */justify-content: space-between;/* 多行交叉軸對齊 *//* align-content: start; *//* align-content: end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; */align-content: space-evenly;width: 830px;height: 500px;border: 1px solid red;margin: 30px auto;}.box .item {width: 200px;height: 150px;background-color: pink;border-radius: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div></div>
</body></html>

子盒子屬性

控制自身的尺寸、順序或對齊方式

實現彈性布局比如瀏覽器放大縮小可以伸縮盒子的大小

語法：flex：1；除了空隙之外的剩余空間占一份，并且可以伸縮盒子的大小數字表示剩余空間所占份數每個小盒子占父盒子的幾份父盒子的份數取決于子盒子flex的份數之和

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex項目伸縮尺寸</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;gap: 10px;/* justify-content: space-between; */width: 80%;border: 1px solid blue;margin: 0 auto;}.box .item {/* flex要寫到 小盒子身上  優先級比 width 和 height高 *//* flex 1 表示占1份  表示每個小盒子占父盒子的幾份 */flex: 1;width: 80px;height: 100px;background-color: pink;/* margin-right: 10px; */}.box .item:nth-child(odd) {background-color: purple;}/* .box .item:nth-child(3) {flex: 2;} */</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>

gap間距：用于設置行與列之間的間隙單行（盒子與盒子之間

語法：

gap:20px；行和列之間保持20像素間隙

gap:20 30px;行間距20 列間距30

注意：gap寫道父元素中控制子元素的間距


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘寶多行彈性布局寫法</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.w {/* 版心 */width: 80%;margin: 20px auto;}.box {display: flex;/* 自動換行 */flex-wrap: wrap;border: 1px solid red;/* 使得內部的盒子完全充滿版心沒有間隙 */margin-left: -8px;margin-right: -8px;}.box .item {/* width: 80px; *//* flex: 1;  每行 6個盒子100/6=16.666666*/flex: 0 0 16.666666%;height: 120px;/* background-color: pink; */margin-bottom: 16px;/* margin-right: 16px; *//* 每兩個盒子之間間隔16px，如果用marginright來做最右邊的盒子會掉下去 */padding: 0 8px;}.item .content {height: 100%;width: 100%;background-color: pink;}.footer {width: 80%;height: 120px;background-color: black;margin: 0 auto;}</style>
</head><body><div class="w"><!-- 在版心w中放盒子box 保證盒子在一定區域內并且可以縮放 --><div class="box"><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div></div></div><div class="footer"></div>
</body></html>


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘寶多行彈性布局寫法</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;flex-wrap: wrap;width: 80%;border: 1px solid red;margin: 0 auto;}.box .item {flex: 1;width: 80px;height: 120px;background-color: pink;/* min-width: 16.666666667%;max-width: 16.666666667%; *//* 每個元素包含間隙在內占1/6 */min-width: calc(16.6666667% - 16px);max-width: calc(16.6666667% - 16px);margin: 0 8px 16px;}.footer {width: 80%;height: 120px;background-color: black;margin: 0 auto;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div><div class="item">12</div><div class="item">13</div><div class="item">14</div><div class="item">15</div><div class="item">16</div></div><div class="footer"></div>
</body></html>

多行彈性布局之后會用網格布局gird實現