html5盒子模型

作者：Gausst松鼠会 | 2024-02-29 17:22:38

踩

html5盒子模型

1.边框的常用属性
border-color

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	右边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00;
	上、右、下、左边框颜色： #369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

border-width

属性	说明	示例
border-top-width	上边框粗细	border-top-width:5px;
border-right-width	右边框粗细	border-right-width:10px;
border-bottom-width	下边框粗细	border-bottom-width:8px;
border-left-width	左边框粗细	border-left-width:22px;
border-width	四个边框的粗细统一	border-width:5px;
	上、下边框粗细：10px 左、右边框粗细：5px	border-width:10px 2px;
	上边框粗细：5px 左、右边框粗细：1px 下边框粗细：6px	border-width:5px 1px 6px;
	上、右、下、左边框粗细： 1px 2px 5px 2px	border-width:1px 2px 5px 2px;

border-style：
none
hidden
dotted
dashed：虚线边框
solid：实线边框
double

border：
border:1px solid #3a6587;
border:1px dashed red;

2.外边距margin
margin-top
margin-right
margin-bottom
margin-left
margin
网页居中对齐 margin：0px auto；

3.内边距padding
padding-left
padding-right
padding-top
padding-bottom
padding

4.box-sizing属性
content-box：盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框
border-box：盒子的实际高度和宽度包括元素内容、边框和内边距
box-sizing：content-box | border-box | inherit;

5.圆角边框
border-radius: 20px 10px 50px 30px;

6.使用border-radius制作特殊图形
圆形
利用border-radius属性制作圆形的两个要点
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
半圆形
利用border-radius属性制作半圆形的两个要点
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值。
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

7.盒子阴影
box-shadow:inset x-offset y-offset blur-radius color;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/167121