制作盒模型

文献种类：专题技术总结文献

开发工具与关键技术：   DW                            

作者：魏钦     ；年级：2003   ；撰写时间：2022   年 1 月  28日

文献编号：                归档时间：   年   月   日

开发工具与关键技术： DW

作者：魏钦

撰写时间：2022/1/28

1. CSS盒模型规定了元素处理元素内容（content）、内边距（padding）、边框（border）、外边距（margin）的方法。
2. 在浏览器中检查时可以看到下面这张图，这张图是盒模型的模型图
3. 

 

1. 内容（content）：盒模型的内容，显示文本和图像。
2. 内边距（padding）：内容区与边框之间的部分，内边距是透明的。
3. 外边距（margin）：盒模型与邻元素的间距，外边距是透明的。
4. 边框（border）：盒模型的边框可以设置宽度，样式和颜色。
5. 一个盒模型有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是：上（top）右（right）下（bottom）左（left）
6. 边框相关属性：border-top(上边框) 、border-right(右边框)  

border-bottom(下边框) 、border-left(左边框)

1. 内边距相关属性：padding-top(上内边距) 、 padding-right(右内边距)

padding-bottom(下内边距) 、padding-left(左内边距)

1. 外边距相关属性：margin-top(上外边距) 、 margin -right(右外边距)

margin -bottom(下外边距) 、margin -left(左外边距)

1. CSS为margin,border,padding分别规定了简写属性，通过一条声明就可完成设定。在每个声明中，属性值的顺序都是上右下左的顺序。
2. 例如给某个元素设置上外边距3px、右外边距4px、下外边距5px、左外边距7px。
3. 

 

1. 有些时候并不需要把他的三个字都写出，那边的值没写就会用他对边的值。
2. 

 

1. 边框有3个相关的属性：宽度（border-width）、样式（border-style）、颜色（border-color）。
2. 宽度(border-width):可以使用thin,medium,thick等文本值，也可以使用除百分比和负数之外的任何绝对值。
3. 样式(border-style):有none(无边框),hidden(隐藏边框),dotted(点线边框),dashed(虚线边框),solid(实线边）
4. 颜色（colo）：可以使用任何的颜色值包括：十六进制，英文，rgb
5. 边框样式用法：  
6. 

 

1. 在CSS边框中除了前面三个相关样式意外还有3个新的样式属性分别为：圆角边框(border-radius)、边框阴影(border-shadow)、边框图片(border-image).

这是我所学到的盒模型的知识，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！