盒模型
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。称为盒模型，这个盒子由内容区域、内容区域周围的空间（内边距padding）、内边距的外边缘（边框border）、和边框外面将元素与相邻元素隔开的不可见区域（外边距margin）构成。
每个元素的盒子都有一些决定该元素所占空间及其外观的要素。可以使用 CSS 分别控制各个要素。在默认情况下，宽度和高度仅定义内容区域的尺寸。背景会延伸到边框的后面，所以通常情况下它仅在内边距所延伸到的区域可见。
宽度、高度和盒模型：关于 CSS 的 width 属性对元素所显示宽度影响有两种处理方式：第一是浏览器中元素的宽度与其 width 属性并不一致（除非它本身没有内边距和边框）。 CSS 中宽度指示的是内边距里内容区域和宽度。如下图怪异盒模型：元素在浏览器中显示的宽度则是内容宽度、左右内边距和左右边框的总和。显示高度计算上下内边距和上下边框的和。
第二种元素的显示宽度就等于width属性的值。内容宽度、内边距和边框都包含在里面。height属性与之类似，使用这种模式仅需要对元素设置：box-sizing：border-box。
如果设置了box-sizing：border-box；则高度和宽度就包含了处外边距以外的所有要素。
一、控制元素的显示类型和可见型
每个元素在默认情况下要么显示在单独的行，这种元素称为块级元素。要么显示在行内，称为行内元素。造成这种情况的本质是它们的 display 属性，即块级元素被设置为 display：block 而行内元素被设置为 display：inline。可以使用 CSS 改变元素默认显示类型，例如将 block 改为 inline。或者反过来，还有一种混合模式显示为 inline-block，让元素与其他内容出现在同一行，同时具有块级元素的属性。（display 还有 flex 和 grid 属性也提供额外布局技术）
p{display：inline；} //让元素显示为行内元素
p{display：block；} //让元素显示为块级元素
li{display-inline-block}//让元素显示为行内元素同时具有块级元素特征
设置为 inline 的元素会被忽略任何 width、height、margin-top和margin-bottom 设置。（稍后介绍后这两个属性）。
控制元素可见性：visibility属性：hidden；主要目的是控制元素是否可见。隐藏元素时，元素及其内容会在出现的位置留下一片空白区域，该区域仍然会在文档流中占据位置。
em{visibility：hidden；}
二、元素的高度和宽度
如分块内容、段落、列表项、div、图像、video、表单元素等可以为其设置高度和宽度。同时可以为短语内容元素（默认以行内方式显示）设置 display:block;或 display:inline-block;在对它们设置宽度高度。
宽度、外边距和 auto：如果不显示设置宽度和高度，浏览器就会使用 auto。对于大多数默认显示为块级元素的元素，width 的 auto 值由包含块的宽度减去元素的内边距、边框和外边距计算出来。
三、在元素周围添加内边距
内边距就是元素内容周围、边框以内的空间。就像图画（内容）与画框（边框）之间的衬边。可以改变内边距的厚度，不能改变颜色或纹理。
div{
padding: .3125em,.625em .625em;
padding: 5px 10px 10px;/* 这两个padding效果相同 */
}
添加内边距的方法：padding：x，这里x是要添加的空间量，表示未单位（em或像素）的长度或父元素宽度的百分数。也可以输入：padding-left，padding-right，padding-bottom， padding-top，单独为一个边添加内边距。
- □padding：10px；--使用一个值，这个值就会应用到四条边。
- □padding：10px 20px;--使用两个值，则前一个值会应用于上下两边，后一个值会应用左右两边。
- □padding：10px 20px 22px;--使用三个值，则第一个会应用于上边，第二个应用于左右两边，第三个应用于下边。
- □padding：10px 20px 22px 0;使用四个值，会按照时钟顺序，一次应用于上、右、下、左、四个边。
四、设置边框
可以在元素周围创建边框或针对元素某一边设置边框，并设置它的厚度、风格和颜色。如果指定了内边距，边框将包围在元素内容和内边距的外面。
img{ border:5px solid #bebebe；}
- 设置边框风格： border-style: type,其中 type 可以是 none、dotted (点线）、dashed (虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset(凹边)或outset(凸边）。
- 设置边框宽度：border-width:x（宽度）
- 设置边框颜色：border-color：color（颜色）
- 简写法设置多个边框属性：输入border 如果需要输入-top、-right、-bottom、-left，可以单独将边框效果限制在某一条边上。
- 然后根据需要输入-property，这里的 property 可以是 style、width 或 color，仅使用单个属性来设置边框。 例如：border:1px solid和
border-right:2px dashed green;
五、设置元素周围的外边距
外边距是元素与相邻元素之间的透明空间。设置外边距的方法：margin：x，其中x是要添加的空间量，可以表示长度，百分数或auto。也可以输入：margin-top:x; margin-right:x; margin-bottom:x; margin-left:x;为元素的一条边应用外边距。
如果对 margin 使用一个值，则该值会应用到四条边。两个值，则前一个值会应用于上下两边，后一个值会应用左右两边。三个值，则第一个会应用于上边，第二个应用于左右两边，第三个应用于下边。四个值，会按照时钟顺序，一次应用于上、右、下、左、四个边。margin 属性的 auto 依赖于 width 属性值。
{margin: 0 auto ；}
六、使元素浮动
通过 float 属性使元素浮动在文本或其他元素上，可以使用这种技术让文本环绕在图像或者其他元素周围，也可以创建多栏布局等。让文本环绕元素：输入 folat： left（让元素浮动到左边，其他内容围绕在它右边）。right（让元素浮动到右边，其他内容围绕在它左边）。none（元素不浮动）
main{ float：right；}
控制元素浮动的位置输入 clear: 输入 left，阻止元素浮动在该元素左边。输入 right，阻止元素浮动在该元素右边。输入 both，阻止元素浮动在该元素左右边。none 允许元素浮动在该元素的左右两边。
七、对元素进行相对定位
每个元素在页面的文档流中都有一个自然位置，相对这个原始位置对元素进行移动就称为相对定位，周围元素完全不受影响。 输入 position：relative;然后输入 top,right,bottom或left。在输入 x，这里 x 是希望元素从它的自然位置偏移的距离，可以表示未绝对值相对值或百分数，可正可负。
.example{
position: relative;
top: 35px;
left: 100px;
}
八、对元素进行绝对定位
如果 img 元素出现在 p 元素之前，图像就出现在段落前面。通过对元素的绝对定位，即指定他们相对于 body 或最近的已定位祖先元素的精确位置。与相对定位不同，绝对定位的元素不会再原先的位置留下空白。这与让元素浮动也不同。绝对定位的元素其他元素不会围绕在它周围。
输入 position：absolute; 然后输入 top,right,bottom 或 left。在输入 x，这里 x 是希望元素从它的自然位置偏移的距离，可以表示未绝对值相对值或百分数。（使用相对定位、绝对定位或固定定位，可以使用 z-index 属性（最高值显示在最上面）指定相互重叠的元素的叠放次序。）
九、处理溢出
元素并不总是包含在它们自己的盒子里。这可能是因为盒子不够大，例如图像比它的容器更宽就会溢出；也可能是因为使用负的外边距或绝对定位让内容处于盒子的外面，还有可能是对元素设置了显示高度，他的内容太高而无法转入盒子内部。
绝对浏览器如何处理溢出的步骤：输入 overflow： 在输入 ： visible 让元素盒子中的所有内容可见（默认项）、hideen 隐藏元素盒子容纳不了的内容、scroll 无论元素是否需要，都在元素上添加滚动条、auto让滚动条仅在访问者访问溢出内容时出现。
example{ overflow: hidden; }
十、垂直对齐元素
垂直对齐元素 可以使用除默认对齐方式以外的多做方式对齐元素。
输入 vertical-align: ，在输入baseline 是元素的基准线对齐父元素的基准线，或者输入middle使元素位于父元素中央，或者输入sub，使元素成为父元素的下标，或者输入super，使元素成为父元素的上标，或输入text-top，是元素的顶端对齐父元素顶端，或输入tetx-bottom使元素的底部对齐父元素的底部；或输入top使元素的顶部对齐当前行里最高元素的顶部，或输入bottom使元素的底部对齐当前行里最低元素的底部.
十一、修改鼠标指针
一般情况下，浏览器负责控制鼠标指针的形状。大多时候使用箭头形状，指向链接时使用手指形状等。 修改指针形状：输入cursor: pointer（手指）、或default（箭头）、或dcrosshair（+）、或dmove、或dwait、或dhelp、或text（I）、或dprogress。分别指示不同形状的鼠标指针。
来看一段代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.example{
background-color: yellow;
width:200px;
height:200px;
margin:50px;
}
.exampleto{
background-color:chartreuse;
width:100px;
height:100px;
position:relative;
left:50px;
top:50px;
}
.example2{
background-color:crimson;
width:200px;
height:200px;
margin:50px;
position:relative;
/* 定义希望成为绝对定位参照体的祖先 */
}
.exampleto2{
background-color:slateblue;
width:100px;
height:100px;
position:absolute;
/* 相对body为祖元素作为定位进行偏移 */
left:50px;
top:50px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="example"><div class="exampleto"></div></div>
<div class="example2"><div class="exampleto2"></div></div>
</body>
</html>
实现效果如图：
