浅聊一下
春招正在如火如荼地进行中,我来汇总一下这些天战斗积累的经验,本系列主要是总结一下在面试中遇到的css方面的题目
假如您也和我一样,在准备春招。欢迎加我微信shunwuyu,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!
什么是响应式
在被问到这个问题的时候会有点沾沾自喜,心里想,响应式那不是手到擒来,ref,reactive都刚总结过了
,NO!大错特错,在这里面试官问的是CSS中的响应式…
- 什么是响应式
跟随用户设备尺寸的变化,页面实现自动的适配。
- 如何实现响应式
-
使用flex
首先我先创建6个li,并且给他们不同的颜色、相同宽高,给上ul样式display:flex
当我们给页面缩小以后,li的宽度都随着总宽度的减小而减小,flex适用于某个容器内的响应式
- 百分比
在定义li的宽度时,选择使用百分比为单位,也可以实现响应式
li{
list-style: none;
width: 20%;
height: 100px;
}
当我们把页面缩小,响应式效果出现 (适用于外层大容器)
- rem + 媒体查询
要使用rem单位来实现响应式,就得搭配上媒体查询
li{
list-style: none;
width: 10rem;
height: 100px;
}
@media screen and (min-width:1000px){
html{
font-size: 30px;
}
}
@media screen and (min-width:800px) and (max-width:1000px){
html{
font-size: 20px;
}
}
rem的大小是根据根字体的大小来改变的,所以使用媒体查询来改变width
当宽度超过1000px时:
当宽度大于800px小于1000时
当宽度小于800px时,此时没有设置根字体的大小,所以默认1rem=16px (可用于任何地方)
- 媒体查询
刚才使用的是rem+媒体查询,其实我们单用媒体查询也是可以的 (可用于任何地方)—代码量大
@media screen and (min-width:1000px) {
li{
width: 300px;
}
}
@media screen and (min-width:800px) and (max-width:1000px) {
li{
width: 200px;
}
}
@media screen and (max-width:500px) {
li{
width: 100px;
}
}
直接通过改变li的宽度来响应式宽度变化,效果和上一种差不多我就不过多展示了…
但是直接通过媒体查询的方式来写会让你头疼的,因为一个li要适应性变化代码就够你写的了…
- vw/vh
vw/vh单位呢是基于视口宽高的,我们也可以用他来实现响应式 (适用于外层大容器) 直接设置宽度为50vw
li{
list-style: none;
width: 50vw;
height: 100px;
}
缩小页面宽度
响应式说到这里就算是完成了…
谈谈你对BFC容器的理解
- 何为BFC容器
块级格式化上下文,是页面中一个渲染区域,有一套属于自己的渲染规则。讲到这里,就可以展开讲讲BFC容器的一些规则
- 渲染规则
- BFC容器在计算高度时,浮动元素的高度也会计算在内
设置两个div,给第一个加上浮动
.box1{
width: 200px;
height: 100px;
float: left;
background-color: aquamarine;
}
.box2{
width: 100px;
height: 200px;
background-color: blue;
}
效果如下
当我们给他设置为BFC容器以后
- BFC容器内的子元素的margin-top不会和BFC这个父容器发生重叠
让我们先来看普通容器,给父容器设置了margin-top为30px,子容器margin-top为10px
我们看到子容器的margin和父容器的margin重叠了,我们再来看看BFC容器,这就不会重叠了…
- 从上往下,从左往右的布局排列
这点就不解释了…
- 如何设置BFC容器
聊完BFC容器的渲染规则,就得聊一下如何设置一个BFC容器,给父容器设置以下属性,就可以让其成为BFC容器
1. overflow: 不为visible;
2. float
3. display: inline-block || inline-XXX || flex || table-XXX || grid,
4. position: absolute || fixed
4. BFC容器的应用
在上面我们可以看到,BFC容器连浮动元素的高度也会计算在内,所以BFC容器的主要应用就是清除浮动
说说css中的单位有哪些?
- px
px是像素单位,我们的屏幕上埋藏了很多的物理发光点,每一个物理发光点就是一个像素
- rem
rem是相对单位,相对根字体的大小,浏览器默认根字体大小为16px
- em
em 是相对单位,用在字体上会继承父容器的字体大小,用在他处,相对于当前容器自己的字体大小来定
- vw/vh
vw/vh是相对单位,相对于视口宽度/高度
- %
%:相对单位,相对于父容器的宽度/高度
结尾
更多精彩,请看下集…
原文链接:https://juejin.cn/post/7338042858703388726 作者:滚去睡觉