CSS盒子模型(Box Model)
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
- 最终元素的总宽度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
- 元素的总高度最终计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 边框属性
CSS边框属性允许你指定一个元素边框的样式和颜色
边框样式
border-style属性用来定义边框的样式
边框宽度
通过 border-width 属性为边框指定宽度
指定宽度的两种方法：
指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
边框颜色
border-color属性用于设置边框的颜色
name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
例子：
边框-单独设置各边
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框 dotted
右边框 solid
底边框 double
左边框 dashed
border-style:dotted solid double;
上边框 dotted
左、右边框 solid
底边框 double
border-style:dotted solid;
上、底边框 dotted
右、左边框 solid
border-style:dotted;
- 四面边框是 dotted
border-style可以和border-width 、 border-color一起使用。
简写属性
border-width
border-style (required)
border-color
例子：border:5px solid red;
margin(外边距)
margin 清除周围的（外边框）元素区域。
margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
值：
Margin - 单边外边距属性
可以指定不同侧面的边距
简写
边距的属性：
padding（填充）
它是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
可能取的值：
侧面填充：padding-top、padding-bottom、padding-right、padding-left
简写属性：
CSS Position(定位)
该属性指定元素的定位类型。
position的五个值：
-
static（静态定位）
HTML 元素的默认值(没有定位)，遵循正常的文档流对象。不会受到 top, bottom, left, right影响。
-
relative
相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
其实就是相对原来的位置来移动，不以左上角为圆点的位置进行移动，而以自身的位置来进行移动。
-
fixed
位置相对于浏览器窗口是固定位置，即窗口是滚动的它也不会移动。
该属性定位的元素的位置与文档流无关（不占据空间，主要是以其自己的空间进行排布）
定位的元素和其他元素重叠（可以理解为不在同一面上，因此元素间会重叠起来）
-
absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
-
sticky(粘性定位)
基于用户的滚动位置来定位。(在 position:relative 与 position:fixed 定位之间切换)
当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位(relative)相同。
重叠的元素
z-index属性指定了一个元素的堆叠顺序，顺序可以为正为负。
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
CSS Float(浮动)
该属性会使元素向左或向右移动，其周围的元素也会重新排列。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。附近的元素将围绕它（文本流将环绕在它浮动相反方向处）
把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动（clear）
使用该属性为了避免周围元素会重新排列，clear属性指定元素两侧不能出现浮动元素（clear:both）其他的值left、right、both、none、inherit
资料：CSS
