css盒子模型

最新推荐文章于 2022-10-26 20:31:02 发布

_单曲循环

最新推荐文章于 2022-10-26 20:31:02 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32072011/article/details/49253585

本文深入探讨了网页布局中的盒子模型，包括外边距、边框、内填充和内容部分，详细解释了如何通过CSS定义宽度和高度，以及如何使用边框、内填充和外边界来精确控制元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子模型对于div和css的布局有很大的作用，熟练掌握了盒子模型以及其中每个元素的使用方法，才能随心所欲布局各个元素的位置。

盒子模型由外边距margin，边框border，内填充padding，以及内容部分content组成。所以盒子的宽是这四个部分的总和：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界，同样的，盒子的高度为上边界+上边框+上填充+内容高度+下填充+下边框+下边界。但是用css给盒子模型定义width和height是实际上定义的部分是content内容部分的width和height。

边界，边框，和填充都分为上下左右四个方向，用css定义定义的时候，可以给其中的任意方向设置值，比如border-left是设置盒子的上边界的属性，若设置的四个方向的属性都不同时要按照上，右，下，左顺时针方向设置不同的值，例如:padding:10px 20px 15px 25px，（px是长度单位像素），这是设置盒子的上填充为10px,左填充是20px，下填充是15px，左填充是25px。

1.边框border

边框属性有3个值，分别是边框的粗细（单位是px），样式和颜色。div{border: 2px solid red;}这段代码设置的是边框粗细为2px，样式为实心，边框的颜色为红色。

这些属性也可以单独设置，边框粗细border-width，边框样式border-style，边框颜色border-color

边框样式border-style的值有

none：无边框，与任何指定的border值无关

hidden：隐藏边框，

solid：边框为实线

double：边框为双实线，两条单线与他们间隔的和是border-width的值

dashed：边框为虚线

dotted：边框为点线

inset：根据border-color的值画3D凹边

outset：根据border-color的值画3D凸边

groov：根据border-color的值画3D凹槽

ridge：根据border-color的值画菱形边框

需要给border的一条边设置border属性时，border-top上边框，border-right右边框，border-bottom下边框，border-left左边框，可以用以上这些逐个设置。

2.内填充padding

内填充padding是边框border与内容content之间的间距

padding-top是上填充，padding-right是右填充，padding-bottom为下填充，padding-left为左填充

padding：_px；表示元素的上下左右填充相同；

padding：_px _px；第一个值表示元素的上下填充，第二个值表示元素的左右填充；

当padding属性设置了3个值时padding：_px _px _px；第一个值表示元素的上填充，第二个值表示元素的左右填充，第三个值表示元素的下填充。

padding属性的值不能设置为负值，设置了之后会强制转为值为0

3.外边界margin

margin属性设置元素外边界的宽度，或者个边上外边界的宽度。

margin-top上边界，margin-right右边界，margin-bottom下边界，margin-left左边界。

上下左右边界值相同时直接写margin：_px；

上下边界相同，左右边界相同时直接写margin：_px _px；

当margin属性设置了3个值的时候margin：_px _px _px，第一个值表示元素的上边界，第二个值表示元素的左右边界，第二个值表示元素的下边界。

块级元素的垂直或相邻外边界会合并，当相邻或垂直的元素的外边界值不相同时取最大的宽度

例子如下：

<span style="font-size:14px;">div1{
      width:100px;
      height:100px;
      margin:20px;</span>

<span style="font-size:14px;">      background:black;
}
div2{
      width:100px;
      height:100px;
      margin:20px;</span>

<span style="font-size:14px;">      background:black;
}</span>

上面两个div是垂直分布的，两个div的外边界宽度都为20px，运行程序后就会发现，两个元素之间的间距是20px，而不是20px+20px。

如果两个元素的外边界不同

<span style="font-size:14px;">div1{
      width:100px;
      height:100px;
      margin-bottom:20px;
      background:black;
}
div2{
      width:100px;
      height:100px;
      margin-top:40px;
      background:black;
}</span>

会发现在浏览器中，两个元素的间距为40px。

margin属性可以为负值，因为不经常用到负margin值，所以使用的时候要谨慎。