编辑排版 | 宋大狮
平台运营 | 小唐狮
一、说一说盒模型的组成?
盒模型由:外边距margin、边框border、内边距padding、内容content四个部分组成
怪异盒模型:
box-sizing:border-box;
设置的宽度是content+padding+border
标准盒模型:
box-sizing:content-box;
设置的宽度是content
二、说一下垂直水平居中的方式有哪些?
行元素:
1、text-align + line-height
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}
2、display: table-cell;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}
3、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
4、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
margin: auto;
}
5、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7、position: absolute;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
margin: auto;
}
9、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
行块元素:
1、text-align + line-height + vertical-align
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
vertical-align: middle;
}
2、display: table-cell;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline-block;
}
3、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
4、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
margin: auto;
}
5、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7、position: absolute;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
margin: auto;
}
9、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
块元素:
1、display: table-cell;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
2、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
3、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
4、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
5、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
6、position: absolute;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
7、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
8、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
三、说一说对rem的理解?
概述:
页面响应式用 rem 实现【根据设备屏幕宽度改变根元素fontsize】,设备自适应用 媒体查询 实现【根据设备屏幕宽度控制哪些样式class生效】
媒体查询实现:【页面结构需要变化时使用】
1、link元素中的CSS媒体查询【一般用于Js项目】
<!-- pc端,设备屏幕宽度大于等于901px时,pc端样式文件class生效,控制某些元素显示隐藏、字体rem值改变等 -->
<link rel="stylesheet" media="(min-width:901px)" href="./css/pc/index.css">
<!-- 移动端,设备屏幕宽度小于等于900px时,移动端样式文件class生效,控制某些元素显示隐藏、字体rem值改变等 -->
<link rel="stylesheet" media="(max-width:900px)" href="./css/pe/index.css">
2、样式表中的CSS媒体查询【一般用于Vue项目】
<!-- pc端 -->
@media screen and (min-width:901px){
body {
background-color: red;
}
}
<!-- 移动端 -->
@media screen and (max-width:900px){
body {
background-color: green;
}
}
rem原理:
百分比布局可实现响应式布局,而rem相当于百分比布局。无论设备可视窗口如何变化,始终设置rem为width的1/n,即实现了百分比布局。
rem公式:
方案一:1rem=100px【方便计算】
html.fontSize = 1rem = 设备屏幕宽度/(设计稿宽度/100),
1、分析阶段 --- 让设备屏幕宽度等于设计稿宽度,则1rem=100px,此时方便计算、编写设计稿元素宽度对应的rem。
2、执行阶段 --- 让设备屏幕宽度等于Js获取的设备屏幕宽度
方案二:1rem = 设计稿宽度/份数【需使用cssrem插件来方便计算】
1、分析阶段 --- html.fontSize = 1rem = 设计稿宽度/份数
2、执行阶段 --- html.fontSize = 1rem = 设备屏幕宽度/份数
3、页面元素的rem:nrem = 设计稿元素宽度/1rem
rem实现:
1、分析阶段,先根据设计稿宽度px计算1rem,再根据设计稿元素宽度px计算、编写页面元素的rem
2、执行阶段,Js先自动根据设备屏幕宽度计算1rem,再将1rem对应的px赋值给Html的fontsize,再根据编写好的页面元素的rem,计算实际页面元素的px
rem工具:
分析阶段:cssrem插件,把页面元素px自动计算成rem。需先在VSCode的配置文件中,根据设计稿宽度px计算1rem。
执行阶段:flexible.js库,将设备屏幕宽度分成了10份,根据设备屏幕宽度自动计算1rem。【Js项目在head中引入,Vue项目在main.js中引入】
四、说一说清除浮动的方法?【浮动导致父元素高度塌陷问题解决方法】
1、给父级直接设置高度
2、隔墙法:在最后一个浮动标签后,新加一个标签,给其设置clear:both
3、overflow:hidden;:通过触发BFC,实现清除浮动
4、伪类清除法:推荐使用
.clearfix:after{
//内容为空
content: "";
//转成块元素
display: block;
//清除左右浮动
clear: both;
}
五、说一说css3新特性?
特殊选择器:属性选择器、表单伪类选择器、结构伪类选择器、伪元素选择器
特殊效果:渐变、圆角border-radius、文字阴影text-shadow/盒阴影box-shadow、滤镜filter
特殊动效:过渡transition、变换transform(倾斜skew、平移translate、缩放scale、旋转rotate)、动画animation
六、说一说对BFC的理解?
页面【等同于html根元素】:一个三维模型,分X、Y、Z轴;内部每一个子元素也都是一个三维模型,都拥有自己的X、Y、Z轴
FC格式化上下文【管理页面的X、Y轴】,它是页面中一个决定元素内部如何布局的容器,决定了元素内部的布局方式,内部的子元素不会影响到容器外的布局。
SC层叠上下文【管理页面的Z轴】,它是页面中一个决定元素内部如何分层的容器,决定了元素内部的层级关系,每个元素都拥有属于自己的一个层叠上下文。
文档流【管理页面的X、Y轴】:页面中所有元素的默认布局特性。块元素独占一行、垂直排列,行元素不独占一行、水平排列,水平自动换行,垂直超出溢出。
FC、SC、文档流的关系:
页面最外面最底端是html根元素;【Z轴方面】根元素内部有许多层堆叠,每一层有许多子元素;【X、Y轴方面】根元素内部有自己的FC布局格式-BFC,内部每一个块元素都受根元素FC布局格式的约束,其它方面依然遵循文档流特性
【X、Y轴方面】通过触发FC可以改变元素自身内部的文档流 某些 布局特性,【Z轴方面】通过触发SC可以使元素自身 脱离 父元素的文档流布局特性。
存在四种类型的FC:
BFC 块级格式化上下文,只有块元素参与, 它规定了内部的块元素如何布局。
IFC 行内格式化上下文,只有行元素参与, 它规定了内部的行元素如何布局。
FFC 弹性盒格式化上下文
GFC 网格格式化上下文
BFC:
触发方式:
根元素:html
浮动:float的值不是none
定位:position的值不是static、relative
块级容器:display的值是inline-block、table-caption、table-cell
overflow:overflow的值不是visible
作用:
避免上下外边距重叠
清除浮动,解决浮动元素高度塌陷
IFC:
触发方式:
块级元素中仅包含行内元素
FFC:
触发方式:
display: flex / inline-flex的容器
GFC:
触发方式:
display: gird / inline-grid的容器
七、说一说对flex的了解?
容器:开启flex布局的元素
项目:容器内的子元素
容器分主轴与侧轴,项目默认从左到右、从上到下排列
容器的属性:
flex-direction 设置主轴的方向
justify-content 设置主轴的子元素排列方式
align-items 设置侧轴上的子元素排列方式(单行)
align-contnet 设置侧轴上的子元素的排列方式(多行)
flex-wrap 设置子元素是否换行
flex-flow 是flex-direction和flex-wrap属性的复合属性
项目的属性:
flex 是flex-grow、flex-shrink和flex-basis属性的复合属性
(1) flex-grow: 定义项目的扩展比率
(2) flex-shrink: 定义项目的收缩比率
(3) flex-basis: 定义项目的默认基准值
align-self 设置项目在交叉轴上的对齐方式,可覆盖align-items属性
order 设置项目的排列顺序
八、说一说外边距相关问题及解决方式?
兄弟上下外边距重叠:
1、给一个元素外面套一个开启BFC的父元素
2、在兄弟元素间添加内容
父子上下外边距重叠:
1、给父元素开启BFC
2、在父元素内第一行或最后一行添加内容
3、给父元素添加Padding
4、给父元素添加Border
九、说一说什么是页面的回流、重绘?
页面渲染流程:解析DOM树 - 解析样式结构体 - 构建Render渲染树 - 绘制Render渲染树
回流(页面布局变化):当前元素改变了自身的宽高、布局、显示隐藏,需要重新构建渲染树
重绘(元素外观变化):当前元素改变了自身的外观,但是没有改变页面布局,不需要重新构建渲染树,只需要浏览器重新绘制,比如:改变了背景色
回流必定引起重绘,但重绘不一定会引起回流。
如何优化:
1. 【合并多次操作】将多次操作节点、多次改变样式属性的操作合并成一次操作。
2. 【脱离文档流】将需要多次重排的元素,脱离文档流,使它的变化不会影响到其他元素。
3. 【先隐藏再操作】由于display属性为none的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行多次操作时,可以先隐藏它,操作完成后再显示。
十、说一说css优先级?
从引入方式方面:行内style > 内嵌<style> > 链入<link>
从选择器权重方面:
!important > 行内选择器 1000 > Id选择器 100 > class选择器=属性选择器=伪类选择器 10 > 标签选择器=伪元素选择器 1 > 继承=通配符选择器 0
当权重相等时,按照就近原则
优先解析权重高的选择器,不会出现权重进位:比如,当11个class选择器和1个Id选择器在一块时,优先解析的是Id选择器,并不会出现所谓的11个class选择器大于Id选择器的问题
使用 复合选择器 时权重计算方式:后代、父子、兄弟、交集,权重相加;并集,权重分开计算
十一、说一说哪些属性可以被继承?
color
font-xxx
line-xxx
text-xxx
十二、说一说如何画一个三角形?
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-left-color: red;
}
十三、说一说如何实现6px字体?
.font{
font-size: 12px;
transform: scale(.5);
}
十四、说一说移动端如何画一个0.5px的边框?
1、通过缩放0.5倍
border: 1px solid red;
transform: scaleY(.5);
2、通过50%背景渐变实现
height: 2px;
background-image: linear-gradient(0deg, red 50%, transparent 50%);
- END -