CSS学习(十九)-CSS伸缩布局盒
来源:互联网 发布:网页过滤软件 编辑:程序博客网 时间:2024/06/05 02:39
一、理论:
1.flexbox模型基础知识
a.flexbox布局方向不可预知
b.屏幕和浏览器窗口大小发生改变可以灵活调整布局
c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间
d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间
e.指定如何将垂直元素布局轴的额外空间分布到该元素周围
f.控制元素在页面上的布局方向
g.按照不同于DOM所指定的方式对屏幕上的元素重新排序
2.flexbox模型术语
a.主轴和侧轴 伸缩项目主要沿着这条轴布局,方向取决于justify-content属于 其值若为column为纵向 否则为横向
b.主轴起点、主轴终点:伸缩项目自主轴起点开始,至主轴终点结束
c.侧轴、侧轴方向:与主轴垂直的称作侧轴,侧轴是侧轴方向的延伸
d.侧轴起点、侧轴终点:伸缩项目的侧面内容由侧轴起点起,至侧轴终点止
e.侧轴长度、侧轴长度属性:由哪一个方向对着侧轴决定,是width或hegiht属性
3.伸缩容器、伸缩项目:
a.通过display属性显式地给一个元素设置为flex或inline-flex,即把容器变作伸缩容器
4.伸缩容器的属性:
a.伸缩流方向:flex-direction(默认为行)
b.伸缩行换行:默认为nowrap
c.伸缩方向与换行:定义伸缩容器的主轴与侧轴
d.主轴对齐:设置伸缩容器当前行伸缩项目在主轴方向的对齐方式,指定如何在伸缩项目之间分布伸缩容器的额外空间
e.堆栈伸缩行:控制伸缩项目在布局轴的堆放方式
5.伸缩项目的属性:
a.显示顺序 改变dom文档的先后顺序,通过此属性对项目进行排序组合
b.侧轴对齐
1)align-items 设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式
2)align-self
用来在单独的伸缩项目上覆写默认的对齐方式
3)伸缩性 定义伸缩项目可改变它们的宽度或高度填补可用的空间
6.伸缩行
a.flex-wrap 每个伸缩行至少包含一个伸缩项目
7.伸缩容器设置 display
a.box 设置为块伸缩容器
b.inline-fox 设置为内联级伸缩容器
c.horizontal 伸缩项目在伸缩容器中从左到右在一条水平线上排列显示
d.vertical 伸缩项目在伸缩项目中从上到下在一条垂直线上排列显示
e.inline-axis 伸缩项目沿着内联轴排列显示
f.block-axis 伸缩项目沿着块轴排列显示
8.布局顺序
a.box-direction
1)normal 正常显示
2)reverse 反向显示
9.伸缩换行 box-lines
1)single 伸缩容器的所有伸缩项目一行或一列显示
2)multiple 指定伸缩容器多行或多列显示伸缩项目
10.主轴对齐 box-pack
a.start 伸缩项目向一行的起始位置靠齐
b.end 伸缩项目向一行的结束位置靠齐
c.center 伸缩项目向中间位置靠齐
d.justify 伸缩项目会平均分布在一行里
11.侧轴对齐 box-align
a.start 伸缩项目顶部边缘放置在伸缩容器的顶端,伸缩容器
b.end 与start值相反,所有伸缩项目底部边缘放置在伸缩容器底端,伸缩容器额外空间放置在伸缩项目底部
c.center 伸缩项目紧靠在,垂直居中于伸缩容器。伸缩容器额外的空间平均分配在伸缩项目的顶部和底部
d.baseline 伸缩项目根据它们的基线对齐,伸缩容器额外的空间可前后显示
e.stretch 伸缩项目填充整个伸缩容器
12.伸缩性box-flex
a.box-flex 可以灵活地控制伸缩项目的宽度来填充伸缩容器额外的空间,解决了传统web设计中习惯使用百分比定义伸缩布局的弊端
1.flexbox模型基础知识
a.flexbox布局方向不可预知
b.屏幕和浏览器窗口大小发生改变可以灵活调整布局
c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间
d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间
e.指定如何将垂直元素布局轴的额外空间分布到该元素周围
f.控制元素在页面上的布局方向
g.按照不同于DOM所指定的方式对屏幕上的元素重新排序
2.flexbox模型术语
a.主轴和侧轴 伸缩项目主要沿着这条轴布局,方向取决于justify-content属于 其值若为column为纵向 否则为横向
b.主轴起点、主轴终点:伸缩项目自主轴起点开始,至主轴终点结束
c.侧轴、侧轴方向:与主轴垂直的称作侧轴,侧轴是侧轴方向的延伸
d.侧轴起点、侧轴终点:伸缩项目的侧面内容由侧轴起点起,至侧轴终点止
e.侧轴长度、侧轴长度属性:由哪一个方向对着侧轴决定,是width或hegiht属性
3.伸缩容器、伸缩项目:
a.通过display属性显式地给一个元素设置为flex或inline-flex,即把容器变作伸缩容器
4.伸缩容器的属性:
a.伸缩流方向:flex-direction(默认为行)
b.伸缩行换行:默认为nowrap
c.伸缩方向与换行:定义伸缩容器的主轴与侧轴
d.主轴对齐:设置伸缩容器当前行伸缩项目在主轴方向的对齐方式,指定如何在伸缩项目之间分布伸缩容器的额外空间
e.堆栈伸缩行:控制伸缩项目在布局轴的堆放方式
5.伸缩项目的属性:
a.显示顺序 改变dom文档的先后顺序,通过此属性对项目进行排序组合
b.侧轴对齐
1)align-items 设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式
2)align-self
用来在单独的伸缩项目上覆写默认的对齐方式
3)伸缩性 定义伸缩项目可改变它们的宽度或高度填补可用的空间
6.伸缩行
a.flex-wrap 每个伸缩行至少包含一个伸缩项目
7.伸缩容器设置 display
a.box 设置为块伸缩容器
b.inline-fox 设置为内联级伸缩容器
c.horizontal 伸缩项目在伸缩容器中从左到右在一条水平线上排列显示
d.vertical 伸缩项目在伸缩项目中从上到下在一条垂直线上排列显示
e.inline-axis 伸缩项目沿着内联轴排列显示
f.block-axis 伸缩项目沿着块轴排列显示
8.布局顺序
a.box-direction
1)normal 正常显示
2)reverse 反向显示
9.伸缩换行 box-lines
1)single 伸缩容器的所有伸缩项目一行或一列显示
2)multiple 指定伸缩容器多行或多列显示伸缩项目
10.主轴对齐 box-pack
a.start 伸缩项目向一行的起始位置靠齐
b.end 伸缩项目向一行的结束位置靠齐
c.center 伸缩项目向中间位置靠齐
d.justify 伸缩项目会平均分布在一行里
11.侧轴对齐 box-align
a.start 伸缩项目顶部边缘放置在伸缩容器的顶端,伸缩容器
b.end 与start值相反,所有伸缩项目底部边缘放置在伸缩容器底端,伸缩容器额外空间放置在伸缩项目底部
c.center 伸缩项目紧靠在,垂直居中于伸缩容器。伸缩容器额外的空间平均分配在伸缩项目的顶部和底部
d.baseline 伸缩项目根据它们的基线对齐,伸缩容器额外的空间可前后显示
e.stretch 伸缩项目填充整个伸缩容器
12.伸缩性box-flex
a.box-flex 可以灵活地控制伸缩项目的宽度来填充伸缩容器额外的空间,解决了传统web设计中习惯使用百分比定义伸缩布局的弊端
二、实践:
1.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin: 0; padding: 0; } body>div{ border:1px solid #ccc; margin:20px; padding:10px; } div>div{ background-color: #123589; border:1px solid #a6f5f3; width:100px; height:100px; text-align: center; line-height: 100px; } .box{ display: -moz-box; display: -webkit-box; } .inline-box{ display:-moz-inline-box; } </style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="inline-box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div></div></body></html>2.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin:0; padding: 0; } body>div{ border:1px solid #0055cc; margin: 20px; padding: 10px; } div > div{ border:1px crimson #f36; } .box{ display:-moz-box; display: -webkit-box; display: box; } .box-horizontal{ -moz-box-orient:horizontal; -webkit-box-orient: horizontal; box-orient:horizontal; } .box-vertical{ -moz-box-orient: vertical; -webkit-box-orient: vertical; box-orient:vertical; } .box-inline-axis{ -moz-box-orient: inline-axis; -webkit-box-orient: inline-axis; box-orident:inline-axis; } .box-block-axis{ -moz-box-orient: block-axis; -webkit-box-orient: block-axis; box-orident:block-axis; } </style></head><body><div class="box box-horizontal"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box-vertical"> <div>1</div> <div>2</div> <div>3</div> <div>4</div></div><div class="box box-inline-axis"> <div>1-1</div> <div>2-1</div> <div>3-1</div> <div>4-1</div></div><div class="box box-block-axis"> <div>1a</div> <div>2a</div> <div>3a</div> <div>4a</div></div></body></html>3.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin:0; padding: 0; } body>div{ border:1px solid #0055cc; margin: 20px; padding: 10px; } div > div{ border:1px crimson #f36; } .box{ display:-moz-box; display: -webkit-box; display: box; } .box-horizontal{ -moz-box-orient:horizontal; -webkit-box-orient: horizontal; box-orient:horizontal; width:250px; } .box-vertical{ -moz-box-orient: vertical; -webkit-box-orient: vertical; box-orient:vertical; height:250px; } .box-direction-reverse{ -moz-box-direction: reverse; -webkit-box-direction: reverse; box-direction:reverse; } </style></head><body><div class="box box-horizontal"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box-vertical box-direction-reverse"> <div>1</div> <div>2</div> <div>3</div> <div>4</div></div><div class="box box-inline-axis"> <div>1-1</div> <div>2-1</div> <div>3-1</div> <div>4-1</div></div><div class="box box-block-axis box-direction-reverse"> <div>1a</div> <div>2a</div> <div>3a</div> <div>4a</div></div></body></html>4.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin: 0; padding: 0; } body>div{ border: 1px solid #0066cc; margin: 10px; width: 200px; height: 200px; } div > div{ border: 1px crimson #f36; padding: 10px; } .box{ display: -moz-box; display: -webit-box; display: box; -moz-box-pack: start; -webkit-box-pack: start; box-pack: start; -moz-box-align: start; -webkit-box-align:start; box-align:start; box-pack:start; -moz-box-lines:multiple; -webkit-box-lines:multiple; box-lines:multiple; } .box-horizontal{ -moz-box-orient: horizontal; -webkit-box-orient:horizontal; box-orient:horizontal } .box-vertical{ -moz-box-orient:vertical; -webkit-box-orient:vertical; box-orient:vertical; } </style></head><body><div class="box box-horizontal"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div> <div>H</div> <div>1</div> <div>2</div> <div>3</div></div><div class="box box-vertical"> <div>A1</div> <div>B1</div> <div>C1</div> <div>D1</div> <div>E1</div> <div>F1</div> <div>G1</div> <div>H1</div> <div>11</div> <div>21</div> <div>31</div></div></body></html>5.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> .box{ width: 500px; height: 200px; margin:20px; border:1px solid #ccc; font-size:20px; font-weight: bold; color:#fff; } .box-item{ background-color: #6bb2ff; } .box,.box3 > div{ padding: 10px; } .box div:nth-child(1){ background-color: #819321; line-height: 50px; } .box div:nth-child(2){ background-color: #168929; line-height: 50px; } .box div:nth-child(3){ background-color: #197332; line-height: 50px; } .box div:nth-child(4){ background-color: #390289; } .box div:nth-child(5){ background-color: #702356; } .box{ display: -webkit-box; display:-moz-box; display:box; -webkit-box-align: start; -moz-box-align: start; box-align:start; -webkit-box-pack:start; -moz-box-pack:start; box-pack:start; } .box-orient-vertical{ -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient:vertical; height: 400px; } .box3{ display: -webkit-box; display:-moz-box; display:box; -webkit-box-align: start; -moz-box-align: start; box-align:start; -webkit-box-pack:end; -moz-box-pack:end; box-pack:end; width:100px; } .box4{ display: -webkit-box; display:-moz-box; display:box; -webkit-box-align: start; -moz-box-align: start; box-align:start; -webkit-box-pack:center; -moz-box-pack:center; box-pack:center; background-color: #238692; width:100px; } .box5{ display: -webkit-box; display:-moz-box; display:box; -webkit-box-align: start; -moz-box-align: start; box-align:start; -webkit-box-pack:justify; -moz-box-pack:justify; box-pack:justify; background-color: #8f8f8f; width:100px; } </style></head><body> <div class="box box-pack-start"> <div class="box-item">box~~1</div> <div class="box-item">box~~2</div> <div class="box-item">box~~3</div> <div class="box-item">box~~4</div> <div class="box-item">box~~5</div> </div> <div class="box box-pack-start box-orient-vertical"> <div class="box-item">~~1</div> <div class="box-item">~~2</div> <div class="box-item">~~3</div> <div class="box-item">~~4</div> <div class="box-item">~~5</div> </div> <div class="box3 box-pack-start box-orient-vertical"> <div class="box-item">~~1</div> <div class="box-item">~~2</div> <div class="box-item">~~3</div> <div class="box-item">~~4</div> <div class="box-item">~~5</div> </div> <div class="box4 box-pack-start box-orient-vertical"> <div class="box-item">~~1</div> <div class="box-item">~~2</div> <div class="box-item">~~3</div> <div class="box-item">~~4</div> <div class="box-item">~~5</div> </div> <div class="box5 box-pack-start box-orient-vertical"> <div class="box-item">~~1</div> <div class="box-item">~~2</div> <div class="box-item">~~3</div> <div class="box-item">~~4</div> <div class="box-item">~~5</div> </div></body></html>6.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin: 0; padding: 0; } body{ color:#8f8f8f; font-size:20px; } .box-flex{ width:910px; background: gray; margin:100px; display:-webkit-box; display:-moz-box; display:box; } .box-flex p:first-child{ background: darkgreen; -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; } .box-flex p:last-child{ background: orange; -moz-box-flex:2; -webkit-box-flex:2; box-flex:2; } </style></head><body> <div class="box-flex"> <p> 我想吃一盘红烧肉~ </p> <p> 没有红烧肉,排骨我也很想吃~ </p> </div></body></html>
0 0
- CSS学习(十九)-CSS伸缩布局盒
- CSS学习(十九)-CSS伸缩布局盒
- CSS伸缩盒(旧)
- CSS伸缩盒(新)
- Html+CSS三栏式伸缩布局
- css伸缩布局盒flex属性 display:flex 详解
- CSS两列全屏可伸缩布局
- CSS(二十九)
- CSS学习笔记(四):CSS布局
- CSS(十九)
- CSS 定位 (Positioning)(十九)
- CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效
- 固定+自动伸缩——CSS布局技巧
- 学习CSS布局之一
- Css+Div布局学习
- DIV+CSS布局学习
- 学习CSS布局
- 学习css布局
- Problem B: 小数计算——结构体
- 数据挖掘里面机器学习算法的讲解2
- socket编程
- python 的常用时间操作,取得当前时间等
- R语言中的逐步回归函数
- CSS学习(十九)-CSS伸缩布局盒
- Linux(三)——ubuntu系统的网络配置
- FZU 2218 Simple String Problem(状态压缩DP)
- 欢迎使用CSDN-markdown编辑器
- 圣思园张龙-Java SE 第三讲(原生数据类型使用陷阱 Pitfall of Primitive Data Type)
- OOD - blackjack
- 在centos上建个google镜像站
- c语言在gcc中编译时使用sqrt报错的解决
- Partition List