盒模型--盒模型的属性

冰冻果冻

于 2024-10-11 12:55:12 发布

阅读量528

点赞数 24

文章标签： css html css3

本文链接：https://blog.csdn.net/2401_85545586/article/details/142833432

版权

一、盒模型的简介

盒模型是指在网页设计中，将元素看作是一个矩形盒子的模型。每个元素都包含内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）四个部分。这些部分一起决定了元素在页面中的位置、大小和样式。

内容区域指的是元素中实际显示内容的区域，可以设置元素的宽度、高度、背景颜色等属性。

内边距区域是内容区域与边框之间的区域，可以设置元素的内边距（padding），用来控制内容与边框之间的距离。

边框区域是围绕内容和内边距的一条线，可以设置元素的边框样式、边框宽度等属性。

外边距区域是边框与其他元素之间的区域，可以设置元素的外边距（margin），用来控制元素与其他元素之间的距离。

通过调整这些区域的属性，可以实现元素的布局、样式和间距等效果。盒模型是网页设计和排版中基础概念，理解盒模型对于掌握网页布局和样式设置至关重要。

1、边框

(1)所有边框宽度

border-width

语法格式：border-width：medium | thin | thick | length

参数： medium 为默认宽度，thin为小于宽度，thick 为大于默认宽度。length是由数字和单位标识符组成的长度单位。

注意：使用该属性，必须先设定对象的height或 width属性，或者设定position属性为osolute。如果 border-style 设置为none，本属性将失去作用。

(2)上边框宽度

语法格式：

border-top: border-width |I border-style |I border-color

参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅border-width属性。

(3)右边框宽度

语法格式：

border-right:border-width |I border-style II border-color

参数：该属性是复合属性。请参阅各参数对应的属性。

说明：请参阅border-width属性。

(4)下边框宽度

语法格式：

border-bottom:border-width /| border-style /I border-color

参数：该属性是复合属性。请参阅各参数对应的属性。

说明：请参阅border-width属性。

(5)左边框宽度

语法格式：

border-left:border-width II border-style II border-color

参数：该属性是复合属性。请参阅各参数对应的属性。

说明：请参阅border-width属性。

示例：

h4(border-top-width:2px; border-bottom-width: 5px; border-left-width:1px; border-

right-width:1px)

(6)边框颜色

语法格式：

border-color:color

参数：color 指定颜色。

说明：要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果 border-width等于0或border-style设置为none，本属性将失去作用。示例:

body ( border-color:silver red )

(7)边框样式

语法格式：

border-style: none I hidden I dotted I dashed I solid I double I groove

inset | outset

参数：border-style属性包括多个边框样式的参数。none：无边框。与任何指定的border-width值无关。dotted：边框为点线。

dashed：边框为短线。（虚线)

solid：边框为实线。

display:blak意成块元来

⑤double：边框为双线。两条单线与其间隔的和等于指定的border-width值。

6.groove：根据 border-color的值画3D凹槽。

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

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

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

说明：如果只提供1个参数，将用于全部的4条边。如果提供两个参数，第1个参数用于上、下，第2个参数用于左、右。如果提供3个参数，第1个参数用于上，第2个参数用于左、右，第3个参数用于下。

要使用该属性，必须先设定对象的height或width 属性，或者设定position属性为absolute。如果border-width不大于0，本属性将失去作用。

(8)圆角边框

语法格式：

border-radius:length {1,4}

参数：length由浮点数字和单位标识符组成的长度值，不允许为负值。

说明：边框圆角的第1个length值是水平半径，如果第2个值省略，则它等于第1个值，这时这个角就是一个1/4圆角，如果任意一个值为0，则这个角是矩形，不再是圆角。

列图：运行代码

  <style>
div{width: 200px;
    height: 20px;
    background-color:white; 
    margin: 20px;
    padding: 5px;
    border: 10px orange;
}
    </style>
</head>
<body>
    <div style="border-style: dashed;">虚线边框</div>
    <div style="border-style: solid;">实线边框</div>
    <div style="border-style: double;">双线边框</div>
    <div style="border-style: groove;">凹槽线边框</div>
    <div style="border-style: inset;">凹边边框</div>
    <div style="border-style: outset;">凸边边框</div>
    <div style="border-style: ridge;">菱形边框</div>
    <div style="border-style: dotted;">点线边框</div>
    
</body>
</html>

运行结果：

2、外边距

外边距是指元素与元素之间的距离，外边距设置属性有 margin-top、margin-right、margin-bottom、margin-left，可分别设置，也可以用margin属性，一次设置所有边距。

1.上外边距（margin-top)

语法格式：

margin-top:length | auto

参数：length 是由数字和单位标识符组成的长度值或者百分数，百分数是基于父对象的高度。auto值被设置为对边的值。

说明：设置对象的外边距始终透明。内联元素要使用该属性，必须先设定元素的height 或width属性，或者设定position 属性为absolute。

示例:

body { margin-top:11.5% )

2.右外边距(margin-right)

语法格式：

margin-right:length / auto

参数：同margin-top。说明：同margin-top。

示例:body ( margin-right:11.5%；)

3.下外边距(margin-bottom)

语法格式：

margin-bottom: length | auto

参数：同margin-top。说明：同margin-top。

示例:body ( margin-bottom:11.5%；)

4.左外边距(margin-left)

语法格式：

margin-left:length | auto

参数：同margin-top。

说明：同margin-top。示例:body ( margin-left:11.5%；)
示例：

以上4项属性可以控制一个要素四周的边距，每一个边距都可以有不同的设置。或者只设置一个边距，然后让浏览器用默认设置设定其他几个边距。可以将边距应用于文字和其他元素。

示例：

h4 (margin-top:20px; margin-bottom: 5px; margin-left:100px; margin-right:55px)设定边距参数值最常用的方法是利用长度单位(px、pt等），也可以用比例值设定边距将边距值设为负值，就可以将两个对象叠在一起。例如，把下边距设为一55px，右边能设为60px。

5.外边距(margin)

语法格式：

margin:length / auto

参数：length是由数字和单位标识符组成的长度值或百分数，百分数是基于父对象的高度；对于行级元素来说，左、右外边距可以是负数值。auto值被设置为对边的值。

说明：设置对象四边的外边距，位于盒模型的最外层，包括4项属性：margin-top、margin-right、margin-bottom、margin-left，外延边距始终是透明的。

如果提供全部4个参数值，将按margin-top(上)、margin-right(右）、margin-bottom（下)、margin-left(左）的顺序作用于4条边（顺时针）。每个参数中间用空格分隔。

示例:

body ( margin: 36pt 24pt 36pt)

body ( margin:11.5%)

body ( margin:10% 10% 10% 10%)
内边距与外边距设置一样，但不允许出现负值

练习：

 <title>盒子模型的属性</title>
    <style>
#u1{
background-color: gray;
width: 100px;
height: 100px;
border: 2px red solid;
border-radius: 10px;
padding: 20px;
margin: 50px;
margin-bottom: 50px;
}
#u2
{
  background-color: gray;
width: 150px;
height: 150px;
border: 2px red solid;
border-radius: 0 50px 0 0;
padding: 20px;
margin: 50px;
margin-bottom: 50px;
}
#u3{
      background-color: gray;
width: 200px;
height: 200px;
border: 2px red solid;
/*单独控制边框四个角的弧度，顺左右上下*/
border-radius: 100px 0 100px 0;
padding: 20px;
margin: 50px;
margin-bottom: 50px;
}

#a1{
    width: 500px;
    height: 20px;
    border: 2px green solid;
    background-color: gray;
    display: block;
    margin: 50px;
}
#a2{
    width: 600px;
    height: 20px;
    border: 2px blue solid;
    background-color: gray;
    display: block;
    text-decoration: underline;
    margin: 50px;
}
    </style>
</head>
<body>
    <b id="a1">这个课堂禁止使用br和hr标签：加粗文本</b>
    <p id="a2">这个课堂禁止使用br和hr标签：下划线文本</p>
    <img src="../图片/橘子.jpg" id="u1">
    <img src="../图片/橘子.jpg" id="u2">
    <img src="../图片/橘子.jpg" id="u3">

</body>
</html>

运行结果：