前端基础回顾
四、CSS页面布局
01浮动
02高度塌陷
03position
04弹性盒子
正文：
01浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.通过浮动可以使一个元素向其父元素的左或右侧移动
2.使用float属性来设置元素的浮动
可选值：
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
注意：元素设置浮动后，水平布局的等式不需要强制成立；
元素设置浮动后，会完全从文档流中脱离，不再占用文档流的位置，
所以元素下边的还在文档流中的元素会自动向上移动
3.浮动的特点
（1）浮动元素会完全脱离文档流，不再占据文档流中的位置
（2）设置浮动以后元素会向父元素的左侧或右侧移动
（3）浮动元素默认不会从父元素中移出
（4）水平方向：浮动元素向左或向右移动时，不会超过HTML结构中位于它前面的其他浮动元素
（5）垂直方向：浮动元素不会超过HTML结构中位于它前面的其他浮动的兄弟元素，最多最多就是和它一样高
（6）如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移，
没有设置浮动的元素相当于一道墙，并且浮动元素只是控制元素的左右移动
（7）浮动元素不会盖住文字，文字会环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕效果
4.简单总结
浮动目前来讲他的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。
5.脱离文档流的特点：（不是浮动独有的特点）
块元素：
a.不再独占页面一行
b.宽度和高度默认被内容撑开
行内元素：
a.变成块元素，可以设置宽高
b.不再独占页面一行
c.宽度和高度默认被内容撑开
总：脱离文档流后，块元素和行内元素一样，不再区分。
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
/*这里给父元素开启BFC后，会将父元素和其他元素隔开*/
overflow: hidden;
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
/*此时在为子元素设置垂直方向的外边距时，只会对子元素起作用，而不会再传递给父元素*/
margin-top: 100px;
}
</style>
</head>
<body>
<!--
一、高度塌陷问题
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，会完全脱离文档流，子元素将无法撑起父元素，导致父元素高度丢失。
父元素高度丢失后，其下的元素会自动上移，导致页面布局混乱。
二、解决高度塌陷问题的方法（BFC）
1.BFC(Block Formatting Context)
块级格式化环境，是一个CSS中隐含的属性，可以为一个元素开启BFC，开启BFC后，该元素会变成一个独立的布局区域
2.元素开启BFC后的特点
（1）不会被浮动元素所覆盖
（2）开启BFC的子元素和父元素外边距不会重叠
（3）可以包含浮动的子元素
3.可以通过一些特殊方式来开启元素的BFC
（1）设置元素的浮动（不推荐）
（2）将元素设置为行内块元素（不推荐）
（3）将元素的overflow属性设置为一个非visible的值：overflow：hidden
scroll(会有滚动条) auto hidden
（4）clear属性
作用：清除浮动元素对当前元素所产生的影响
可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
auto 清除；两侧中最大影响的那侧
原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
（5）::after
eg:
.box1::after{
content:'';
display:block;
clear:both;
}
三、clearfix
以下代码可以同时解决高度塌陷和外边距重叠问题，
再遇到这些问题时，可以直接使用clearfix这个类
.clearfix::before
.clearfix::after{
content:'';
display:table;
clear:both;
}
-->
<div class="box1">
<div class="box3"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
一、定位
1.定位是一种更加高级的布局手段
2.通过定位可以将元素摆放到页面的任意位置
3.通过position属性来设置定位
可选值
static 默认值，元素是静止的，没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
二、相对定位
1.当元素的position属性值设置为relative时则开启了元素的相对定位
2.相对定位的特点：
（1）元素开启相对定位后，如果不设置偏移量元素不会发生任何变化
（2）相对定位是参照于元素在文档流中的位置进行定位的
（3）相对定位会提升元素的层级（高于浮动）
（4）相对定位不会使元素脱离文档流
（5）相对定位不会改变元素的性质，是块还是块，是行内还是行内
三、绝对定位
1.当元素的position属性值设置为absolute时则开启了元素的绝对定位
2.绝对定位的特点：
（1）元素开启绝对定位后，如果不设置偏移量元素的位置不会发生任何变化
（2）绝对定位是参照于包含块进行定位的
（3）绝对定位会提升元素的层级
（4）绝对定位会使元素脱离文档流
（5）绝对定位会改变元素的性质，行内变成块，块的内容被内容撑开
包含块：
正常情况下：
包含块就是离当前元素最近的祖先块元素
绝对定位的包含块：
离他最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素HTML就是他的包含块
HTML（根元素、初始包含块）
四、固定定位
1.当元素的position属性值设置为fixed时则开启了元素的固定定位
2.固定定位也是一种绝对定位，所以固定定位大部分特点和绝对定位一样，
唯一不同的是固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随网页的滚动条滚动
绝对定位和固定定位的区别其实就是包含块不同，绝对定位的包含块是离他最近的开启了定位的祖先元素或HTML元素，固定定位的包含块就是浏览器视口。
五、粘滞定位（兼容性差，不常用）
1.当元素的position属性值设置为sticky时则开启了元素的粘滞定位
2.粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定，例如：网页的广告、导航条
eg:.nav{
position:sticky;
top:10px;//意思是在离body上边10px处，即使滚动条滚动，导航条也不动。
}
六、偏移量（offset）
1.元素开启定位以后，可以通过偏移量来设置元素的位置
top
定位元素和定位位置上边的距离
bottom
定位元素和定位位置下边的距离
定位元素垂直方向的位置由top和bottom两个来控制，通常会使用其一
top值越大，定位越向下移动
bottom值越大，定位越向上移动
left
定位元素和定位位置左边的距离
right
定位元素和定位位置右边的距离
定位元素水平方向的位置由left和right两个来控制，通常会使用其一
left值越大，定位越向右移动
right值越大，定位越向左移动
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
height: 600px;
background-color: red;
display: flex;
/*flex-direction: column;*/
}
li{
flex-grow: 1;
/*flex-shrink: 1;*/
width: 200px;
background-color: yellow;
}
li:nth-child(2){
background-color: orange;
}
li:nth-child(3){
background-color: blue;
}
</style>
</head>
<body>
<!--
一、flex(弹性盒、伸缩盒)
1.是css中又一种布局手段，它主要用来代替浮动来完成页面的布局
2.flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
3.两个概念
弹性容器
要使用弹性盒，必须先将一个元素设置为弹性容器
我们通过display来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
弹性元素
弹性容器的子元素是弹性元素（弹性项）
弹性元素可以同时是弹性容器
二、弹性容器
1.flex-direction 指定容器中弹性元素的排列方式
可选值：
row 默认值，弹性元素在容器中水平排列（主轴：左向右）
row-reverse 弹性元素在容器中反向水平排列（主轴：右向左）
column 弹性元素纵向排列（主轴：自上向下）
column-reverse 弹性元素反方向纵向排列（主轴：自下向上）
主轴：弹性元素的排列方向称为主轴
侧轴：垂直于主轴
2.flex-wrap 设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向自动换行
3.flex-flow （flex-direction和flex-wrap的简写属性）
eg: flex-flow:row wrap;
4.justify-content（如何分配主轴上的空白空间/主轴上的元素如何排列）
可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素之间
space-evevly 空白分布到元素单侧（兼容性不好）
5.align-items（元素在辅轴上如何对齐）
可选值：
stretch 默认值，将元素的长度设置为相同的值
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 元素不会拉伸，沿着辅轴终边对齐
center 元素不会拉伸，居中对齐
baseline 基线对齐
6.弹性元素居中对齐：
display:flex
justify-content:center
align-items:center
7.align-content（如何分配辅轴上的空白空间/辅轴上的元素如何排列）
可选值：
flex-start 元素沿着辅轴起边排列
flex-end 元素沿着辅轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素之间
space-evevly 空白分布到元素单侧（兼容性不好）
三、弹性元素
1.flex-grow（默认值：0 不伸展）
指定弹性元素的伸展系数（当父元素有多余空间时，子元素会按照比例进行分配）
2.flex-shrink（默认值：1 等比例收缩）
指定弹性元素的收缩系数（当父元素空间不足以容纳所有子元素时，子元素会按比例进行收缩）
3.flex-basis
指定元素在主轴上的基础长度
如果主轴是横向的，该值指定的就是元素的宽度
如果主轴是纵向的，该值指定的就是元素的高度
默认值是auto，表示参考元素自身的宽度或高度
如果传递了一个具体值，则以该值为准
4.flex
属性值顺序：增长 缩减 基础
可选值：
initial（相当于 flex：0 1 auto）
auto（相当于 flex：1 1 auto）
none（相当于 flex：0 0 auto，弹性元素没有弹性）
5.order
决定弹性元素的排列顺序
6.align-self
用来覆盖当前弹性元素上的align-items，相当于弹性容器的align-items，只不过它只作用于当前弹性元素
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
2203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
