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