哈哈哈哈。翻出了css，随便写写 ......
盒模型简介
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- margin(外边距) - 边界外的透明区域。由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。
- border(边框) - 边框在填充和内容周围。由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。
- padding(内边距) - 内容周围的透明区域。由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
- content(内容) - 实际文本和图像。由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。
css盒模型
页面渲染中的盒模型
为了正确设置元素在所有浏览器中的宽度和高度，我们需要知道盒模型是如何工作的。
下面介绍css的两种盒模型。
-
W3C的标准盒模型（标准盒模型）
width是只指content部分。 -
IE盒模型 （怪异盒模型）
width包含content、padding、border部分。
image.png
在css3中有box-sizing属性可以来改变盒模型的类型，值为content-box，代表W3C盒模型，盒子定义宽高 = 内容宽高（content），为默认值；值为border-box代表IE盒模型，盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）。
css 边框
可以使用border属性。border属性是一个用于设置各种单独的边界属性的简写属性。它可以用于设置一个或多个以下属性的值：
- border-width - 设置边框的宽度。
- border-style - 设置用于绘制边框的样式。
- border-color - 设置边框的颜色。如果这个值没有设置，它的默认值是元素的color属性值（是文字颜色而非背景色）。
border-width 属性
设置盒子模型的边框宽度。此属性可以有一到四个值。
默认值: medium
继承性: 否
属性值
- thin： 定义细的边框。
- medium： 定义中等边线的边框。
- thick： 定义宽边线的边框。
用法
/* 用法一：明确指定宽度值 */
/* 当给定一个宽度时，该宽度作用于选定元素的所有边框 */
border-width: 5px;
/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */
border-width: 2px 1.5em;
/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-width: 1px 2em 1.5cm;
/* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 （即按顺时针依次作用） */
border-width: 1px 2em 0 4rem;
/* 用法二：使用全局关键字 */
/* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） */
border-width: inherit;
/* 用法三：使用作用于 border-width 的关键字 */
border-width: thin;
border-width: medium;
border-width: thick;
border-style 属性
border-style属性设置一个元素的边框的样式。此属性可以有一到四个值。
默认值: none
继承性: 否
属性值
- none：和关键字 hidden 类似，不显示边框。默认值。
- hidden：和关键字 none 类似，不显示边框。
- dotted：显示为一系列圆点。
- dashed：显示为一系列短的方形虚线。
- solid：显示为一条实线。
- double：显示为一条双实线。
- groove：显示为有雕刻效果的边框。
- ridge：显示为有浮雕效果的边框。
- inset：显示为有陷入效果的边框，样式与outset相反。
- outset：显示为有突出效果的边框，样式与inset相反。
用法
/* 用法一：明确指定宽度值 */
/* 当给定一个宽度时，该宽度作用于选定元素的所有边框 */
border-style: dashed;
/* horizontal | vertical */
/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */
border-style: dotted solid;
/* top | horizontal | bottom */
/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-style: hidden double dashed;
/* top | right | bottom | left */
/* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 （即按顺时针依次作用） */
border-style: none solid dotted dashed;
/* 用法二：使用全局关键字 */
/* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） */
border-style: inherit;
border-style: initial;
border-style: unset;
border-color 属性
border-style属性是一个用于设置元素四个边框颜色的快捷属性。此属性可以有一到四个值。
默认值: currentcolor
继承性: 否
属性值
- 预定义的颜色名称：规定颜色值为颜色名称的颜色（比如 red）。
- 十六进制颜色：规定颜色值为十六进制值的颜色（比如 #ff0000）。
- RGB颜色： 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
用法
/* border-color: color; 单值语法 */
border-color: red;
/* border-color: vertical horizontal; 双值语法*/
border-color: red #f015ca;
/* border-color: top horizontal bottom; 三值语法 */
border-color: red yellow green;
/* border-color: top right bottom left; 四值语法 */
border-color: red yellow green blue;
/* 全局关键字 */
border-color: inherit
border 简写用法
border: solid;
border: dashed red;
border: 4mm ridge rgb(170, 50, 220);
内边距
padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。该属性可以有1到4个值。
默认值: 0
继承性: 否
属性值
- length：规定以具体单位计的填充值，比如像素、厘米等。默认值是 0。
- percentage：规定基于父元素的宽度的百分比的填充。
- 全局关键字：指定应该从父元素继承padding。
用法
/* 指定一个值时 该值指定四个边的内边距
指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距
指定三个值时 第一个指定上边的内边距.第二个指定左右两边 第三个指定下边
指定四个值时分别为上 右 下 左（顺时针顺序）*/
padding: 5%;
padding: 10px 20px;
padding: 10px 3% 20px;
padding: 1em 3px 30px 5px;
/* 简写模式相当于 */
padding-left: 1em; /* 左边距 */
padding-right: 3px;/* 右边距 */
padding-bottom: 30px;/* 下边距 */
padding-top: 5px;/* 上边距 */
外边距
margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top，margin-right，margin-bottom和margin-left。指定的外边距允许为负数。
默认值: 0
继承性: 否
属性值
- length：规定以具体单位计的填充值，比如像素、厘米等。默认值是 0。
- percentage：规定基于父元素的宽度的百分比的填充。
- auto：浏览器计算外边距。
- 全局关键字：指定应该从父元素继承padding。
用法
/* margin: style 单值语法 所有边缘 */
margin: 1em;
/* margin: vertical horizontal 二值语法 纵向 横向 */
margin: 5% auto;
/* margin: top horizontal bottom 三值语法 上 横向 下*/
margin: 1em auto 2em;
/* margin: top right bottom left 四值语法 上 右 下 左*/
margin: 2px 1em 0 auto;
/* auto 可以用来居中元素 */
margin: 0 auto;
/* 全局关键字 继承 */
margin: inherit;
总结
image.png
结束语
来呀，快活呀，反正有大把时光～
