盒子模型的组成

最新推荐文章于 2025-06-20 14:21:38 发布

webshady

最新推荐文章于 2025-06-20 14:21:38 发布

阅读量4.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端

一、盒子模型的组成

就是把 HTML 页面中的布局元素(块元素）看作是一个矩形的盒子，也就是一个盛装内容的容器。由border、content、padding内边距、margin外边距组成

二、边框 border

1、border的属性

属性	作用
border-width	定义边框粗细，单位px, 系统默认3px 或：thin(1px) medium（3px） thick(5px)
border-style	none/solid/dashed虚线/dotted点线 (必须要有这一属性边框才可以显示出来)
border-color	边框颜色

简写：border:20px dashed pink

2、可以分别设置上下左右边框

Border-top/bottom/left/right:20px dotted blue

注意：边框的层叠性

顺序必须是先设置总体的border样式，后设置单独边框样式，顺序不可颠倒。

3、border的不同属性可以有1-4个值（表格以color属性为例）

值的个数	意思
border-color:red;	1个值，表上下左右都为红色
border-color:red blue	2个值，表上下红，左右蓝
border-color:red blue pink	3个值，表上红左右蓝下粉
border-color:red blue pink green	4个值，表上红右蓝下粉左绿顺时针