CSS 布局中, 什么是 BFC
BFC 是 Block formatting context 的缩写, 表示 "块级格式化上下文".
设置 BFC 的元素, 是一个独立的渲染区域, 只有 Block-level box 参与, 它规定了内部的 Block-level Box 如何布局(与该区域外部无关).
在 html 当中, 每个元素都可以看做一个盒子 BOX, 而不同盒子的 "展示" 类型有所不同.
Formatting context 是页面中的一块渲染区域, 并且有一套渲染规则. 它用来决定: 其子元素将如何定位, 以及和其他元素的关系和相互作用, BFC 是其中的一种规则.
可以通过触发 BFC 布局, 来清除浮动, 防止纵向 margin 重叠等.
BFC 提供了一个独立布局的环境
每个 BFC 都遵守同一套布局规则
创建一个 BFC:
- float:left|right
- position:absolute|fixed
- display: table-cell|table-caption|inline-block
- overflow: hidden|scroll|auto
image.PNG
image.PNG
image.PNG
image.PNG
image.PNG
CSS3 选择器有哪些?
属性选择器, 伪类选择器, 伪元素选择器.
image.PNG
image.PNG
css3 选择器:
基本选择器, 层次选择器
伪类选择器, 属性选择器
伪元素,
基本选择器语法
image.PNG
层次选择器语法
image.PNG
image.PNG
CSS3 有哪些新特性?
- text-shadow
- border-radius
- box-shadow
- box-sizing
- gradient
- transform
在 CSS3 中唯一引入的伪元素是 ::selection
媒体查询, 多栏布局
border-image
渐变: linear-gradient,radial-gradient
过渡: transition
内联 内嵌 外链 导入
Flex 弹性布局
2009 年, W3C 提出了一种新的方案 --Flex 布局
.box{display:flex;}
行内元素也可以使用 Flex 布局
.box{display:inline-flex;}
image.PNG
- <body>
- <div class="box">
- <div class="w-100"></div>
- <div class="flex1"></div>
- </div>
- </body>
- <style>
- .box {
- display: flex;
- height: 200px;
- width: 400rpx;
- }
- .w-100 {
- width: 100px;
- background: red;
- }
- .flex1{
- flex: 1;
- background: blue;
- }
- </style>
采用 Flex 布局的元素, 称为 Flex 容器
image
水平的主轴 (main axis) 和垂直的交叉轴 (cross axis). 主轴的开始位置(与边框的交叉点) 叫做 main start, 结束位置叫做 main end; 交叉轴的开始位置叫做 cross start, 结束位置叫做 cross end.
单个项目占据的主轴空间叫做 main size, 占据的交叉轴空间叫做 cross size.
flex-direction: 决定项目 (item) 的排列方向
row(默认值): 主轴为水平方向, 起点在左端.
column: 主轴为垂直方向, 起点在上沿.
row-reverse: 主轴为水平方向, 起点在右端.
column-reverse: 主轴为垂直方向, 起点在下沿.
image.PNG
- <style>
- .dis-flex {
- dispaly: flex;
- flex-direction: column;
- }
- .box {
- height: 200px;
- width: 400px;
- }
- .w-100 {
- height: 50px;
- background: red;
- }
- .flex1 {
- flex: 1;
- background: blue;
- }
- </style>
- <body>
- <div class="box dis-flex">
- <div class="w-100"></div>
- <div class="flex1"></div>
- </div>
- </body>
- flex-wrap
image
lex-wrap 属性定义了, 如果一条轴线排不下, item 的换行方式.
flex-wrap 有三个值:
1,nowrap(默认): 不换行
2,wrap: 换行, 第一行在上方.
3,wrap-reverse: 换行, 第一行在下方.
- .dis-flex {
- flex-wrap: wrap-reverse;
- display: flex;
- }
- .box {
- width: 400px;
- }
image.PNG
flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式, 默认值为 row nowrap.
image.PNG
- .dis-flex {
- display: flex;
- flex-flow: column-reverse wrap;
- }
- .box {
- height: 400px;
- width: 200px;
- }
image.PNG
justify-content 有五个值:
1,flex-start(默认值): 左对齐
2,flex-end: 右对齐
3,center: 居中
4,space-between: 两端对齐, 项目之间的间隔都相等.
5,space-around: 每个 item 两侧的间隔相等.
image.PNG
space-between: 两端对齐
space-around: 每个 item 两侧的间隔相等
- <style>
- .dis-flex{
- display: flex;
- flex-flow: wrap;
- justify-content: space-between;
- }
- .box {
- width: 400px;
- border: 2px solid blue;
- }
- .box2 {
- width: 400px;
- border: 2px solid blue;
- margin-top: 20px;
- justify-content: space-around;
- }
align-items:Item 在交叉轴上如何对齐
1,flex-start: 交叉轴的起点对齐.
2,flex-end: 交叉轴的终点对齐.
3,center: 交叉轴的中点对齐.
image.PNG
- <body>
- <div class="box">
- <div class="item1">
- 1
- </div>
- <div class="item2">
- 2
- </div>
- <div class="item3">
- 3
- </div>
- </div>
- </body>
- <style>
- .box{ width: 400px; display: flex; border: 2px solid green; align-item:
- center; } .box>div{ width:80px; color: #fff; text-align:center; } .item1{
- background:blue; height:200px; line-height:200px; } .item2{ background:
- gray; height: 100px; line-height: 100px; } .item3{ background: red; height:
- 120px; line-height: 120px; }
- </style>
baseline: 项目的第一行文字的基线对齐.
image.PNG
image.PNG
align-content: 多根轴线的对齐方式
order
Item 的排列顺序. 数值越小, 排列越靠前, 默认为 0.
image.PNG
- .dis-flex{
- display: flex;
- flex-flow: wrap;
- justify-content: space-between;
- }
- flex-grow
定义 Item 的放大比例, 默认为 0, 即如果存在剩余空间, 也不放大.
- .dis-flex{
- display: fle;
- }
- .box{
- width: 400px;
- border: 2px solid green;
- }
- .box>div{
- height: 80px;
- line-height: 80px;
- color: #fff;
- text-align: center;
- }
image.PNG
image.PNG
flex-shrink
定义了 Item 的缩小比例, 默认为 1, 即如果空间不足, 该 Item 将缩小
image.PNG
image.PNG
flex-basis
flex-basis 属性定义了在分配多余空间之前, Item 占据的主轴空间(main size).
image.PNG
align-self 属性允许单个 Item 有与其他 Item 不一样的对齐方式, 可覆盖 align-items 属性.
- <style>
- .box{ width: 400px; height: 400px; display: flex; border: 2px solid green;
- align-items: center; } .box>div{ width: 80px; color: #fff; text-align:
- center; } .item1{ background: blue; height: 200px; line-height: 200px;
- align-self: flex-end; } .item2{ background: gray; height: 100px; line-height:
- 100px; } .item3{ background: red; height: 120px; line-height:120px; }
- </style>
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/d17cc020cf63