CSS

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

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

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

CSS