css盒模型

哈哈哈哈。翻出了css，随便写写 ......

盒模型简介

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

1. margin(外边距) - 边界外的透明区域。由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。
2. border(边框) - 边框在填充和内容周围。由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。
3. padding(内边距) - 内容周围的透明区域。由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
4. content(内容) - 实际文本和图像。由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。

css盒模型

页面渲染中的盒模型

为了正确设置元素在所有浏览器中的宽度和高度，我们需要知道盒模型是如何工作的。
下面介绍css的两种盒模型。

1. W3C的标准盒模型（标准盒模型）
   width是只指content部分。
2. IE盒模型 （怪异盒模型）
   width包含content、padding、border部分。
   
   image.png

在css3中有box-sizing属性可以来改变盒模型的类型，值为content-box，代表W3C盒模型，盒子定义宽高 = 内容宽高（content），为默认值；值为border-box代表IE盒模型，盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）。

css 边框

可以使用border属性。border属性是一个用于设置各种单独的边界属性的简写属性。它可以用于设置一个或多个以下属性的值：

1. border-width - 设置边框的宽度。
2. border-style - 设置用于绘制边框的样式。
3. border-color - 设置边框的颜色。如果这个值没有设置，它的默认值是元素的color属性值（是文字颜色而非背景色）。

border-width 属性

设置盒子模型的边框宽度。此属性可以有一到四个值。

默认值: medium
继承性: 否

属性值

1. thin： 定义细的边框。
2. medium： 定义中等边线的边框。
3. 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-width

border-style 属性

border-style属性设置一个元素的边框的样式。此属性可以有一到四个值。

默认值: none
继承性: 否

属性值

1. none：和关键字 hidden 类似，不显示边框。默认值。
2. hidden：和关键字 none 类似，不显示边框。
3. dotted：显示为一系列圆点。
4. dashed：显示为一系列短的方形虚线。
5. solid：显示为一条实线。
6. double：显示为一条双实线。
7. groove：显示为有雕刻效果的边框。
8. ridge：显示为有浮雕效果的边框。
9. inset：显示为有陷入效果的边框，样式与outset相反。
10. 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-style

border-color 属性

border-style属性是一个用于设置元素四个边框颜色的快捷属性。此属性可以有一到四个值。

默认值: currentcolor
继承性: 否

属性值

1. 预定义的颜色名称：规定颜色值为颜色名称的颜色（比如 red）。
2. 十六进制颜色：规定颜色值为十六进制值的颜色（比如 #ff0000）。
3. 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-color

border 简写用法

border: solid;
border: dashed red;
border: 4mm ridge rgb(170, 50, 220);

border设置

内边距

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。该属性可以有1到4个值。

默认值: 0
继承性: 否

属性值

1. length：规定以具体单位计的填充值，比如像素、厘米等。默认值是 0。
2. percentage：规定基于父元素的宽度的百分比的填充。
3. 全局关键字：指定应该从父元素继承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;/* 上边距 */

设置padding内边距

外边距

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top，margin-right，margin-bottom和margin-left。指定的外边距允许为负数。

默认值: 0
继承性: 否

属性值

1. length：规定以具体单位计的填充值，比如像素、厘米等。默认值是 0。
2. percentage：规定基于父元素的宽度的百分比的填充。
3. auto：浏览器计算外边距。
4. 全局关键字：指定应该从父元素继承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

结束语

来呀，快活呀，反正有大把时光～