弹性布局
浮动+百分比布局
Flex布局
悬浮+百分比布局
百分比布局
浮动+百分比布局好处
网页内容宽度自适应
多设备都适用
Flex布局
1.Flex布局是在CSS3中引入，被叫做弹性盒模型
2.该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间
3.Flex布局功能
在屏幕和浏览器窗口大小发生改变时，可以灵活的调整布局
控制元素在页面的布局方向
按照不同于DOM所指定排序方式对屏幕上的元素重新排序
4.Flex布局的优势
可以让盒子里面的元素排在一行
盒子里面的元素是高度相同
Flex布局语法
语法：
display:flex;
Flex属性
常用属性
属性 说明
flex 伸缩性
flex-direction 伸缩流方向
flex-wrap 伸缩换行
justify-items 主轴对齐
align-items 侧轴对齐
伸缩性flex
语法：
flex:1; 伸缩值为1，标识宽度占父级余空间的一份
伸缩性flex
部分CSS3属性在浏览器下的兼容方式，需要给元素加前缀
伸缩流方向flex-direction
语法：
伸缩流方向flex-direction
row：默认值元素从左到右排列
row-reverse：元素从右到左排序
column：元素从上到下排列
column-reverse：元素从下到上排序
伸缩换行flex-wrap
伸缩换行flex-wrap
nowrap：默认值 伸缩容器单行显示，伸缩项不会换行
wrap：伸缩容器多行显示，伸缩项目会换行
wrap-reverse：伸缩容器多行显示，伸缩项目会换行，且颠倒行顺序
主轴对齐justify-content
主轴对齐
flex-start：向一行的起始位置靠奇
filex-end：向一行的结束位置靠奇
center：想一行的中间位置靠奇
space-between：平均分布在行内，第一伸缩项目在一行的最开始最后一个伸缩项目在一行最重点
主轴对齐
侧轴对齐align-items
侧轴对齐align-items
flex-start：在侧轴起点的外边距紧靠该行在侧轴起始边
flex-end：在侧轴重点边的外边距紧靠该行在侧轴终点边
center：外边距盒在该行的侧轴上居中放置
stretch：默认值拉伸填充一个伸缩容器
baseline：根据一行文字的基线对齐
侧轴对齐align-items
响应式网页设计
响应式网页设计(RWD,Responsive Web Design)
由伊桑·马克特(Ethan Marcotte)提出
有三种已有的开发技术整合起来，并命名
弹性布局
弹性图片
媒体和媒体查询
响应式网页设计
媒体类型
在CSS2中常遇到的媒体类型是
All（全部）
Screen（屏幕）
Print（页面打印或打印预览模式）
实际上媒体类型不只这三种，W3C共列出10种媒体类型
10种媒体类型
媒体类型的引入方式
语法：
@media方式
@media方式
link方法
link方法
媒体特性
媒体特性
媒体特性语法
媒体特性语法
关键字
and：同时满足这两者时生效，到达限定范围
and
only：指定某种特定的媒体类型，可以用来排除不支持美媒体查询的浏览器
only
not：排除某种指定的媒体类型，即排除符合表达式的设备
not
网友评论