01-css盒模型
box-sizing:padding-box(包含padding和content)、border-box(IE盒模型)、content-box(标准盒模型)
CSS中盒模型分为IE盒模型和标准盒模型:
-
二者主要区别是width的包含范围
-
IE盒模型的width表示content+padding+border这三部分的宽度
-
标准盒模型的width只是content部分的宽度
02-BFC(块级格式化上下文)
块级格式化上下文,是一个独立的渲染区域,并且有一定的渲染规则,约束块级盒子的布局:
-
BFC区域不会与float box重叠
-
BFC是页面上一个独立的容器,子元素不会影响到外面
-
计算BFC高度时,浮动元素也会参与计算
哪些元素会形成BFC:
- 根元素
- float不为none的元素
- position为fixed和absolute的元素
- display为inline-block、flex、table-cell、table-caption、inline-flex的元素
- overflow不为visible的元素
应用:
-
解决父子元素margin塌陷问题(关于margin塌陷请看12)
-
.box{ width: 200px; height: 200px; background-color: blueviolet; /* overflow: hidden; */ } .son{ width: 50px; height: 50px; background-color: lightskyblue; margin-top: 30px; }
-
- 阻止元素被浮动元素覆盖: 给未浮动元素加overflow:hidden等
03-垂直/水平居中的方法
水平居中
-
文本:text-align:center
-
margin: 0 auto
-
flex: 父元素设置
justify-content:center
-
position+transform(宽度未知)
-
position+margin:0 auto;(宽度未知)
-
position+负margin(宽度已知)
垂直居中
-
单行文本:line-height
-
伪元素+vertical-align(inline-block)
-
.parent::after,.son{ display: inline-block; vertical-align: middle; } .parent::after{ content: ''; height: 100%; }
-
flex:给父元素设置
display:flex;align-items:center
-
position+transform
-
position+负margin
-
position+margin: auto 0;
04-隐藏元素的几种方法
- opacity:0; 不会改变页面布局,能触发点击事件
- visibility:hidden; 不会改变页面布局,不能触发点击事件
- display:none; 会改变页面布局,不能触发点击事件
05-position属性值比较
- fixed(固定定位): 相对于浏览器窗口定位,不占据原来的位置
- relative(相对定位):相对于自身的起点定位,占据原来的位置
- absolute(绝对定位):相对于最近已定位父元素,若没有则相对于html,不占据原来的位置
- sticky(粘性定位): 达到一定的阈值前相对定位,之后固定定位
- static(默认定位):没有定位
- inherit :从父元素继承position的属性值
06-清除浮动的几种方法
-
在浮动元素的最后加一个空元素,设置clear:both
-
给父元素加上overflow:hidden、auto
-
使父元素浮动(不推荐使用)
-
:after伪元素
-
.clearfix:after{ content: ''; display: block; clear: both; }
07-display各个属性值
inline、block、inline-block、flex、table-cell…
08-css选择器优先级
选择器:id选择器、后代选择器、子类选择器、兄弟选择器、属性选择器、*、伪类选择器、伪元素
权重计算规则:
- 第一优先级:
!important
会覆盖页面内任何位置的元素样式 - 内联样式,如
style='color:green'
,权值为1000 - ID选择器,权值为100
- 类、伪类、属性选择器,如:
.foo, :first-child, div[class="foo"]
,权值为10 - 标签、伪元素选择器,如
div:first-line
,权值为1 - 通配符、子类选择器、兄弟选择器,如:
*, >, +
,权值为0 - 继承的样式没有权值
比较规则:
- 前一级相等才能往后比较
- 无论是行内样式
(<style></style>)
、内部样式(写在标签内)
还是外部样式(link/@import)
,都是按照以上权重方式进行比较 - 优先级:
行内>id>class>元素(标签)
- 权重相同的情况下,后面的样式会覆盖前面的样式
09-css3新增属性
- 新增了很多选择器
- box-sizing: border-box(IE盒子模型)、content-box(标准盒模型)、padding-box
- transition、transform、animation(@keyframes )
- 边框:border-radius、box-shadow、border-image
- 背景:background-clip、background-origin、background-size、background-break
- 文字:
word-wrap:break-word
(强制文本进行换行,对单词进行拆分)- text-overflow(clip/ellipsis)处理文字超出容器边界的情况、配合word-wrap使用
- text-shadow
- text-decoration
- 渐变:linear-gradient(线性渐变)和radial-gradient(径向渐变)
- @font-face特性
- 多列布局:
- column-count:列数
- column-gap:列之间的间隔
- column-rule:列之间的宽度、样式和颜色
- outline-offset
10-三列布局
-
float+calc()
-
圣杯布局:
-
container设置左右padding,为left和right空出位置
-
三部分均浮动
-
center设置
width:100%;
占满剩余空间 -
left设置
margin-left:-100%;
移动到center最左边,再利用相对定位position:relative;left:-200px;
移动到container最左边 -
right设置
margin-left:-150px;
移动到center最右边,同理使用相对定位right:-150px;
移动到container最右边 -
<div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div>
-
body{ margin: 0; } .container{ height: 300px; padding: 0 150px 0 200px; } .center,.left,.right{ float: left; height: 100%; background-color: red; } .center{ width: 100%; height: 100%; background-color: blueviolet; } .left{ width: 200px; background-color: lightskyblue; margin-left: -100%; /* transform: translateX(-100%); */ position: relative; left: -200px; } .right{ width: 150px; background-color: aqua; margin-left: -150px; /* transform: translateX(100%); */ position: relative; right: -150px; }
- 缺陷:center位于container的padding中,因此宽度小的时候会出现布局混乱(如:将center的width改为90%)
-
-
双飞翼布局:
-
加一层div包裹中间部分的内容inside
-
三部分均浮动
-
center设置
width:100%;
占满整个container -
center内部的inside设置左右margin在两边留出空间
-
left设置
margin-left:-100%;
移动到container最左边 -
right设置
margin-left:-150px;
移动到container最右边 -
<div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div>
-
样式:
-
body{ margin: 0; } .container{ width: 100%; height: 300px; } .center,.left,.right{ float: left; height: 100%; } .center{ width: 100%; background-color: yellow; } .inside{ height: 100%; margin: 0 150px 0 200px; background-color: blueviolet; } .left{ width: 200px; background-color: lightskyblue; margin-left: -100%; } .right{ width: 150px; background-color: aqua; margin-left: -150px; }
-
11-flex布局
- 设置父容器为伸缩盒子,会使其每个子元素都变成伸缩项
- 当子元素的宽度和大于父元素的宽度的时候,子元素会自动平均收缩
相关属性
-
justify-content:
-
设置子元素在主轴上的排列方式
-
justify-content: flex-start:让子元素从父容器的起始位置开始排列 flex-end:让子元素从父元素的结束位置开始排列 center:让子元素从父容器的中间位置开始排列 space-between: 左右对齐父容器的开始和结束,中间平均分配,产生相同的间距 space-around: 将多余的空间平均分配在每个子元素两侧 margin:0 auto:造成中间的盒子间距是左右两边的两倍
-
-
align-items
-
设置元素在侧轴方向上的排列方式
-
center: 设置在侧轴方向上居中对齐 flex-start: 设置在侧轴方向上顶对齐 flex-end: 设置在侧轴方向上底对齐 stretch: 拉伸,让子元素在侧轴方向上进行拉伸,填充满整个侧轴方向 -- 默认值 baseline: 文本基线
-
-
flex-flow
-
flex-wrap+flex-direction - flex-flow: column nowrap;
-
flex-wrap: 控制子元素的换行显示(默认不换行)-
flex-wrap:nowrap;
- nowrap: 不换行 - 收缩
- wrap:换行
- wrap-reverse: 翻转,原来是从上到下,翻转后从下到上
-
flex-direction: 设置子元素的排列方向(主轴方向,默认是row)-
flex-direction:column;
- row: 水平方向排列
- row-reverse: 水平,从右到左
- column: 垂直排列,从上到下
- column-reverse: 从下到上
-
-
flex-grow
- 扩展子元素的宽度:设置当前元素应该占据剩余空间的比例值
当前空间的flex-grow/所有兄弟元素的flex-grow的和
- flex-grow的默认值是0,说明子元素并不会占据剩余空间
- 扩展子元素的宽度:设置当前元素应该占据剩余空间的比例值
-
flex
-
设置当前收缩子项占据剩余空间的比例值
-
flex-shrink
- 定义收缩比例,计算收缩空间
当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
- 默认值为1
- 定义收缩比例,计算收缩空间
12-margin塌陷问题
在标准文档流中,竖直方向的margin会出现叠加现象(水平方向没有margin塌陷)
同级塌陷:
- 两个相邻外边距都是正数:折叠的结果取其中较大的值
- 两个都是负数:去绝对值较大的值
- 一正一负取二者之和
父子元素塌陷:
- 父子元素都设置了同方向的margin-top值,两个属性之间没有其他内容隔离,导致两个属性相遇,发生magin塌陷
解决方法:
- 同级元素:如果两个元素垂直方向又间距,只需要设置给一个元素
- 父子元素:
- 形成BFC
- 给父元素设置padding或border,将两个边距分开
- 利用伪元素给子元素的前面添加一个空元素
- 更加常用的方法是,父子盒模型之间的距离就不要用子元素的margin去设置,而是用父元素的padding撑开