浮动布局 用来解决块元素在x轴上的排列问题
float(如果一个元素添加float属性，那么这个元素就会成为一个浮动元素)
1.取值：
left 向左浮动
right 向右浮动
none 不浮动
inherit 浮动方式继承父元素
2.浮动元素的特点
1）当一个元素是浮动元素时，会失去了对父元素的支撑(父元素没高度了)
解决办法(清除浮动)
(1)给父元素添加overflow:hidden;
(2)使用伪元素选择器
父元素使用::after{clear:both;}
2)脱离文档流
特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其他元素抢占）
3.默认文档流
特点：
1）元素显示的顺序和代码的顺序是一致的
2）块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度或子元素所决定。
3）行内元素与其他元素共享一行空间，默认宽高由其内容所决定。
<body>
<div class="top">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
<style>
.one,
.two,
.three {
width: 300px;
height: 100px;
}
.one {
background-color: teal;
float: left;
}
.two {
background-color: pink;
float: left;
}
.three {
background-color: lightcoral;
float: right;
}
</style>定位布局 position
取值：
· static 静态（默认） 非定位元素
· relative 相对定位 定位元素 ！
相对的是元素原先的位置
不脱离文档流
可以覆盖在其他元素上
· absolute 绝对定位 定位元素 ！
相对的是距离它最近的父定位元素(既是父元素又是定位元素！)的位置
如果没有父定位元素，那么它相对于浏览器视口
脱离文档流
（给它的父元素设置position:relative; 父元素相对与它是静止的 它脱离文档流可以动了）
· fixed 固定定位 定位元素 ！
相对于浏览器视口
脱离文档流
不会随着浏览器的滚动而滚动
· sticky 粘滞定位 定位元素 ！ (margin=0)
不脱离文档流
使用top/right/bottom/lef设置一个过渡点，当超过这个过渡点的时候就会体现fixed固定在页面上
！！！！!脱离文档流的特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其他元素抢占） ！！！！！
！！！！！只有定位元素才可以使用top、right、botoom、left、z-index 这些属性！！！！！
/* 粘滞定位 */
<body>
<div class="top">top</div>
<div class="nav">nav</div>
<div style="height: 1000px;"></div>
</body>
<style>
.top {
height: 60px;
background-color: #333;
font-size: 28px;
color: #fff;
text-align: center;
line-height: 60px;
}
/* */
.nav {
width: 100%;
height: 68px;
background-color: teal;
color: #fff;
font-size: 28px;
text-align: center;
line-height: 68px;
position: sticky;
top: 0px;
}
</style>flex布局(伸缩盒布局)
1.比较：
1) 传统布局：
兼容性好
布局繁琐
局限性，不能在移动端很好的布局
不能自适应
2)flex弹性布局（伸缩盒布局）：
操作方便，布局及为简单，移动端应用很广泛
PC端浏览器支持情况较差
IE11或更低版本，不支持或部分支持
2.原理
任何一个容器都可以指定为flex布局
采用LFlex布局的元素，称为Flex容器，他的所有子元素称为Flex项目
容器默认存在两根轴：水平的主轴和垂直的交叉轴
当我们为父盒子设为flex布局后，子元素的float、clear属性即将失效！！！！
给父元素（容器）设置display：flex，达到控制子元素（项目）的目的！！！！
3.核心概念：主轴 交叉轴 伸缩盒容器 伸缩盒元素
4.常见父项(容器)属性
1) flex-direction：设置主轴的方向
取值：
row(默认值):主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
2）justify-content：设置主轴上的子元素排列方式
取值：
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐，项目之间的间隔都相等
space-around:每个项目两侧间隔相等，所以，项目之间间隔比项目与边框的间隔大一倍
3）flex-wrap：设置子元素是否换行
取值：
nowrap(默认):不换行
wrap:换行，第一行在上方
wrap-reverse:换行，第一行在下方
4）align-content：设置侧轴上的子元素的排列方式（多行）
取值：
flex-start:与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间平均分布
space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值)
5）align-item：设置侧轴上的子元素排列方式（单行）
取值：
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch（默认值）：如果项目没设置高度或设auto，将占满整个容器
6）flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
5.项目(父元素中的块)的属性
order 排列顺序！
该属性定义了项目的排列顺序，数值越小，排列越靠前，数值越小，排列越靠前，默认0
order:1;
flex-grow 放大比例！
该属性定义了项目的放大比例，默认0，即如果存在剩余空间，也不放大
flex-grow:2;
flex-shrink 缩小比例！
该属性定义了项目的缩小比例，默认为1，即如果剩余空间不足，该项目将缩小
flex-basis 长度单位px
该属性定义了在分配多余空间之前，项目占据的主轴空间
flex
flex-grow、flex-shrink、flex-basis的速写形式
<body>
<div class="main">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
<style>
.main{
display: flex;
/* 两端的值是项目距离的一半 项目间距离相等 */
justify-content: space-around;
}
.main div{
width: 300px;
height: 60px;
background-color: teal;
margin-bottom: lem;
}
</style>
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
