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