前言
Hello 大家好,这是一篇近期关于面试总结的文章,目前是在校大四学生,文章形式主要以问题和答案的方式展现,可能会有不全面的的地方,希望大家批评指正,一方面是记录自己的知识点,另一方面是分享出来给需要的小伙伴!!!
所有的知识点都会慢慢整理到 Github 快来给我Star呀😊~
因为近期一直在忙着找实习和毕业的事情,没有时间整理出来。希望大家看完能够重温一下基础。
1. 介绍一下标准的CSS的盒子模型 ?
分类:
IE
盒子模型、W3C
盒子模型盒模型构成:内容(content)、填充(padding)、边界(margin)、边框(border)
- 标准(
W3C
)盒模型:宽度 = width + padding + border + margin - 怪异(
IE
)盒模型:宽度 = width + margin - 如何设置css:box-sizing:border-box 触发怪异模式
2. CSS3优先级算法如何计算 ?不同选择器的权重
-
优先级排序:!important > id > class > tag
-
!important 比内联样式优先级高
-
以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
3. 如何创建块级格式化上下文、BFC有什么用
BFC,块级格式化上下文,是一个独立的渲染区域,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位互不影响
触发条件(任选其一)
float
值不为noneoverflow
的值不为visibledisplay
的值为 table-cell、inline-blockposition
的值不为 static 或 relative
开发中的应用
- 阻止
margin
重叠 - 清除浮动
- 自适应两栏布局
4. 清除浮动的几种方式
- 父级
div
定义height
- 结尾处加一个空
div
clear:both - 父级
div
定义overflow:hidden
- 父级
div
定义伪类:after
和zoom
5. 说一下定位
- absolute:绝对定位,相对于 static 以外的第一个父元素
- fixed:绝对定位,相对于浏览器窗口进行定位
- relative:相对定位,相对于其正常位置进行定位
6. 几种常见的CSS布局
- 垂直居中
// 第一种 绝对定位
#parent{
position:relative;
height:400px;
.son{
position:absolute;
width:100px;
height:100px;
top: 50%;
transform: translateY(-50%);
}
}
// 第二种 flex布局
#parent{
display:flex;
align-items:center;
height:400px;
.son{
width:100px;
height:100px;
}
}
// 第三种 margin
#parent{
position:relative;
height: 400px;
.son{
position:absolute;
width:100px;
height:100px;
top:0;
bottom:0;
margin:auto;
}
}
- 水平居中
// 多个块级元素
#parent{
height:100px;
text-align:center;
.son{
width:100px;
height:100px;
display:inline-block;
}
}
// 绝对定位
#parent{
position:relative;
height:100px;
.son{
position:absolute;
width:100px;
height:100px;
left:50%;
transform:translateX(-50%)
}
}
// 块级元素
#parent{
height:100px;
.son{
width:100px;
height:100px;
margin:0 auto;
}
}
// 行内元素
#parent{
height:100px;
.son{
width:100px;
height:100px;
display:inline-block;
text-align:center;
}
}
// flex布局
#parent{
display:flex;
justify-content:center;
height:100px;
.son{
width:100px;
height:100px;
}
}
- 左定宽右自适应
// flex 布局
#Box{
width: 100%;
height:400px;
.left{
float:left;
width:100px;
height:400px;
}
.right{
flex:1;
height:400px;
}
}
// float + margin
.left {
float: left;
width: 100px;
height: 100%;
background-color: antiquewhite;
}
.right {
margin-left: 100px;
height: 100%;
background-color: rgb(77, 87, 184);
}
// float + overflow
.left {
float: left;
width: 100px;
height: 400px;
background-color: antiquewhite;
}
.right {
height: 400px;
overflow: hidden;
background-color: rgb(77, 87, 184);
}
7. 请用CSS3写一个旋转的硬币
.coin{
width:100px;
height:100px;
transform-style:preserve-3d;
transform: rotate3d(-1, -1, 0, 45deg);
animation: coin 15s linear;
}
.coin>div{
position:absolute;
width:100px;
height:100px;
}
.front{
width:100px;
height:100px;
border-radius:50%;
transform: translateZ(2px); // 硬币厚度
}
.back{
width:100px;
height:100px;
border-radius:50%;
}
@keyframes coin{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
8. 什么是外边距重叠? 重叠的结果是什么? 如何解决?
外边距重叠就是在CSS当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为重叠
重叠后的结果分为下面三种
- 两个相邻的外边距都是正数时,结果取较大的值
- 两个相邻的外边距都是负数时,结果取绝对值的较大值
- 两个外边距一正一负时,结果是两者的相加的和
解决方法
- 为父元素添加
overflow:hidden
9. px、em和rem的区别?
px
em
和rem
都是长度单位,区别是,px
的值是固定的,指定是多少就是多少,计算比较容易em
的值不是固定的,并且em
会继承父级元素的字体大小。rem
相对于根元素(元素)
10. Link 与 @import 的区别
link
是HTML方式。@import
是CSS方式link
最大限度支持并行下载,@import
过多嵌套导致串行下载,出现FOUC
(文档样式短暂失效)link
优于@important
11. 什么是FOUC?
Flash Of Unstyled Content
:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。
12. CSS哪些属性可以继承?哪些属性不可以继承
- 可继承的样式:font-size font-family color UL LI DL DD DT
- 不可继承的样式:**border padding margin width height **