1、盒子模型
- W3C标准盒子模型:width = content的宽度,盒子总width = width + padding +border + margin
- IE盒子模型:width = content + padding + border的宽度,盒子总width = width + margin
box-sizing:content-box | border-box | inherit
- content-box 默认值,元素的width/height不包含padding,border,与W3C标准盒子模型一致
- border-box,元素的width/height包含padding,border,与IE盒子模型一致
- inherit,从父元素继承
2、BFC
BFC是块级格式上下文,是页面中的一块渲染区域
触发条件:
- 根元素(HTML元素)
- float: left | right
- overflow:auto | scroll | hidden
- display:inline-block | flex | inline-flex | grid | inline-grid
- position:absolute | fixed
应用场景:
- 防止margin重叠:两个p元素发生margin重叠,以最大的为准,可以在p元素外面加个容器,overflow:hidden触发这个容器生成一个BFC,那么两个p元素就不属于同一个BFC,就会解决margin重叠问题
- 父元素高度没有:一个父元素下面有两个子元素,两个子元素都设置了浮动,导致父元素高度为0,BFC在计算高度时,浮动的元素也会参与,所以我们可以设置父元素overflow:hidden触发BFC,内部浮动的元素也会计算高度,就是解决父元素高度为0问题
- 自适应多栏布局:body设置了固定宽度,里有两个元素,第一个元素设置了左浮动和宽度,两个元素重叠,BFC区域不会与浮动元素重叠,我们给第二个元素设置overflow:hidden触发生成BFC,会使第二个元素宽度自适应变窄
3、响应式设计
响应式设计:可以适配PC+平板+手机等各种设备下的页面设计布局
原理:通过媒体查询检测不同的设备屏幕尺寸进行适配页面布局,移动端,需要在页面头部加
<meta name="viewport" content="width=device-width, initial-scale=1, maximum
-scale=1, user-scalable=no”>
实现响应式布局方式:
- 媒体查询
- 百分比
- vw | vh
- rem
4、元素宽高不固定水平垂直居中的方法
- 定位+margin:auto
.father {
position: relative;
}
.son {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
- 定位+margin: 负值
.father {
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
- 定位+transform
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- table布局
.father {
display: table-cell;
}
.son {
display: inline-block;
}
- flex布局、grid布局
.father {
display: flex:
// display: grid;
align-items: center;
justify-content: center;
}
5、实现两栏布局右侧自适应?三栏布局中间自适应
两栏布局右侧自适应
// 方案一:
.father {
overflow: hidden; // 父元素添加BFC区域
}
.left: {
width: 100px;
float: left; // 左边元素添加浮动
}
.right {
margin-left: 110px;
}
// 方案二:
.father {
display: flex;
}
.left {
width: 100px;
}
.right {
flex: 1;
}
三栏布局中间自适应
// 方案一:两边float,中间margin
.father {
overflow: hidden; // 生成BFC区域,计算高度时考虑浮动元素
}
.left {
width: 100px;
float: left;
}
.right {
width: 120px;
float: right;
}
.middle {
margin-left: 120px;
margin-right: 140px;
}
// 方案二:两边absolute,中间margin
.father {
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 100px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 100px;
}
.middle {
margin: 0 120px;
}
6、继承属性
- 字体系列属性:font,font-family,font-weight,font-size,font-style,font-variant;
- 文本系列属性:text-indent,text-align,line-height,word-spacing,letter-spacing,text-transform,direction,color
7、哪些方式可以隐藏页面元素
- display:none;
- visibility:hidden;
- opacity:0;
- 设置width,height为0
- position:absolute
- clip-path
8、实现单行 | 多行文本溢出省略号显示
// 单行文本溢出省略号
p {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 多行文本溢出省略号
p {
width: 100px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
9、画一个三角形
// 实心三角
.border {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px;
border-color: transparent transparent red;
}
// 空心三角
.border {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px;
border-color: transparent transparent red;
position: relative;
}
.border::after {
content: '‘;
border-style: solid;
border-width: 0 40px 40px;
border-color: transparent transparent #fff;
position: absolute;
top: 14px;
left: 18px;
}
10、css3新增了哪些新特性
- 选择器::first-of-type,:last-of-type,:nth-child(n)等
- flex弹性布局、grid栅格布局、媒体查询
- border-radius,box-shadow,border-image
- background-clip,background-origin,background-size
- word-wrap,text-overflow,text-shadow
- transition(过渡)、transform(转换)、animation(动画)
- linear-gradient(线性渐变),radial-gradient(径向渐变)
11、em|px|rem|vh|vw区别
相对长度单位:em|rem|vw|vh|%;
绝对长度单位:px
- 1em = 16px;为了简化fonti-size的换算,在body选择器中声明font-size = 62.5%,这就使em值为 16px * 62.5% = 10px;
- rem 与 em的区别:rem总是相对于根元素,em相对于级联的方式来计算尺寸
12、chrome如何支持小于12px的文字
- zoom:50% | 0.5; // 缩小到原来的一半
- -webkit-transform:scale(0.8);// 只对可以定义宽高的元素生效