1、盒模型
(1)CSS盒模型本质是一个盒子,包含 padding、border、margin、content。
(2)盒模型分为标准盒模型(box-sizing:content-box)和怪异盒模型(box-sizing:border-box)。
(3)标准盒模型在设置width和height时设置的是content的大小,真正盒子的大小还要加上padding和border; 怪异盒模型设置width和height时设置的是盒子的大小,包含padding和border,会压缩content区域。
2、浮动
作用:
①让多个块级盒子(div)水平排列成一行。
②实现文字环绕图片。
特点:脱离文档流,容易造成盒子塌陷,影响其他元素的排列。
解决:
①父元素中添加overflow:hidden;
②给父元素添加高度;
③建立空白div,添加clear;
④在父级添加伪元素::after{ content : ' ', clear : both , display : table}。
3、样式优先级
(1)!important 永远最高
(2)style行内样式(内联式)>嵌入式(<style>)和外联式(link)
(3)选择器:ID 选择器(#id)> class类选择器 = 属性选择器(a[href="segmentfault.com"]{}) = 伪类选择器(:hover{}) > 标签选择器(span{}) = 伪元素选择器(::before{}) = 后代选择器(.father .child{})> 子选择器(.father > .child{})= 相邻选择器( .bro1 + .bro2{})> 通配符选择器(*{})
4、CSS尺寸设置的单位
①css一共有五个长度单位,分别是px,em,rem,vw,vh;
②除了px是绝对单位,其他都是相对单位;
③em相对于自身大小(但在font-size中相对于父元素字体大小);
④rem相对于根元素的字体大小;
⑤vw相对于可视化窗口的宽(1vw就是1%可视化窗口宽度);
⑥vh相对于可视化窗口的高(1vh就是1%可视化窗口高度);
⑦一般采用rem+媒体查询或者rem+vw来实现响应式布局。原理是当窗口大小发生变化时,通过媒体查询或者vw改变根元素的字体大小,从而改变以rem为单位的元素大小。
5、BFC
定义:BFC(Block Formatting Context)是块级格式化上下文,是Web页面一块独立的渲染区域,内部元素的渲染不会影响边界以外的元素,反之外面的也无法影响里面的。
形成条件:
- float属性不为none;
- position为absolute或fixed;
- display为inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid;
- overflow不为visible。
元素特性:
1、盒子从顶部开始垂直排列;
2、盒子垂直方向的距离由margin决定,相邻盒子margin会重叠;
3、margin-left会触碰到border-left(对于从左至右的方式,反之);
4、BFC区域不会与float盒子重叠,而是紧贴边缘浮动;
5、计算BFC高度时会检测float盒子高度。
应用场景:
1、清除浮动(比如display:flex会使内部浮动失效,通常还是使用overflow:hidden);
2、解决因外边距合并问题;
3、解决高度塌陷问题;
4、写左侧固定栏,右侧适应栏。
6、居中方案
// 兼容性ie 11以上支持
.father {
display: flex/grid;
justify-content: center;
align-items: center;
}
.father {
position: relative;
}
.son {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
// 兼容性较好
.father{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.son{
display: inline-block;
}
// 兼容性好
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
6、flex:1
缩写:
- flex-grow(设置了对应元素的增长系数);
- flex-shrink(指定了对应元素的收缩规则,只有在所有元素的默认宽度之和大于容器宽度时才会触发);
- flex-basis(指定了对应元素在主轴上的大小)。
7、隐藏元素的属性
- display: none;
- visibility: hidden;
- opacity: 0;
8、三栏布局
要求:左右两边盒子宽度固定,中间盒子宽度自适应,盒子的高度都是随内容撑高的,一般都是中间盒子内容较多,为了保证页面渲染快,在写结构的时候,需要把中间盒子放在左右盒子的前面。
// 圣杯布局
// 缺点:当middle部分的宽小于left部分时就会发生布局混乱
<div class="parent">
<div class="box middle"></div>
<div class="box left"></div>
<div class="box right"></div>
</div>
<style>
.parent {
padding: 0 20px; /* 设置父级元素的左右内边距 */
overflow: auto; /* 清除浮动,使得父级元素的高度被撑开 */
}
.box {
float: left; /* 所有盒子浮动 */
height: 100px; /* 假设每个盒子的高度都是100px */
}
.middle {
width: 100%; /* 中间盒子宽度100% */
background-color: #ddd; /* 只是为了区分,给中间盒子一个背景色 */
}
.left {
width: 150px; /* 左边盒子固定宽度 */
margin-left: -100%; /* 左边距-100%,使其覆盖中间盒子 */
position: relative; /* 相对定位 */
left: -20px; /* 向右平移自身宽度外的父级padding */
background-color: #faa; /* 只是为了区分,给左边盒子一个背景色 */
}
.right {
width: 150px; /* 右边盒子固定宽度 */
margin-right: -150px; /* 右边距-自身宽度,使其与中间盒子并排 */
background-color: #afa; /* 只是为了区分,给右边盒子一个背景色 */
}
</style>
// 双飞翼布局
// 优点:不会像圣杯布局那样变形,CSS样式代码更简洁
// 缺点:多加了一层dom节点
<div class="parent">
<div class="box left"></div>
<div class="box middle">
<div class="inner-box"></div>
</div>
<div class="box right"></div>
</div>
<style>
.parent {
padding: 0 20px; /* 设置父级元素的左右内边距 */
overflow: hidden; /* 清除浮动,使得父级元素的高度被撑开 */
}
.box {
float: left; /* 所有盒子浮动 */
}
.middle {
width: 100%; /* 中间盒子宽度100% */
}
.inner-box {
margin: 10px; /* 设置内部盒子的外边距 */
background-color: #ddd; /* 为了区分,给内部盒子一个背景色 */
/* 根据需要设置宽高 */
}
.left {
width: 150px; /* 左边盒子固定宽度 */
margin-left: -100%; /* 左边距-100%,使其覆盖中间盒子 */
background-color: #faa; /* 为了区分,给左边盒子一个背景色 */
}
.right {
width: 150px; /* 右边盒子固定宽度 */
margin-right: -150px; /* 右边距-自身宽度,使其与中间盒子并排 */
background-color: #afa; /* 为了区分,给右边盒子一个背景色 */
}
</style>