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