HTML/CSS盒子模型（学习整理）

最新推荐文章于 2024-06-18 20:16:03 发布

原创最新推荐文章于 2024-06-18 20:16:03 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

HTML/CSS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中边框(border)、外边距(margin)、内边距(padding)的设置方法，包括不同属性值数量的设置规则，以及如何使用border-radius实现圆角、扇形和三角形等形状。此外，还讲解了如何通过margin实现盒子的水平居中。

边框border
border-width: 边框宽度
border-color: 边框颜色
border-style: 边框样式 solid(实线) double(双实线) dashed(虚线)

还可以分别设置四条边的border属性

border	属性
border-right-	width/style/color
border-left-	width/style/color
border-top-	width/style/color
border-bottom-	width/style/color

不同属性值个数设置

个数	设置（顺时针法）
4个值（例：border-width:20px 30px 38px 23px）	4个值按上——右——下——左（顺时针）设置
3个值（例：border-width:20px 30px 23px）	3个值按上——左右——下
2个值（例：border-width:20px 30px ）	2个值按上下——左右
1个值（例：border-width:20px ）	1个值四条边同时设置

外边距margin 和内边距padding

padding	margin
padding-left	margin-left
padding-right	margin-right
padding-top	margin-top
padding-bottom	margin-botto

属性值个数不同时

个数	设置（顺时针法）
4个值（例：padding:20px 30px 38px 23px）	4个值按上——右——下——左（顺时针）设置
3个值（例：padding:20px 30px 23px）	3个值按上——左右——下
2个值（例：padding:20px 30px ）	2个值按上下——左右
1个值（例：padding:20px ）	1个值四个值同时设置

盒子水平居中（前提设置盒子宽高）
margin:0 auto;

border-radius：设置盒子圆角对应顺序：左上—右上—右下—左下

应用：

画圆形
盒子长宽相同时（正方形），设置radius值为盒子长宽的一半就变为圆形

div{
       border: 1px solid red;
       width: 100px;
       height: 100px;
       border-radius: 50px;
     }
    </style>

画扇形
盒子长宽相同时（正方形），设置radius一个值等于盒子长宽其余三个值为0就变为扇形

<style>
     div{
       border: 1px solid red;
       width: 100px;
       height: 100px;
       border-radius: 100px 0 0 0;
     }
    </style>

画三角形

<style>
     div{
 border: 30px solid red;
 width: 0px;
 height: 0px;
 border-color: green transparent transparent transparent;
     }
    </style>
    transparent：透明