css总结之盒子模型/链接/尺寸/定位/浮动/溢出/光标

盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
这四个链接状态是：

1. a:link - 正常，未访问过的链接
2. a:visited - 用户已访问过的链接
3. a:hover - 当用户鼠标放在链接上时
4. a:active - 链接被点击的那一刻

外边距

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

内边距

属性	说明
padding	使用简写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

margin, padding简写方式：
一个值，指的是四边
二个值，指的是上下，左右
三个值，指的是上，左右，下
四个值，指的是上，右，下，左

尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

定位

position 属性指定了元素的定位类型。
position 属性的五个值：

属性值	说明
static	默认值 没有定位
relative	相对于原本的位置的定位，相对定位
fixed	相对浏览器窗口的定位，固定定位
absolute	相对于最近的已定位的父元素定位，没有父元素，则相对html，绝对定位
sticky	基于用户的滚动位置来定位，粘性定位

属性	说明
bottom	定位元素的下边距
left	定位元素的左边距
top	定位元素的上边距
right	定位元素的右边距

浮动

属性	说明
clear	清除浮动：left, right, both, none ，本身有用，不影响其他元素
float	浮动：left, right, non

清除浮动的副作用（父标签塌陷问题）
主要有三种方式：

1. 固定高度
2. 伪元素清除法
3. overflow:hidden

伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

溢出

overflow 设置当元素的内容溢出其区域时发生的事情。
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

脱离文档流：
　　绝对定位,固定定位
不脱离文档流：
　　相对定位

层叠顺序

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

光标

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。