前端面试题之CSS
程序员文章站
2022-06-09 18:02:57
...
CSS盒模型
- 标准盒模型
margin>border>padding>content
设置的width=content-box的width
标准盒模型宽度=width+2*padding+2*border
标准盒模型高度=height+2*padding+2*border
默认box-sizing为content-box 就是按照上面的进行计算的
- IE盒模型
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
盒子宽度=content-box-width
盒子高度=content-box-height
在box-sizing中设置border-box即可实现
link和import的区别
link属于html标签页面加载的时候link会被同时加载
而import是在页面加载结束之后才加载
所以link的权重高于import
圣杯布局(两侧宽度固定，中间宽度自适应的三栏布局)
在CSS中，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性。
<html>
<body>
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
<style>
.container{
overflow:hidden;
padding:0 200px;
}
.middle{
float:left;
width:100%;
background:red;
height:200px;
}
.left{
float:left;
position:relative;
width:200px;
left:-200px;
background:purple;
margin-left:-100%;//让左边部分上去
height:200px;
}
.right{
float:left;
position:relative;
width:200px;
right:-200px;
background:yellow;
height:200px;
margin-left:-200px;//让右边部分上去
}
</style>
</html>
双飞翼布局
跟圣杯布局差不多,只不过用margin代替padding,只有content在container里面
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#container {
overflow: hidden;
}
.column {
text-align: center;
height: 300px;
line-height: 300px;
}
#left, #right, #center {
float: left;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
.content {
margin: 0 150px 0 200px;
}
</style>
<body>
<div id="container">
<div id="center" class="column">
<div class="content">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
</body>
</html>
元素垂直居中
- 1
.center{
positon:absolute;
left:50%;
right:50%;
margin:-200px 0 -200px;
}
.center{
position:absolute;
left:50%;
transform:translate(-50%,-50%);
}
.center{
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
width:200px;
height:200px;
}
.father
{
display:flex;
.center{
justify-content:center;
align-items:center;
}
}
块元素和行元素
- 块元素
独占一行,自动填满父元素,可设置margin和padding
- 行元素
width和height和垂直方向的padding和margin都失效,不会沾满一行
visibility、opacity、display
visibility:hidden 隐藏元素,不改变页面布局,但是不触发绑定事件
opacity:0 隐藏元素,不改变布局,会触发事件
display:none 删除元素
position属性
- fixed 相对于浏览器窗口
- relative 相对于元素原来的位置
- absolute 相对于元素的最近的已定位的父元素,若父元素没有定位则相对于HTML
浮动的清除
- 在浮动元素后加个空元素 clear:both 如.float::after{clear: both;}
- 给浮动元素容器加 overflow:hidden;
样式优先级
行内>id>class>元素
级别分别为 X000,0X00,00X0,000X
伪类和伪元素
伪类是操作文档中已有的元素，而伪元素是创建了一个文档外的元素，两者最关键的区别就是这点。. 此外，为了书写CSS时进行区分，一般伪类是单冒号，如 :hover ，而伪元素是双冒号 ::before
CSS继承
- 可继承
//一般来说不影响布局的都可继承
font-size//font系列的都可以
text-align
color
cursor
visibility
- 不可继承
//影响布局的一般都不可
display
float
position
border
background
text-shadow
width
height
CSS斑马纹
body{
background: linear-gradient(#fb3 50%, #58a 50%);
}
line-height和height的区别
line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height一般是指容器的整体高度，
设置一个元素的背景颜色，背景颜色会填充哪些区域？
content、padding、border
重绘和重排
DOM变化影响列如宽高,浏览器需要重新构造节点叫重排,受影响节点重新绘制的而过程叫重绘
文档流及脱离文档流方法
- 文档流
窗体自上而下分成一行一行的,每行从左到右排列
- 脱离文档流
float、position:absolute或者fixed
position absolute相对于父元素哪个位置
border内侧