整理了一些常见的css面试题,如有问题请大家指正.鄙人不才,献丑了!
盒模型
- 盒模型分为标准盒模型和IE盒模型,默认为标准盒模型,通过box-sizing进行调整,修改为IE盒模型为box-sizing: border-box; 修改回标准盒模型为box-sizing: content-box
- 两者区别: 举例说明,设置一个盒子宽度为100px, padding为10px,如果是标准盒模型,整个盒子宽度为120px,IE盒模型宽度为100px.
position 定位
- relative: 相对定位, 相对于自己原位置定位的
- absolute: 绝对定位, 相对距离其最近的position元素进行定位
- fixed: 相对于浏览器窗口定位
- static: 粘性定位, 是relative和fixed的结合. 在目标区域内是相对定位,超出目标区域是固定定位
水平垂直剧中
水平居中
- 行内元素: text-align: center
- 块级元素
- margin: 0 auto
- flex: display: flex; ### justify-content: cneter
- 设置left和right各为0, margin: auto
<style> .big{ width: 500px; height: 500px; border: 1px solid rebeccapurple; } .son{ width: 200px; height: 200px; background-color: red; left: 0; right: 0; margin: auto; } </style> <body> <div class="big"> <div class="son"></div> </div> </body>
- 在子元素已知宽度时: 子元素绝对定位,left设置为50%,利用margin负值,负值为子元素宽度的一半
.big{ position: relative; width: 500px; height: 500px; border: 1px solid rebeccapurple; } .son{ position: absolute; width: 200px; height: 200px; background-color: red; left: 50%; margin-left: -100px; } // HTML <div class="big"> <div class="son"></div> </div>
- 不知道子元素宽度时:
.big{ position: relative; width: 500px; height: 500px; border: 1px solid rebeccapurple; } .son{ position: absolute; background-color: red; left: 50%; transform: translate(-50%); } // HTML <div class="big"> <div class="son">33333</div> </div>
垂直居中
- 行内元素
- 设置line-height等于元素高度
- 设置padding值
- 块级元素
- flex: display: flex; align-items: center;
- 设置top和bottom各为0, margin: auto.
- 在子元素已知高度时: 子元素绝对定位,top设置为50%,利用margin负值,负值为子元素高度的一半
.big{ position: relative; width: 500px; height: 500px; border: 1px solid rebeccapurple; } .son{ position: absolute; width: 200px; height: 200px; background-color: red; top: 50%; margin-top: -100px; }
- 不知道子元素宽度时:
.big{ position: relative; width: 500px; height: 500px; border: 1px solid rebeccapurple; } .son{ position: absolute; background-color: red; top: 50%; transform: translate(0, -50%); } // HTML <div class="big"> <div class="son">33333</div> </div>
水平垂直居中
- 水平垂直居中是上面两个的结合.
BFC
- 块级格式化上下文, 规定了内部的块级元素无论如何布局也不会影响外部的元素,也不会被外部元素影响
- BFC可以解决,由于浮动导致的父元素塌陷问题以及,margin重叠问题
- 形成BFC的原因
- float不是none
- position不是relative和static
- overflow不是visible
- display是flex或inline-block
css选择器的权重
- !import > 内联 > id选择器 > 类选择器 > 标签选择器
回流&&重绘
- 页面渲染过程
- 构建DOM树
- 样式计算
- 布局定位
- 图层分层
- 图层绘制
- 合成显示
- 回流: 由于元素位置或大小变化,影响了其他元素,导致其他元素变化,需要从新布局定位
- 重绘: 修改了不会影响其他节点变化的属性,比如颜色,阴影等,需要重新合成显示
- 回流一定会导致重绘,重绘则不会导致回流
- 减少回流,使元素脱离文档流,减少对其他元素的影响
响应式
通过rem + 媒体查询
- rem: 相对长度单位, 相对于根元素定位的font-size
- 通过媒体查询,设置根元素的font-size
- 根据根元素的相对单位进行设置元素宽高
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media only screen and (max-width: 374px) {
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 110px;
}
}
body{
font-size: 0.16rem;
}
#app {
width: 1rem;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
div1
</div>
</body>
</html>
通过vw和vh
- vw: 网页视图宽度的百分之一
- vh: 网页视图高度的百分之一