盒子模型
概念：万物皆盒子，把页面中所有元素都抽象成盒子，盒子是有空间的，就可以进行布局
作用：对元素进行像素级调整（精准布局）
分类：
行盒：行级元素-不能独占一行，宽高由内容决定
块盒：块级元素-独占一行，设置宽高有效果。
如果不设置宽度，默认跟父元素一样宽
如果不设置高度，默认由内容撑开
display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。
形式上，display 属性设置元素的内部和外部的显示类型。
设置 display 不同属性：
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
块元素之所以独占一行，就是因为它有display: block;
块转行 display: inline;
块转行内块:display: inline-block;
inline-block：块转行内块:兼顾了行块元素的特点，可以设置宽高，也能在一行显示
a标签是行内元素，需要设置宽高，转块，
又因为这些标签需要在一行显示，转行内块
CSS书写规范
- 布局属性：display
- 宽高等尺寸属性
- 辅助背景样式 background
- 盒子模型样式（边框border，内边距，外边距）
- 其他样式（字体，文本，行高，对齐方式）
- 点缀样式（圆角，阴影）
行内块布局弊端
元素换行会有间隙；不换行，代码可读性差
组成
边框，内边距，外边距
边框border
边框border
width 宽度
style 样式
color颜色
连写：bd：w s c
border-width
设置或检索对象的边框宽度。
属性设置一个元素的四个边框的宽度，此属性有一到四个值
1，上下左右宽
2个值，1上下，2左右
3个值，1上，2右，3下，左和右对称
4个值，上右下左依次赋值。
规律，从上开始顺时针赋值，某一边没有赋值，则看对面的值
border-style
设置或检索对象的边框样式。
border-style 设置或检索对象的边框样式。
border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。
规律同上
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
border-color
置或检索对象的边框颜色。
border-radius
允许你设置元素的外边框圆角。4个取值，顺序从左上角开始，某角没有看对面
画圆：圆角值为宽高相同的数值的一半
单一方向上的边框
格式
border + 方位词
应用场景——替代hr水平线，或者分隔线。
内边距padding
概念：设置边框和内容区域之间的距离
取值：可以是1-4个取值，顺时针赋值，如果某一边没有赋值，看对面
单一方向——**padding-方位词
盒子尺寸
200*200的盒子，添加边框和内边距后变成了240*240
盒子的最终宽度 = 左边框宽度+左内边距+内容区域宽度+右内边距+右边框宽度
解决：手动内减40px
自动内减box-sizing
属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
border-box 告诉浏览器：你想要设置边框和内边距的值是包含在width内的
给每个元素设置这个属性，防止设置样式自动撑大盒子
注：border-box 不包含margin
特殊情况
给有父元素的子元素添加左右内边距，子元素没有被撑大。不会超过父元素
子元素，没有设置内容区域宽度，设置内边距后，浏览器会自动帮我们减去内容区域宽度
外边距详解
外边距margin
概念：设置盒子与盒子之间的距离
取值：1-4个取值，顺时针方向赋值，没有赋值的边看对面
因为body默认有一个8像素的外边距，有时候为了精准布局，需要清除body默认外边距
<style>
body {
margin: 0;
}
</style>
外边距也按照上右下左顺序设置
单一方向边距：margin+方位词
清除内外边距
浏览器会设置默认margin和padding，项目开始前会清除默认样式
例如：body的默认margin；p标签默认的上下margin；ul标签默认的上下margin和padding-left
p标签的默认样式
p {
display: block;
margin-block-start: 1em; //相当于margin-top
margin-block-end: 1em; //相当于margin-button
margin-inline-start: 0px; //相当于margin-left
margin-inline-end: 0px; //相当于margin-right
}
京东的处理方式（比较好写）
* {
margin：0;
padding:0;
}
淘宝的 处理方式(比较精细)
blockquote，body………………tr,ul {
margin：0;
padding:0;
}
写一个无序列表导航栏
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none; /* 去掉小圆点 */
}
ul li {
display: inline-block;
/* height: 60px; */
/* padding: 0 20px; */
}
/* 设置li中a标签的样式 */
ul li a {
display: inline-block;
color: white;
background-color: plum;
text-align: center;
text-decoration: none;
line-height: 60px;
padding: 0 20px;
}
ul li a:hover {
background-color: rgb(165, 246, 118);
}
</style>
外边距情况分析
外边距正常
水平排布的盒子，左右margin正常，互不影响
最终二者的间距为左右margin之和。
外边距合并
垂直排布的盒子，上下margin
最终间距为二者中的较大值
解决：只需要给其中一个盒子设置margin即可
外边距塌陷
互相嵌套的块级元素，给子元素设置margin-top，会导致父元素一起往下移动
因为父子元素的margin-top是贴在一起的，给子元素设置margin-top，会作用在父元素上，导致二者一起塌陷
解决方法：让父子元素，外边距有东西分隔。
解决方式
border-top: 1px solid green;
padding-top: 1px;
overflow: hidden;
display: inline-block;
float: left;
文档流
标准流
概念：浏览器默认采用的一套排版规则，规定了元素是如何排布的
规则：
块级元素，从上往下，垂直排布，独占一行
行级元素：从左往右，水平排布，不能独占一行只有上一行空间不足，才会另起一行
浮动
一种布局方式，让元素漂浮起来，这样可以实现块级元素水平排布的效果
早期用于图文混排
现在主要用于页面布局（个人简历，小米商城官网）
float主要用于将多个元素排列在同一行
需要给浮动的元素的父元素设置高度
语法：float
float属性指定一个盒子（元素）是否应该浮动。
注意： 绝对定位的元素忽略float属性！
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
清理浮动
浮动元素结束后加上一个空的清理标签
.ul-list:after {
content: ' ';
clear: both;
overflow: hidden;
display: block;
}
如果给元素加了边框，可以规定一个box-sizing：border-box；来解决浮动会有的宽度超出掉下来的问题
display:flex
当我们给一个容器设置了display:flex的时候，在宽高不写的情况下
1.主轴为水平轴（flex-direction:row），宽度由内容决定，高度由父容器决定
2.主轴为垂直轴（flex-direction:column），宽度由父容器决定，高度由内容决定
display
属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。
形式上，display 属性设置元素的内部和外部的显示类型。
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。可以用来设置隐藏元素 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
