有哪几种布局方式
- 固定布局
- 浮动布局
- 响应式布局
- 流式布局
- 弹性布局
固定布局（定位布局）
定位:对元素进行精准的位置调整
position定位有四种方式:
1.static静态定位:默认的值,按照文档流结合元素自身的属性正常排布
2.relative相对定位
3.absolute绝对定位
4.fixed固定定位
要实现对应的定位效果,还需要配合着left,right,top,bottom四个属性才可以实现元素的定位。
静态定位的例子:
我们以后不会设置一个元素的定位方式为static.
相对定位的例子:
1.相对定位不会脱离文档流,会保留之前所在的位置.
2.相对定位的元素所移动位置的参考是其之前所在的位置.
绝对定位的例子:
1.绝对定位的元素会脱离文档流,不保留之前的位置,如果
多个元素都绝对定位,则看书写顺序,谁写的晚,先显示谁.
2.绝对定位的元素所移动的参考位置是离其最近的设置了
非static定位属性的父级元素.如果所有的父级都没有
设置非static定位属性,则该元素相对于整个文档(document)定位.
固定定位例子:
1.固定定位的元素会脱离文档流,不保留之前自己的位置
2.固定定位的元素所移动的参考位置是相对于整个文档(document)定位的.
浮动布局
使元素脱离文档流。
文档流: 是文档中显示对象所处的位置(我们在设计网页时,按照的是从左到右,从上到下的元素布局顺序)
浮动的概念
1.使用场景:用于页面布局,特别是块与块之间复杂的横向布局
2.使用inline-block布局有什么弊端:
- a.改变元素原有的特性
- b.低版本ie不支持inline-block属性
浮动的特点
1.浮动只有左右浮动(left,right)
2.设置了浮动的元素,该元素的大小默认有内容撑出.
3.设置了浮动的元素可以设置宽高.(针对行元素)
4.浮动的元素,水平浮动,在父级的content的区域显示或者遇到另外一个浮动的元素
浮动元素所处的位置由上一个元素决定,如果上一个元素是左浮动,
那就看上一个元素的右侧有没有足够的位置放下该元素,
放得下,就在上一个元素的右侧显示,
放不下,另起一行显示;
同理,如果上一个元素是右浮动,
看上一个元素的左侧有没有足够的位置放下该元素,
放得下,就在上一个元素的左侧显示,
放不下,另起一行显示
5.浮动的元素脱离文档流,会影响后面的元素(后一个元素会被前一个浮动的元素所覆盖,但其上有文字,图片,不会被覆盖,使用该特性,可以做文字环绕效果)
6.块级元素设置了浮动之后自动(auto)margin失效
浮动造成的影响
1.元素浮动之后会影响其后面的元素，为了清除某个元素浮动给它后面的元素造成的影响,需使用clear属性。
clear:
1.left:清除设置了clear属性元素之前的元素左浮动的影响.
1.right:清除设置了clear属性元素之前的元素右浮动的影响.
1.both:清除设置了clear属性元素之前的元素左右浮动的影响.
1.清除浮动只是清除浮动造成的影响,并不会清除掉上一个元素的浮动效果
2.clear属性应该添加给被浮动影响的元素.
2.当父元素没有设置高度,则其高度由内容决定,此时如果父元素里的元素再发生浮动,则父元素会出现"内容塌陷"
解决办法:
1.给父级设置高度.(基本不用)
2.在浮动元素的后面加一个无内容的div标签并设置清除浮动.(建议使用第二个)
3.给父级添加overflow:hidden; 属性强制父级检测其内部的内容高度
响应式布局（媒体查询）
**媒体查询：**监听给定的设备的宽或者高,并设定临界值,可以处理达到临界值之后页面的布局或者元素的属性.
语法结构:
@media 监听的设备类型 and (设置的临界条件){
}
only screen 电脑, pad,手机
print:打印机
peech:读音设备(阅读器)
all:所有设备
媒体查询属于css语法,需要写在style标签里
流式布局（百分比布局）
html标签再往上是文档对象document,文档的宽高就是浏览器窗口的大小.窗口是可以伸缩的。
流式布局也叫百分比布局，
把元素的宽,高,margin,padding不再用固定数值,改用百分比,
这样元素的宽,高,margin,padding会根据页面的尺寸随时
调整已达到适应当前页面的目的.
百分比是基于元素父级的大小计算得来的。
元素的水平或者竖直间距都是相对于父级的宽度计算的(margin&padding)。
边框不能用百分比设置
弹性布局
如何开启弹性布局
语法：display:flex
注意:该元素内部的子元素的float,clear,vertical-align属性统统失效
概念
容器:开启了弹性布局的元素
弹性子元素:容器里的子元素
主轴:所有弹性子元素会从主轴的起点开始一直按顺序排布到主轴的终点
侧轴(交叉轴):与主轴垂直的轴
容器的属性
# 元素排布方向
flex-direction:主轴的方向
a.row(默认值):水平方向,从左往右
b.row-reverse:水平方向,从右向左
c.column:竖直方向,从上到下
d.column-reverse:竖直方向,从下往上
# 换行方式:
flex-wrap:
1.nowrap:不换行(默认)
2.wrap:会换行.换的行会在原来的下面.
3.wrap-reverse:换行,换行会在原来的上面.
# 弹性子元素在主轴上的对齐方式:
justify-content
1.space-between:两端靠边,其余元素的间距相等
2.space-around:所元素左右间距相等
3.flex-start:向主轴的起点对齐
4.flex-end:向主轴的终点对齐.
ps:flex-flow:flex-direction和flex-wrap的简写.
# 弹性子元素在侧轴上的对齐方式:
align-items:
1.flex-start:向侧轴的起点对齐
2.flex-end:向侧轴的终点对齐
3.center:向侧轴的中心点对齐
4.baseline:文字的基线对齐
5.stretch:如果弹性子元素不设置宽高,高度填满整个侧轴(默认值)
# 弹性子元素的属性
order:顺序数值,决定元素的排列书序,默认值为0.值越小位置越靠前,值相等,由
书写的顺序决定,写的早,靠前
flex-grow: 多余空间的分配比例,默认0,代表不使用多余空间.
flex-shrink:当空间不足时,收缩的比例,默认是1,当前数值为0代表空间不足也不缩放。
flex-basis:弹性子元素占主轴上的宽度,相等于width.该值用于计算主轴上是否还有剩余空间。
# 单独调整弹性子元素在侧轴上的对齐方式
align-self
1.center
2.flex-start
3.flex-end
auto值可以帮我们灵活的进行元素的布局
在盒模型中,只有width,margin可以使用auto作为其的值。
1.水平方向上,如果width,margin-left,margin-right三个值中某个值为auto，其余值必须为定值,auto=父元素宽度-剩余两个值
2.当三个值都为定值时,系统会强制丢弃margin-right的值
3.当margin-left和margin-right的值都为auto时,width必须给定值