首先要知道盒子模型
所有的HTML标签都是一个盒子,盒子会布置出不同的页面,但不同盒子的表现是不一样的,主要有两种盒子
1. block块级盒子,块级元素使用了盒子模型的所有特性
p,div,h1
1. 尽可能扩大可利用的空间 - 宽度会填满父元素
2. 独占一行
3. 有width和height属性
4. 使用 padding、margin 和 border 会影响其它元素的位置 -当改变元素自己的 padding 的时候，其它元素的位置也会发生变化
2. inline box行内盒子,行内元素只使用了盒模型的部分特性
span
1. 不会单行显示，除非一行没有足够多的空间，它会一个接一个地排列
2. width 和 height 属性不起作用
3. padding、margin 和 border 会起作用，但不会影响其它元素
3. 每种标签都有自己默认的显示方式,但可以通过 display 来修改标签的显示方式,例如把块级元素变成行内元素
display: inline;
display: block;
块级元素使用了盒子模型的所有特性，而行内元素只使用了部分特性。一个完整的盒子模型如下：
盒模型
margin（外边距）：它表示盒子之间的距离，可以通过 margin-top、margin-bottom、margin-left、margin-right 来控制各个方向的边距，它们可以为负值；
border（边框）：表示盒子的边框；
padding（内边距）：表示与内容之间的距离；
content（内容）：表示内容的大小；
盒子模型有两种模式(标准模式和诡异模式)，不同模式对于最终盒子的大小有所不同,默认情况下是标准模式,若设置了box-sizing: border-box则会变成诡异模式
标准模式:设置的 width 和 height 是 content 的宽高
盒子最终的宽 = 100+20+20+10+10 = 160px
.std-box {
width: 100px;
padding: 20px;
margin: 30px;
}
诡异模式:设置的 width 和 height 是盒子全部的宽高，也就是说内容 content 的宽需要减去 border 和 padding 的宽。
.std-box {
width: 100px;
padding: 20px;
border: 10px solid red;
margin: 30px;
box-sizing: border-box;
}
前端七大布局
默认布局是流式布局,只要不修改CSS的布局属性(display, float, position),那么HTML元素(每个元素都是一个盒子)就会按照默认的流式布局方式来摆放这些盒子
可以通过 float、position 和 diplay 来控制 HTML 元素该如何显示
同一个页面会有多种布局方式，衡量是不是一种好的布局是看它能不能在不同浏览器中正常显示，不同设备有没有错乱。目前网页设计遵循的规则是移动优先。
'一句总结'
'1. 流式布局'
默认布局,每个元素的布局顺序与代码的顺序一致
'2. position布局 -- position: relative;'
可以使元素脱离流式布局，放到指定位置,类似与iOS通过坐标来控制元素的显示位置
'3. float布局 -- float: right;'
适合做左右布局的样式,可以设置是从左边或从右边开始布局,是一个挨一个的布局
'4. flexbox布局 -- display: flex;'
通过行或者列来布局子元素
'5. grid布局 -- display: grid;'
可以同时布局行和列
'6. table布局 -- display: table;'
可以做表格样式。但现在几乎不用,做布局时它有很多缺点，比如调试难。
'7. muti-column布局'
多列布局，布局的时候需要告诉浏览器有多少列，或者列的宽度,几乎不用
HTML标签控制页面,CSS控制布局.一般只设置宽度(涉及到居中等), 高度是靠数据撑起来的
*是设置页面默认样式,默认间距为0,每个组件的间距以各自设置为主
*{
padding: 0;
margin: 0;
}
display:定义元素类型,none则不会显示,block块级元素前后带有换行符,inline内联元素,前后没有换行符
position:规定元素的定位类型.设置布局类型
border: 边框
padding:元素内边距,元素内部展示内容距离元素边缘的上下左右距离
margin:元素外边距,距离上下左右其他元素的距离
id: 只能用于一个元素
class:可以用于多个元素
div:块
span:行间样式
流式布局
默认的布局方式,一个个的盒子堆叠在一起
适合于「文档类型」的 UI，它类似于写一个 word 文档，从上到下，一行一行进行排列。可以修改行内某个文字的样式，修改行与行之间的间距。
主要有block和inline两种盒子
- 行内标签可以嵌套在块级标签中，反之则不可；
- 可以通过 display 修改标签属于块级标签还是行内标签；
- 块级类型的标签布局是每一个标签独占一行，而1行内标签会一个挨着一个进行布局；
position布局
- 使用 css 中的 position 属性,可以让元素脱离流式布局,比如让某个文字固定在网页中的某个位置
- 为了更方便地把某个元素放到指定的位置.,使其按照自己特有的方式进行布局. 它提供了多个值 relative、absolute、fixed、sticky
- 设置position的时候，自身层级已经提高了0.5，这时也可以设置z-index属性，设置层级。
position可以设置下面几个值
1. static: 默认值，它遵循流水布局
2. relative: 相对布局, position: relative 的作用就是在不打破流失布局的前提下，让元素移动到某一个位置。
「不会破坏」默认的流式布局, 原来的流式布局仍会空出它的位置
相对的基准是元素在流式布局的位置,会在原来位置的基础上,向你设置的方向偏移
- 关键点是「相对谁」,首先要确定元素的起点坐标是什么(起始位置就是元素在流式布局的位置)
- 然后通过 top、left、right、bottom 诉元素它距离起点坐标的位置,来修改元素的偏移位置
- 属性 top 和 bottom 、left 和 right 不能同时使用
3. absolute: 绝对布局, position:absolute 的作用是控制某个元素在「布局区域」的位置，通常对某个元素使用 position 属性（值不为 static）来限制子元素的活动范围。
「会破坏」默认的流式布局,原来的流式布局中没有它的位置
相对的基准是最近一个使用 position 不为 static 的父元素,会在祖先元素内按照设置布局的从新布局,absolute 会找一个参照物来作为一个起点,参照物是祖先元素的 postion 属性,如果祖先元素没有设置postion 属性,会依据 html 标签为参考
布局的关键点选择哪一个元素作为布局区域，如果元素的所有父元素均未设置 position 属性（值为 static），布局区域会选择可视区域。如果某个父元素使用了 position 属性（值不为 static），布局区域会选择这个父元素作为布局区域。这种效果有一种约束的感觉，会把子元素限制在父元素内部，不让其“乱跑”
1.如果未设置top、bottom、left、right ,他还在原来的位置,但其他元素的位置已经变成流式布局中没有他的位置的样子
2.top、bottom、left、right 可以同时使用，如果都设置为 0，此元素所有的父元素没有设置 position 属性时，它会填充满可视区域。如果它的父元素设置了 position 属性，它会填满父元素；
4. fixed: 会把元素固定在某个位置上,比如把标题始终固定到顶部，无论如何滑动都不会改变其位置。
5. sticky: 当滑动到某个位置时,让元素悬停在某个位置上
flexbox布局
display: flex;
弹性布局,它可以通过父元素来控制子元素如何布局
column的话,需要容器的高度大于所有 item 的高度才能看出效果
开发中常见的场景是，一个div中有两个元素a和b，a要固定宽度，b要自适应，这时会用flex属性，对a元素设置flex:0 0 固定宽度;即可
flex-container：布局容器，使用 display：flex 的标签；
flex-item: 容器中的直接子元素；
main-axis：主轴，布局方向为 row 或者 row-reverse 时它是水平方向。布局方向为 column 或者 column-reverse 时它是垂直方向。
cross-axis: 纵轴，与主轴垂直的轴；
main-start: 主轴的起点，布局方向为 row 时它的起点在左侧，row-reverse 为右侧。布局方向为 column 时起点在顶部，column-reverse 时起点为底部。
main-end: 主轴结束的点，与 main-start 相反；
cross-start: 纵轴的起点；
cross-end：纵轴的结束点，与 cross-start 相反；
会按照 row（行）或者 column（列）对容器中的子元素进行布局
如果想让某些元素使用 flexbox 布局，首先需要指定它的父元素为一个 flexbox 容器,容器具有一些属性决定子元素如何摆放。每个子元素也具有自己的属性来决定自己如何展示。它具有「弹性」,子元素会根据父元素的尺寸来决定自己该占用多大的空间
'1. 首先指定display: flex;'
一旦指定这个 CSS 属性，它将变成 Flex 容器（flex container），它的「直接子元素」即可通过 flex 布局属性来控制其显示方式，这些「直接子元素」被称为 flex-item
'2. 设置flex-container父元素属性 - 以「组」的形式来控制 item 的排列方式'
影响主轴方向的flex-direction
决定主轴items对齐方式的justify-content
决定纵轴items对齐方式的align-items
决定超出容器后items的显示方式的flex-wrap
direction和wrap合称的flex-flow
多行时，纵轴方向的对齐方式的align-content
flex-direction: 布局方向,它决定 flex-item 是从左到右、从右到左、从上到下、还是从下到上进行布局，它会影响主轴的方向，以及items 的布局起点位置。
row（默认）：从水平方向的左侧开始布局；
row-reverse：从水平方向的右侧开始布局；
column：从垂直方向的顶部开始布局；
column-reverse: 从垂直方向的底部开始布局；
justify-content: 决定「主轴」上items 的对齐方式
flex-start（默认）：与主轴的起始位置（main start）对齐；
flex-end：与主轴的结束位置（main end）对齐；
center：居中于主轴；
space-around: 左右边距是中间的 1/2；
space-evenly: 每个 item 的间距相等；
space-between: 左右无边距；
align-items: 决定「交叉轴」items 的对齐方式,flex-direction 会影响纵轴的方向，这一点需要注意，纵轴不一定是垂直方向，不能把 align-items 看做是控制垂直方向的对齐方式。它主要有以下几个值
flex-start（默认）：与纵轴的起始位置（cross start）对齐；
flex-end：与纵轴的结束位置（cross end）对齐；
center：居中与纵轴；
baseline：与基线对齐；
stretch：扩展满纵轴；
align-content: 如果存在多行，将对多行进行对齐，如果只有一行将不起作用，它会影响
flex-wrap: 决定 items 超出容器后该如何显示，是否要多行显示。如果为多行显示，可以把每行看做是一个容器，图中主轴对齐方式为 space-around，则每行对齐方式都为 space-around
nowrap（默认）：单行显示；
wrap：多行显示；
wrap-reverse：多行显示；
align-content: 如果为「多行」时，它表示在「纵轴」方向的对齐方式。它的值与 justify-content 值相同。
flex-flow: 它是 flex-direction 和 flex-wrap 的简写
'3. 设置flex-item子元素中属性 - 「单独」控制自己该如何显示'
order : 设置 item 的值可以改变它在 FlexBox 容器中的位置,控制显示顺序，默认值为 0，可以设置负数和整数。
align-self: 对齐方式，它默认继承自父元素的 align-items 值，可通过这个属性来修改这个值
'以下三个属性决定了 item 在「主轴」上的尺寸'
flex-basis ： 伸缩基准, 它表示 item 未扩展或收缩之前的宽度，可以理解为 item 未放入容器时该有的尺寸，默认值是 auto,它会影响剩余空间和不足空间的计算，它对 flex-grow 和 flex-shrink 有很大的影响
flex-grow: 扩展比例,占剩余空间的比例,当所有的 item 未占满容器的宽度时，item 该如何扩充自己以填满容器的剩余空间,但是item 增长会受 max-width 的影响，增长后的最大长度只能是 max-width。
flex-shrink : 收缩比例,当容器空间不足时该如何缩小子元素,当所有的 item 的宽度和大于容器的宽度，就会出现容器空间不足的情况，这时可以通过缩放比例来缩放每个 item 的宽度,但会受 min-content 的影响，也会受 min-width 的影响，缩到一定尺寸后它就不再进行缩放了。计算公式是flex-shrink * item基本尺寸(参见公众号)
flex: 它是 flex-grow、flex-shrink 和 flex-basis 的缩写。
flex： initial（默认值），等同于 flex：0 1 auto；
flex： auto，等同于 flex: 1 1 auto;
flex： none，等同于 flex: 0 0 auto;
flex： 1，等同于 flex: 1 1 0;
flex-item 的默认属性。
flex-grow：0，表示即使有剩余空间也不会扩展；
flex-shink：1，如果空间不足将会缩小；
flex-basis：auto，自动计算 item 的初始宽度，浏览器首先会看是否给 item 设置了宽度，代码中未设置则使用的是内容的宽度；
flex-basis 最终的值会以 flex-basis -> width->content size 的属性依次确定它的值。
🌰
span:nth-child(3) {
background-color: #FFC988;
order: -1;
}
grid布局 -- display: grid;
grid通常布局整个页面框架，框架内部使用 Flexbox 布局。
FlexBox 布局只能同时控制所有的行,但如果我们想第一行主轴对齐方式为 space-around,第 2 行元素的对齐方式为 flex-start,FlexBox 布局做不到,grid 布局可以轻松实现
grid 可以同时布局行和列，也就是说你可以指定一个容器是几行几列的
grid-template-rows: 设置行尺寸
grid-template-columns: 设置列尺寸
row-gap:设置行间隔
column-gap:设置列间隔
上面用到的
fr：是一个占比单位，占容器的比例；
repeat(n, size) : 重复多少次，大小是多大；
minmax(min, max) : 取值范围 >= min, <= max;
auto：根据浏览器决定大小；
'3. float布局 -- float: right;'
网友评论