CSS3 box-sizing边框的大小设置

2024-10-12 13:53:38

1、新建html文件,创建一个div

CSS3 box-sizing边框的大小设置

2、为div添加样式定义长宽和边框

CSS3 box-sizing边框的大小设置

3、效果如图

CSS3 box-sizing边框的大小设置

4、再创建一个div

CSS3 box-sizing边框的大小设置

5、为div添加样式定义长宽、边框和padding值

CSS3 box-sizing边框的大小设置

6、效果如图,明显添加padding值的div的长宽要比没有添加的大

CSS3 box-sizing边框的大小设置

7、两个div分别添加box-sizing: border-box;

CSS3 box-sizing边框的大小设置

8、预览效果如图,两个盒子的长宽一样,因此bo垓矗梅吒x-sizing: border-box;经常被用于设置div长宽

CSS3 box-sizing边框的大小设置
猜你喜欢