盒子模型概念

最新推荐文章于 2024-05-05 11:46:24 发布

Guoli丨

最新推荐文章于 2024-05-05 11:46:24 发布

阅读量95

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_65762277/article/details/128024758

版权

本文详细介绍了CSS盒子模型，包括内容区、内边距、边框和外边距的概念及其设置方式，如边框的宽度、颜色和样式，以及内边距和外边距的单独设置。还探讨了水平布局中影响元素位置的因素和过度约束的情况。

摘要由CSDN通过智能技术生成

1.盒子模型

盒子模型
内容区content
内边距 padding
边框 border
外边距 margin

盒子的大小：内容区、内边距、边框有关系，跟外边距是没有关系

2.盒子模型边框

边框（border）边框用来隔开盒子内部和盒子外部
设置边框，三个要素，缺一不可宽度、颜色、样式
边框的宽度 border-width
1、可以设置多个值，以空格隔开即可
4个值上右下左
3个值上左右下
2个值上下左右
1个值上下左右
2、单独设置某一边的宽度
border-top-width: ;
border-bottom-width: ;
border-left-width: ;
border-right-width: ;
3、border-width 是由默认值，默认大小在1-3px

边框的颜色 border-color
1、可以设置多个值
规则跟border-width是一样
2、单独设置某一边的颜色
border-XXX-color:;<