盒模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
css盒模型，包含元素内容content，内边距padding，边框border，外边距margin。
在这里插入图片描述

1. css内边距属性

元素的内边距在边框和内容之间。该属性不能为负值。
css内边距的属性：

属性	说明
`padding-top`	元素的上内边距
`padding-right`	元素的右内边距
`padding-bottom`	元素的下内边距
`padding-left`	元素的左内边距
`padding`	用一个声明定义所有内边距属性

指定一个值时该值指定四个边的内边距
指定两个值时第一个值指定上下两边的内边距第二个指定左右两边的内边距
指定三个值时第一个指定上边的内边距.第二个指定左右两边第三个指定下边
指定四个值时分别为上右下左（顺时针顺序）。

padding: 10px 10px 10px 10px;

2. css外边距的属性

属性	说明
`margin-top`	定义元素的上外边距
`margin-right`	定义元素的右外边距
`margin-bottom`	定义元素的下外边距
`margin-left`	定义元素的左外边距
`margin`	用一个声明定义所有外边距属性

margin: 20px 0px 0 -20px;

3. css边框的属性

指定的外边距允许为负数。margin的top和bottom属性对非替换内联元素无效，例如<span>和<code>。

属性	说明
`border-left-style`	左边框的样式属性
`border-left-width`	设置下边框的宽度属性
`border-left`	用一条声明定义所有左边框的属性
`border`	用一条声明定义所有边框的属性
`border-width`	一次定义4条边框的宽度
`border-color`	一次定义4条边框的颜色

边框的样式

边框样式

样式	说明
`none`	无边框效果
`hidden`	与none相同
`dotted`	点线边框效果
`dashed`	虚线边框效果
`double`	双线边框效果
`solid`	实线边框效果
`groove`	3D凹槽边框效果
`ridge`	3D凸槽边框效果

div {
		  border: 0.5rem outset pink;
		  outline: 0.5rem solid khaki;
		  box-shadow: 0 0 0 2rem skyblue;
		  border-radius: 12px;
		  font: bold 1rem sans-serif;
		  margin: 2rem;
		  padding: 1rem;
		  outline-offset: 0.5rem;
		}

在这里插入图片描述
css轮廓是绘制在元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。

属性	说明
`outline-style`	定义轮廓的样式属性
`outline-color`	定义轮廓的颜色属性
`outline-width`	定义轮廓的宽度属性
`outline`	同一个声明中定义所有的轮廓属性

布局属性

浮动，定位

1. css浮动属性

属性	说明
float	设置框是否需要浮动以及浮动方向
`clear`	设置元素的哪一侧不允许出现其他浮动元素
`clip`	裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则
`overflow`	设置内容溢出元素框时的处理方式，值：visible,auto,hidden,scroll
`display`	设置元素如何显示，值none,block,inline,inline-block,inherit
`visibility`	定义元素是否可见，visibility设置为隐藏，元素占用的空间依然会保留，但display:none不保留占用空间，值：visible,hidden

float: none|left|right|initial|inherit;

2. css定位属性

定位元素（positioned element）是其计算后位置属性为 relative, absolute,fixed或sticky 的一个元素（换句话说，除static以外的任何东西）。
相对定位元素（relatively positioned element）位置属性为relative的元素。
绝对定位元素（absolutely positioned element）位置属性为 absolute 或 fixed的元素。
粘性定位元素（stickily positioned element）位置属性为sticky的元素

示例

position值	说明
`static`	该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
`relative`	该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
`absolute`	元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
`fixed`	元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
`sticky`	元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为（详情见Github issue on W3C CSSWG）。

属性	说明
`position`	元素的定位类型，值static,absolute绝对，relative相对
`top`	元素上外边距
`right`	元素右外边距
`bottom`	元素下外边距
`left`	元素的左外边距

定位	说明
`相对定位`	相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移
`绝对定位`	相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。
`固定定位`	固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
`粘性定位`	粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。