布局
- table原始布局方式
- 网格布局（grid）
- 盒子模型（纵向）
- 浮动（横向）
- 定位
- 弹性盒子模型
table布局
网格布局（grid）
- 网格布局的方式和table类似
- 在网格布局，将网页分为了一行一行和一列一列的
- 通过对这些行和列的设置帮助我们完成布局
- 网格布局比较适用于复杂的布局
- 相较于弹性盒，无需设置多余的结构
- 结构简单，样式复杂
网格容器
要使用网格布局必须先设置网格容器
使用 display:grid 或 display:inline-grid
默认情况下，我们开启的是一个单列的网格布局
- grid-template-columns：用来设置网格布局的列数
- grid-template-rows：用来设置网格布局的行数
<div class="outer">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</div>
<style>
.outer{
width: 800px;
border: 10px #333 solid;
display: grid;
/*grid-template-columns: 100px 300px 200px 200px;*/
/*grid-template-columns: 100px 300px 100px auto;*/
/*grid-template-columns: 1fr 2fr 1fr 1fr;*/
/*
repeat() 来重复的设置
第一个值：
auto-fill 自动计算列，尽可能多的生成列
auto-fit 自动计算列，尽量让列可以容纳下所有元素
*/
grid-template-columns: repeat(2, 1fr 2fr);
/*grid-template-columns: 1fr 2fr 1fr 2fr;*/
grid-template-rows: 100px 200px 100px;
/*grid-template-columns: 100px 200px minmax(auto, min-content);*/
/*
minmax(最小值, 最大值)
- 用来设置行和列的大小
- 可选值：
像素、auto、min-content、max-content
*/
}
.box1{
background-color: tomato;
grid-column-start: 1;
grid-column-end: 2;
}
.box2{
background-color: #bfa;
grid-column-start: 2;
grid-column-end: span 3;
grid-row-start: 1;
grid-row-end: 3;
}
.box3{
background-color: greenyellow;
}
.box4{
background-color: orange;
}
.box5{
background-color: skyblue;
}
</style>
网格项
网格容器的子元素都会自动变为网格项
- grid-column-start:网格列的起始位置
- grid-column-end :网格列的结束位置
- grid-row-start:网格行的起始位置
- grid-row-end:网格行的结束位置
- grid-column:开始/结束 (同时设置列开始和结束)
- grid-row:开始/结束 (同时设置行开始和结束)
- grid-area:行开始/列开始/行结束/列结束(类似于坐标) （同时设置行列的开始和结束）
- grid-column-gap：列间距
- grid-row-gap：行间距
- grid-gap：行间距 列间距 （同时指定行间距和列间距）
对齐方式
一、网格项在轨道中的对齐方式:
-
justify-items:设置网格中元素水平方向的对齐方式
- start
- end
- center
-
align-items:设置网格中元素垂直方向的对齐方式
- start
- end
- center
二、单独设置某一个网格项在轨道中的对齐方式：
-
justify-self:网格项在轨道中水平方向的对齐方式
- start
- end
- center
-
align-self：网格项在轨道中垂直方向的对齐方式
- start
- end
- center
为网格线命名
- grid-template-columns一条条设置：
grid-template-columns: [a] 200px [b] 200px [c] 200px [d];
grid-template-rows: [head-row-start] 200px [head-row-end side-row-start] 200px [side-row-end] ;
-
grid-template-areas设置区域：
grid-template-areas: "hd hd hd hd" "sd main main ." "sd main main ." "ft ft ft ft" ;
网格项排列方式
-
grid-auto-flow：
- row 默认值，优先填充行，行满了会自动创建新行
- column 优先填充列，列满了会自动换到下一列，此时会自动生成行
- dense 紧凑的， 容器中有位置，后边的元素就会自动的补位
-
grid-auto-rows：指定自动行的大小
grid-auto-rows: 100px 200px 300px ; /*行高100px 200px 300px 100px 200px 300px如此交替*/
盒子模型
注：都能单独对每一个方向设置大小，如xxx-left、xxx-top等
-
height、width：是文本长与宽
-
padding：内边距
-
border：边框
border: 5px dashed red;-
border-width 用来指定边框的宽度
10px 20px 30px 40px 上 右 下 左
-
边框的样式：
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
-
-
margin：外边距，特性如下：
-
兄弟关系，两个盒子垂直外边距与水平外边距问题
- 垂直方向,外边距取最大值.
- 水平方向,外边距会进行合并处理
-
父子关系，给子加外边距，但作用于父身上了,怎么解决?
- 子margin-top===>父的padding-top，注意高度计算
- 给父盒子设置边框
- 加浮动
- overflow:hidden. BFC
-
-
显示居中：margin：0 auto（水平居中）
-
overflow:当子元素大小超过父元素内容区时，子元素会从父元素中溢出。 在css通过overflow这个样式，来处理溢出内容
-
overflow
-
设置元素如何处理溢出内容
-
可选值：
visible，默认值 溢出内容直接在元素以外的位置显示
hidden 隐藏溢出的内容
scroll 生成双方向滚动条，通过滚动条来查看完整内容
auto 根据需要生成滚动
-
-
浮动 float
浮动是一种传统的网页的布局方式，通过浮动可以使得元素脱离文档流而横向排列
可选值：
- none，默认值 元素不浮动
- left，向左浮动
- right，向右浮动
浮动的特点
-
设置浮动后，元素或脱离文档流，其后的元素会自动上移
-
块元素：
- 块元素不再独占一行，而是水平排列
- 宽度和高度都被内容撑开
-
行内元素
- 设置浮动行内元素可以设置宽度和高度
-
-
设置浮动后，元素会向其包含块的左侧或右侧移动
-
如果一行之内无法容纳所有的浮动元素，则后边的元素会自动换到下一行
-
浮动元素不会超过它上边浮动的兄弟元素，最多一边齐
-
浮动元素不会盖住文字，文字会环绕在浮动元素的周围
-
脱离文档流后，就不再需要区分行内和块
高度塌陷
在文档流中的元素，可以将其他元素的高度撑开。当元素浮动，它会脱离文档流，脱离文档流后，无法撑开父元素的高度，导致父元素高度塌陷。父元素高度塌陷，其后的元素会自动上移，导致布局变得混乱。
解决方法：
-
可以直接将父元素的高度写死。这样一来父元素高度写死，无法根据子元素高度的变化而变化。
-
BFC（Block Formatting Context，即块级格式化环境）
-
可以将BFC理解为一个隐藏的属性，当开启BFC后元素会具备如下的特征：
- 开启BFC后，子元素的垂直外边距不会传递给父元素(解决垂直外边距折叠的问题)
- 开启BFC后，元素不会被浮动元素所覆盖
- 开启BFC后，元素可以包含浮动的子元素
-
如何开启BFC：（需要用一些其他的样式来间接的开启BFC
- 浮动会开启元素的BFC
- 将overflow设置为一个非visible的值，eg.auto
- display: flow-root
-
-
clear:清除浮动元素对当前元素所产生的影响
- left 清除左侧浮动元素对当前元素的影响
- right 清除右侧浮动元素对当前元素的影响
- both 清除最大一侧浮动元素对当前元素的影响
-
clearfix：
- 解决高度塌陷：
.clearfix::after{ content: ""; display: block; clear: both; }<div class="box1 clearfix"> <div class="box2"></div> </div>-
解决垂直外边距折叠：
.clearfix::before{ content: ""; display: table; } -
同时解决高度塌陷和垂直外边距折叠：
.clearfix::before, .clearfix::after{ content: ""; display: table; clear: both; }
定位
通过定位可以讲=将一个元素放在页面中的任意位置
CSS中共有四种定位方式：
- 相对定位
- 绝对定位
- 固定定位
- 粘滞定位
position
-
用来设置元素的定位方式
-
可选值：
- static，默认值，元素没有开启定位
- relative，开启元素的相对定位
- absolute，开启元素的绝对定位
- fixed，开启元素的固定定位sticky，开启粘滞定位
相对定位
-将元素的position属性设置为relative则开启了元素的相对定位
-相对定位定位的特点：
- 开启相对定位而不设置元素的偏移量，此时元素不会发生任何变化
- 开启相对定位不会使得元素脱离文档流，不会改变元素的性质
- 相对定位元素是参照于其原来的位置进行定位的
- 相对定位会提升元素的层级
偏移量
开启了定位的元素可以通过偏移量来设置元素的位置，通常只使用两个即可定位一个元素的位置
- top：元素上边距离定位位置上边的距离
- bottom：元素下边距离定位位置下边的距离
- left：元素左边距离定位置左边的距离
- right：元素右边距离定位置右边的距离
绝对定位
将元素的position设置为absolute，则开启了元素的绝对定位
特点：
-
开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
-
开启绝对定位后，元素会脱离文档流，同时元素性质发生变化
-
绝对定位元素是参照于离它最近的开启了定位的祖先元素进行定位。（通俗讲）
- 如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位
- 所以在开发中，经常在为一个元素开启绝对定位后，同时也给它的父元素开启相对定位
绝对定位是参照于它的包含块进行定位的！（准确地讲）
-
绝对定位元素的包含块是谁？
- 绝对定位元素的包含块是离它最近的开启了定位的祖先元素
- 如果所有的祖先都没有开启定位，则它的包含块是初始包含块
- 初始包含块的大小和视口是相同
-
绝对定位会提升元素的层级
z-index
开启了定位后，可以通过z-index来设置元素的层级
z-index的值越大，元素的层级就越高，层级越高越优先显示
如果层级一样，则优先显示下边的元素
z-index可以设置为负值，设置负值后定位元素将会被文档流中的元素覆盖！
注意：
祖先元素的层级再高，也无法盖住后代元素
固定定位
将position设置为fixed则开启了元素的固定定位，
固定定位也是一种绝对定位，它的大部分的特点和绝对定位是相同的
不同点：
- 固定定位总是参照于浏览器的窗口进行定位。一旦定位，不会随窗口进行滚动
- 绝对定位是参照于浏览器的初始窗口进行定位。有滚动条时，会随窗口进行滚动
粘滞定位
将元素的position设置sticky则开启了元素的粘滞定位，
粘滞定位的特点和相对定位类似（不会脱离文档流）
定位参照物：
粘滞定位相对于离它最近的拥有滚动条祖先元素来定位的
.box1{
width: 1200px;
height: 40px;
background-color: tomato;
margin: 100px auto;
position: sticky;
top: 0;/*(当滚动到距离离它最近的拥有滚动条祖先元素的顶部为0时，粘滞；但一开始可能跟祖先元素的顶部不为0)*/
}
弹性盒模型
弹性盒是CSS3中新添加的布局方式，通过它可以更加方便完成我们对网页的布局
弹性容器
要使用弹性盒必须先将元素设置为弹性容器
- display:flex 块级弹性容器
- display:inline-flex 行内弹性容器
主轴
主轴就是弹性子元素排列方向
-
如何设置主轴方向：flex-direction：
- row 主轴是自左向右水平排列
- column 主轴是自上向下垂直排列
- row-reverse 主轴是自右向左水平排列
- column-reverse 主轴是自下向上垂直排列
-
设置元素是否换行:flex-wrap：
- nowrap 元素不会自动换行
- wrap 自动换行
- wrap-reverse 反向换行
-
flex-flow：（flex-direction 和 flex-wrap的简写属性）
可以同时设置两个样式并且没有顺序和数量的要求
-
设置元素在主轴上的对齐方式:justify-content
- start 默认值，元素靠主轴起始位置对齐
- end 元素靠主轴的结束位置对齐
- center 沿主轴方向居中对齐
- space-between 将主轴方向空白位置分配到两个元素之间
- space-around 将主轴方向空白位置分配到元素周围
- space-evenly 将主轴方向的空白分配到元素的一侧
-
设置元素在侧轴上的对齐方式:align-items
- stretch 拉伸，元素会自动拉伸将侧轴撑满
- start 元素靠侧轴的起始位置对齐
- end 元素靠侧轴的结束位置对齐
- center 元素在侧轴上居中对齐
-
设置元素在侧轴上空白空间的分配:
- space-between 将侧轴方向空白位置分配到两个元素之间
- space-around 将侧轴方向空白位置分配到元素周围
- space-evenly 将侧轴方向的空白分配到元素的一侧
ul{
display: flex;
width: 300px;
height: 800px;
border: 10px red solid;
/*flex-direction: row;*/
/*flex-wrap: wrap-reverse;*/
flex-flow: wrap row;
/*justify-content: space-evenly;*/
align-items: start;
align-content: space-evenly;
}
侧轴（辅轴）
侧轴是与主轴垂直方向的轴
弹性子元素（弹性项）
弹性容器的子元素都会自动变成弹性子元素
弹性子元素都会沿着弹性容器的主轴排列
-
flex-basis:弹性子元素的基础大小，会根据主轴的方向自动设置width或height(主轴水平，设置宽度;主轴垂直，设置高度)
- auto 默认值 以元素width或height为准
-
flex-shrin:弹性子元素的收缩系数
- 元素的收缩是根据flex-basis和flex-shrink综合计算的
- 收缩系数越大，元素基础大小越大，元素就缩的越多
- 默认值为1，可以根据需要设置，如果设置为则表示不收缩
-
flex-grow:弹性子元素的生长系数
- 当容器中有富余空间时，如果分配到子元素
- 默认值0，元素默认不会变大
-
flex:上述三个属性的简写属性
-
属性顺序:grow shrink basis
-
可选值：
- initial 默认值 0 1 auto
- auto 相当于 1 1 auto
- none 相当于 0 0 auto
-
li{
width: 100px;
line-height: 100px;
font-size: 50px;
color: #fff;
text-align: center;
/*flex-basis: auto;*/
/*flex-shrink: 1;*/
flex: none ;
}
- align-self：弹性子元素的样式，用来单独设置某个弹性子元素的对齐方式
- order：用来指定弹性子元素的位置
li:nth-child(1){
/*align-self: center;*/
background-color: #bfa;
order: 5;
}
li:nth-child(2){
background-color: orange;
order: 2;
}
