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撑开
4641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
