1、css布局，左側(cè)寬度最小150px，最大25 %，右側(cè)自適應(yīng)。怎么實(shí)現(xiàn)？
- 方法一：1.float+BFC【BFC區(qū)域不會(huì)和設(shè)置浮動(dòng)的區(qū)域重合】
```html
<!--左側(cè)設(shè)置最小寬度150px，最大寬度25%，并設(shè)置浮動(dòng)；右側(cè)不設(shè)置寬度，加overdlow：hidden觸發(fā)BFC-->
<style>
.left{
min-width: 150px;
max-width: 25%;
height: 300px;
background-color: red;
float: left;
}
.right{
height: 300px;
background-color: yellow;
overflow: hidden;
}
</style>
<body>
<div class="left">
內(nèi)容
</div>
<div class="right"></div>
</body>
```
- 方法二：彈性盒子
```html
<!--給父元素設(shè)置彈性盒子，然后給左側(cè)設(shè)置最小寬度150px，最大寬度25%;右側(cè)不設(shè)置寬度，加屬性flex:1,讓右側(cè)自適應(yīng)剩下的寬度-->
<style>
*{
padding: 0;
margin: 0;
}
body{
display: flex;
}
.left{
min-width: 150px;
max-width: 25%;
height: 300px;
background: green;
}
.right{
flex: 1;
height: 300px;
background: red;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
```
2、CSS的基本語(yǔ)句構(gòu)成是什么？
- CSS被稱之為：層疊樣式表(Cascading Style Sheets)是對(duì)頁(yè)面結(jié)構(gòu)的一種修飾；
- CSS的基本語(yǔ)法是：選擇器{屬性:屬性值;屬性:屬性值;屬性:屬性值}
- CSS基本語(yǔ)法構(gòu)成兩個(gè)部分組成：選擇器和{}樣式規(guī)則(樣式聲明)組成；樣式規(guī)則(樣式聲明)由兩個(gè)部分組成的分別是屬性和屬性值；
- 使用CSS語(yǔ)法注意事項(xiàng)是：
- 屬性和屬性值使用(：)鏈接
- 屬性和屬性值結(jié)束之后需要使用(;)結(jié)束
- 如果屬性和屬性值是最后一組的話可以不用分號(hào)結(jié)束;但是建議添加上為了防止后面繼續(xù)添加屬性
3、css復(fù)用
- CSS復(fù)用代表的是CSS的重復(fù)使用，主要是為了做到網(wǎng)站開(kāi)發(fā)的優(yōu)化，可以簡(jiǎn)化多重CSS
- CSS復(fù)習(xí)：目的是為了創(chuàng)建一套可以不依賴內(nèi)容的可重復(fù)使用的類名及公共的樣式, 沿著復(fù)用這條思路走下去,久而久之基本可以構(gòu)建一套全新的UI組件庫(kù)而無(wú)需編寫(xiě)過(guò)多新的CSS。
- 例如：我們?cè)趩挝恢袑?shí)際開(kāi)發(fā)的時(shí)候經(jīng)常使用的公共樣式表，重置樣式表是一樣的道理。
更多關(guān)于前端培訓(xùn)的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。
京公網(wǎng)安備 11010802030320號(hào)