1、css布局,左側寬度最小150px,最大25 %,右側自適應。怎么實現?
- 方法一: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)模式,擁有國內一體化教學管理及學員服務,助力更多學員實現高薪夢想。