这是从牛客网上总结下来的css面试基础题的一小部分,后续也会持续更新
markdown源文件下载
提取码:8min
1、css盒模型
盒模型有两种,一种是w3c提出的标准盒模型,一种是ie盒模型。
box-sizing:content-box为w3c提出的标准盒模型型,其宽度为border+padding+width,因此设置了内边距和边框会使得盒模型的宽度增加。
box-sizing:border-box为ie的盒模型,其宽度就为width,当设置了padding或者border时,会使得内容部分减小。
另外,如果为padding-box,则width为padding+width
2、link和@import区别
link是html标签不存在兼容性,页面被加载时,link也会被加载,而@import 引用的css会等到页面加载结束后在加载,且有兼容性,只有ie5以上才能被识别出来。link权重大于import
3、transition和animation区别
transition是渐变需要有事件被触发,animation为动画,任何时候都可以执行,且transition为两帧,即from{}to{} animation则可以根据需求写出所需要的关键帧。
4、flex布局
弹性布局,为盒模型提供最大的灵活。传统布局需要定位或者浮动非常不方便。
flex布局的属性:
flex布局具有两条轴,主轴和交叉轴,两者是垂直的
flex-direction: row | row-reverse | column | column-reverse 这个定义了主轴的方向,水平或者是垂直
换行规则:
flex-wrap: nowrap | wrap | wrap-reverse; wrap就是元素过多允许换行,nowrap则不允许
flex-grow:基于flex-basis,flex-basis就是每个元素所占的宽度,默认为auto,flex-grow则是在flex-basis的基础上对元素进行延展,比如盒模型内的每个元素都设置为flex-grow为1,那么每个元素都会占1/3,
flex-shrink:则是处理flex元素的缩放的,如果盒模型不足以放下所有元素,就可以用该属性进行缩放。
flex:是flex-grow,flex-shrink,和flex-basis的整合,默认为0,1,auto
justify-content:对齐方式,水平主轴对齐方式
align-items:对齐方式,竖直轴线方向
用flex实现水平垂直居中
.contain{
width:300px;
height:300px;
border:1px red solid;
display:flex;
justify-content:center;
align-items:center;
}
<div class="contain">
<img src="......">
</div>
5、BFC
格式化上下文,具有他自己的一套渲染规则,可以看作是一个被隔离的容器,里面的元素无论如何变化都不会影响到外面。
触发BFC特性的条件:
-
body标签
-
浮动元素:float除none以外的值
-
绝对定位元素:absolute或者是fixed
-
display为inline-block,table-cell,flex,table-caption,inline-flex
-
overflow除了visible以外的值(hidden、auto、scroll)
BFC特性:
-
外边距折叠。
-
清除浮动,浮动会影起父元素高度塌缩,解决方法就是触发父元素的BFC特性。
-
防止非浮动元素被浮动元素所覆盖
6、习题:垂直居中的方法
方法一:父元素相对定位,子元素绝对定位并且上下左右都为0,margin:auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#a{
position: relative;
width: 300px;
height: 300px;
border: 1px black solid;
}
#b{
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
border: 1px red solid;
position: absolute;
margin: auto;
}
</style>
<body>
<div id="a">
<div id="b">
</div>
</div>
</body>
</html>
方法二:
负值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#a{
position: relative;
width: 300px;
height: 300px;
border: 1px black solid;
}
#b{
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
border: 1px red solid;
position: absolute;
}
</style>
<body>
<div id="a">
<div id="b">
</div>
</div>
</body>
</html>
方法三:
flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#a{
width: 300px;
height: 300px;
border: 1px black solid;
display: flex;
justify-content: center;
align-items: center;
}
#b{
width: 100px;
height: 100px;
border: 1px red solid;
}
</style>
<body>
<div id="a"><div id="b"></div></div>
</body>
</html>
方法四:
视窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.aa{
width: 100px;
height: 100px;
background-color: aqua;
margin: 50vh auto 0;
transform: translateY(-50%);
}
</style>
<body>
<div id="a" class="aa">
</div>
</body>
</html>
7、块元素和行元素
块元素独占一行能设置宽高和边距,会自动填充整个父元素
内元素:不会独占一行,且宽高都无效,垂直方向的padding和margin都会失效。
8、双边距折叠
多个普通文档流里的块元素的垂直方向的margin会折叠。
都是整数时,取最大的
都是负数时,取绝对值最大的
一正一负则取和。
.a{
width:100px;
height:100px;
border:1px red solid;
margin-bottom:10px
}
.b{
width:100px;
height:100px;
border:1px red solid;
margin-top:30px
}
上述示例最终结果是两个块级元素会相差30px
9、定位
fixed:相对于浏览器窗口定位,与文档流无关。
absolute:绝对定位,相对于最近的非static定位的父元素定位,脱离文档流。
relative:相对定位,将出现在所在的位置上,可以通过改变上下左右他的位置,他是不脱离文档流的,仍旧占据原来的空间。
sticky:粘性定位,top为阈值,视窗小于top之前都是相对定位,之后将会固定为top
粘性定位demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#a{
width: 100px;
height: 100px;
border: 1px red solid;
overflow: auto;
}
#b{
width: 10px;
height: 300px;
border: 1px black solid;
}
#c{
position: sticky;
width: 5px;
height: 5px;
top: 30px;
background-color: #000000;
margin-top: 100px;
}
</style>
<body>
<div id="a" class="aa">
<div id="b">
<div id="c">
</div>
</div>
</div>
</body>
</html>
10、清除浮动
为什么要清楚浮动?
解决高度塌缩。
解决方法:
- 在浮动元素后面给一个空元素并设置clear:both
- 触发父元素的BFC特性,比如overflow设置为auto或者是hidden
- 使用伪类,给父元素添加一个after并设置content为空,clear:both,display:block
11、画一条0.5px的线
使用scale()进行缩放