1、前置知识
-
正常元素怎么布局
-默认,⼀个块级元素的内容宽度就是其⽗元素的100%,他的⾼度和其内容⾼度⼀致-⾏内元素它的宽度和⾼度都是根据内容决定的(⽆法设置⾏内元素的宽⾼)
—可设置display属性,定义元素的类型(css3定义布局)
通过display设置行内元素宽高
-
元素之间⼜是如何相互影响的呢
-正常的⽂档布局流
—每个块级元素会在上个元素下⾯另起⼀⾏
–-⾏内元素不会另起⼀⾏
2、CSS中必须掌握的float布局
- 使用
float: none; //默认值,元素不浮动
float: left; //元素像左浮动
float: right; //元素像右浮动
- 特点
浮动元素会脱离⽂档流,不再占据⽂档流空间
浮动元素彼此之间是从左往右排列,宽度超过⼀⾏⾃动换⾏
在浮动元素前⾯元素不浮动时(有margin值,继承父级宽度为整个浏览器宽度),浮动元素⽆法上移
块级元素和⾏内元素浮动之后都变成⾏内块级元素
元素不浮动时有margin值,继承父级宽度为整个浏览器宽度。而它自己的宽度值是100px,不够,所以用浏览器的宽度来补
设置成浮动之后就没有margin值了,只有自己的内容宽度
span行级元素:
设置浮动变成行内块级元素:此元素不会独占一行
浮动元素不会盖住⽂字,可以设置⽂字环绕效果
- 清除浮动
如果中间蓝色盒子没有设置宽高,由里面的内容撑开,则会出现:
但是有时box2中内容宽度不确定
3、 CSS中必须掌握的flex布局
flex布局(弹性布局) CSS3知识点
- ⽗元素容器的属性
/* 设为 Flex 布局以后,⼦元素的float、 clear和vertical-align属性将失效。 */
display: flex;
/* 决定主轴的⽅向(即项⽬的排列⽅向) */
flex-direction: row(水平排列) | row-reverse | column (垂直排列)| column-reverse;
reverse 可以理解成镜像处理
/* 是否换⾏ */
flex-wrap: nowrap(不换行) | wrap(换行) | wrap-reverse(颠倒换行,上下镜像);
/* 定义⽔平⽅向对⻬⽅式 */
justify-content: flex-start(初始状态) | flex-end(与初始状态颠倒--不是镜像) | center | space-between | space-around;
flex-start
flex-end 不是镜像
center
space-between
space-around
/* 定义垂直⽅向对⻬⽅式 */⼦元素容器的属性
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start 默认样式
flex-end
center
baseline
stretch
/* 定义多个轴线(多⾏/多列)对⻬⽅式 */
align-content: flex-start | flex-end | center | space-between | space-around |
stretch;
对多行或者多列才会生效
flex-start
flex-end 不是镜像
center
- ⼦元素容器的属性
/* 定义⼦元素的排列顺序,默认为0 */
order: -10 | -1 | 0 | 1 | 10;
/* 定义⼦元素的放⼤⽐例,默认为0 */
flex-grow: 0 | 1 | 2 | 3;
/* 定义⼦元素的缩⼩⽐例,默认为1 */
flex-shrink: 0 | 1;
/* 定义了在分配多余空间之前,项⽬占据的主轴空间 */
flex-basis: <length> | auto;
/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;
flex:1; // flex-grow为1,占据剩余空间
- 兼容性
浏览器ie9及以上 - 选择float布局 or flex布局?
推荐是使⽤flex布局
flex布局易⽤,布局全⾯
float的创建初衷只是为了达到⽂字环绕的效果,另外需要清除浮动
现在⼏乎所有公司的产品使⽤场景都在浏览器ie9以上
4、CSS中必须掌握的position定位
- 也是为布局引⼊的属性
- position常⽤的⼏个值
position: static (静态定位) ⽗元素
position: relative (相对绝对) ⽗元素
position: absolute (绝对定位)
position: fixed (固定定位) ⽗元素
position: sticky (粘性定位) ⽗元素
- 相关的属性
z-index //使⽤场景:当定位的盒⼦重叠在⼀起
层级越高,在视图层就越往上,滑动底层盒子时,上层不会被遮挡
5、经典的三栏布局如何实现
- float实现
绿色部分随着浏览器宽度变化而变化
-
position实现
-
flex实现
6、水平垂直居中的常用方法
行内元素不可以设置宽度和高度,所以没有水平垂直居中的说法
- ⾏内块元素
- 块级元素
- position + margin 需要清楚⼦元素(蓝色box1)的宽⾼
- position + transform 若不清楚⼦元素的宽⾼
- flex
- table-cell 兼容性较差
7、扩展⾼级知识点之BFC
-
定义
块格式化上下⽂(Block Formatting Context, BFC)是Web⻚⾯的可视化CSS渲染的⼀部分,是块盒⼦
的布局过程发⽣的区域,也是浮动元素与其他元素交互的区域。
即:形成了⼀块封闭的区域,能检测到区域内脱离⽂档流的元素 -
特点
CSS中隐含的属性,开启后不会被浮动的元素覆盖
BFC元素可以包含浮动元素
BFC元素的⼦元素和⽗元素外边距不重叠 -
开启(都会有副作⽤)
设置元素浮动 float: left
设置为⾏内块元素 display: inline-block
overflow: hidden(推荐) -
作⽤
清除浮动带来的影响
解决边距塌陷问题(外边距折叠(Margin collapsing)也只会发⽣在属于同⼀BFC的块级元素之间)