2022年高频前端面试题汇总之CSS篇（二）
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培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。
