盒模型

css处理元素时，认为每个元素在一个不可见的盒子中，这个盒子由内容区域、内边距(padding)、边框(border)、外边距(margin)组成

默认情况下，css元素的 width=内容区域宽度, height同

可以设置：box-sizing: border-box; 从而使css元素的 width=内容区域宽度+内边距宽度+边框宽度, height同

下面的两个盒子的各属性都相同，不同的是显示方式

默认盒子

超文本标记语言，标准通用标记语言下的一个应用。

设置box-sizing: border-box;

超文本标记语言，标准通用标记语言下的一个应用。

控制元素的显示类型和可见性

元素两种显示类型，一种是块级元素，一种是行内元素。块级元素会单独取行，行内元素不会，块级元素可以设置盒子的各个属性，而行内元素不行。另外两者混合的行内块元素也可以使用这些属性。

指定元素的显示方式
属性：display

值：block(块显示)、inline(行内显示)、inline-block(行内块显示)、none(隐藏, 不留空白)

控制元素的可见性
属性：visbility

值：hidden(隐藏, 留空白)、visible(显示)

设置元素宽度和高度

属性：width, height

值：px、em、rem、%、auto(自动计算，默认值)

设置内边距

属性：padding

值：px、em、rem、%

一个值：用于四边，即四边内距相同；
两个值：前一个值用于上下边，后一个值用于左右边；
三个值：第一个用于上边，第二个左右边，第三个下边；
四个值：按顺时针方向分别用于上、右、下、左
还可以使用padding-top、padding-right、padding-bottom、padding-left单独为四边设置

设置边框

设置边框风格
属性：border-sytle

值：none(无, 默认值)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(槽线)、ridge(脊线)、inset(凹边)、outset(凸边)

设置边框宽度

属性：border-width

值：长度值

设置边框颜色

属性：border-color

值：颜色名、十六进制值、rgb、rgba、hsl、hsla、

同时设置
输入border
如果需要，输入-top、-bottom、-left、-right，只设置某一边框
如果需要，输入-style、-width、-color，只设置边框的单个属性
输入冒号
若没有设置了3，则可以同时依次设置宽度、风格、颜色；若设置了3，则只能设置相对应的值
border-width、border-style、border-color都可以接受一到四个值，规则同设置内边距。

设置外边距

属性：margin

值：px、em、rem、%、auto

可以接受一到四个值，规则同设置内边距。

可以使用margin-top、margin-right、margin-bottom、margin-left设置某一边外边距。

ps:当em值用于内边距和外边距时，值是相对于元素的字体大小的，而不是相对于父元素的大小。

控制元素浮动

1. 设置浮动
   属性：float
   值：left、right

2. 清除浮动
   属性：clear
   值：left、right、both、none

注意设置浮动会让元素脱离文档流。

定位元素

使用position属性定位元素，取值有：

• static：默认属性。以文档流方式显示元素，不能使用top、left、bottom、right`属性进行定位。
• absolute：相对于最近设置过非 position: static; 的祖先元素，若这样的祖先元素不存在，则相对于文档进行定位。
• relative：相对以文档流方式显示的位置进行定位，元素未脱离文档流，原位置会被保留。
• fixed：相对于浏览器窗口进行定位，位置固定，不会随着文档滚动。
  设置非static的元素使用top、left、bottom、right属性进行定位, 可以通过设置static恢复默认位置。

可以通过top和bottom属性设置元素的高度、left和right属性设置元素的宽度。

第三维定位元素

属性：z-index

值：默认值为0，可以是正或负的整数, 值越大，元素在堆中越高, 此属性只对定位过的元素起作用。

注意此属性只能对同一个容器下的元素使用。

垂直对齐元素

属性：vertical-align

值：baseline(对齐父元素的基准线)、middle(在父元素中央)、sub(父元素下标)、super(父元素上标)、text-top(对齐父元素顶部)、text-bottom(对齐父元素底部)、top(对齐该行最高元素)、bottom(对齐该行最低低素)、%(行高的百分比)、n(值, px或em，下移n)

设置鼠标指针

属性：cursor

值:

1. 手指
2. default 默认(箭头)
3. crosshair 十字
4. move 移动状态
5. wait 等待状态
6. help 帮助
7. text 文字
8. progress 进程
9. auto 自动
10. x-resize 双向箭头, x是其中一个箭头方向，如e(东)、s(南)、w(西)、n(北)、还可以两个组合：nw等