1 必考:两种盒模型分别说一下。
1 标准盒模型:box-sizing: content-box
width = content-width
height = content-height
2 怪异盒模型:box-sizing: border-box
width = content-width + padding-width + border-width
height = content-height + padding-height + border-height
优势:无论如何改动border,margin与padding的值,都不会导致box总尺寸发生变化,布局写起来更方便
2 必考:如何垂直居中
如果 .parent 的 height 不写,你只需要 padding: 10px 0; 就能将 .child 垂直居中;
如果 .parent 的 height 写死了,就很难把 .child 居中,以下是垂直居中的方法。
忠告:能不写 height 就千万别写 height。
1 table自带功能
<table class="parent">
<tr>
<td class="child">
一串文字
</td>
</tr>
</table>
2 100% 高度的 afrer before 加上 inline block
div 装成 table
margin-top -50%
translate -50%
absolute margin auto
对需要水平垂直居中的元素写css:
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%,-50%);
flex
对父级元素写css:单行居中:
display : flex;
justify-content : center;
align-items : center;
多行垂直居中:
display : flex;
justify-content : center;
flex-wrap : wrap/wrap-reverse;
align-items : center;
居中
单行文本在盒子里垂直居中。
水平方向:text-align: center;
垂直方向居中:让行高与容器高度一致line-height: 行高px; 行高:显示一行所需的高度。
多行文本在盒子垂直居中。盒子不给高度,用上下padding挤出来。
水平方向:text-align: center;
垂直方向居中:通过padding设置高度padding:90px 0;
文本水平方向居中。
盒子在父盒子内水平居中。
行内元素:text-align: center;
块元素:margin: 0 auto;
行内块:text-align: center;
盒子在父盒子内垂直居中。
行内元素:line-height: 300px;
块元素:
如果已知父容器高度,设置margin-top,但是不要塌陷margin-top: 100px
水平垂直居中:margin: 100px auto;
如果父容器高度不确定,设置父元素padding: 200px 0;
行内块:line-height: 300px;注意,垂直居中的时候,要更改图片的对齐方式:
vertical-align: middle;
表格居中:td标签添加属性align="center
借助表格特性,可以将单行文本,多行文本,行内元素,块元素,行内块元素等,实现居中
模拟表格居中
.demo{
width: 600p;
height: 600px;
border: 10px solid pink;
/*模拟表格*/
display: table-cell;
/*水平居中*/
text-align:center;
/*垂直居中*/
vertical-align:middle;/*对齐方式为居中对齐*/
}
<div class="ickt">
hello
<br>
hello world;
<span>span</span>
<div>div</div>
<img ....>
</div>
垂直居中
1 行内inline元素
line-height的值等于height的值
2 absolute定位元素
1 top: 50% + margin-top负值,高度的一半,需要知道元素的尺寸
2 left: 50%; top: 50%; transform: translate(-50%, -50%); 不需要知道盒子的尺寸
3 top: 0; left: 0; bottom: 0; right: 0; margin: auto; 会自动分配外边距,不存在兼容性,不需要知道元素尺寸
3 必考:flex 怎么用,常用属性有哪些?
flex
align-items和align-content
4 必考:BFC 是什么?
BFC 全称为 块格式化上下文 (Block Formatting Context)。BFC的布局规则如下:
1 内部的盒子会在垂直方向,一个个地放置;
2 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠;
3 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
4 BFC的区域不会与float重叠;
5 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此;
6 计算BFC的高度时,浮动元素也参与计算。
5 CSS 选择器优先级
1 越具体优先级越高
2 写在后面的,覆盖写在前面的
3 !important最高,少用
6 清除浮动说一下
浮动会造成父级标签塌陷问题
解决方法:
1 父级标签设置高度
2 伪元素选择器清除浮动,给父级标签加上下面这个类值
.clearfix:after{
content: '';
display: block;
clear: both; 清除浮动clear
}