盒子模型(border、margin、padding、box-sizing拯救布局、圆角边框、阴影)
什么是盒子模型？（1）content：位于最中间，网页的主要显示内容。（2）border：位于内边距外面，如果没有内边距就是包着内容的外框，它一般具有一定的厚度（3）padding：位于边框内部的空隙，是内容和边距的距离。（4）margin：位于边框外部空隙，边框外面周围的距离。边框1、边框的颜色border-color属性说明示例border-top-color上边框颜色border-top-c
什么是盒子模型？
（1）content：位于最中间，网页的主要显示内容。
（2）border：位于内边距外面，如果没有内边距就是包着内容的外框，它一般具有一定的厚度
（3）padding：位于边框内部的空隙，是内容和边距的距离。
（4）margin：位于边框外部空隙，边框外面周围的距离。
边框
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; |
| 上下、 左右 | border-color:#369 #000; |
| 上 、 左右、下 | border-color:#369 #000 #f00; |
| 上、右、下、左 | border-color:#369 #000 #f00 #00f; |
2、边框的粗细border-width
- thin 细
- medium 中
- thick 粗
- 像素值
| 属性 | 示例 |
|---|---|
| 上边框 | border-top-width:5px; |
| 右边框 | border-right-width:10px; |
| 下边框 | border-bottom-width:8px; |
| 左边框 | border-left-width:22px; |
| border-width | |
|---|---|
| 四条边框一样（一个值） | border-width:5px ; |
| 上下、左右（两个值） | border-width:20px 2px; |
| 上 、 左右 、下（三个值） | border-width:5px 1px 6px; |
| 上 、 右、 下、 左（四个值） | border-width:1px 3px 5px 2px; |
3、边框的样式border-style
| 属性值及说明 | |
|---|---|
| none 无边框 | hidden 隐藏边框 |
| dotted 点线边框 | dashed 虚线边框 |
| solid 实线边框 | double 双线边框 边框的粗细是3的倍数 |
简写属性：border
同时设置粗细、样式、颜色
顺序：粗细—>样式—>颜色
border:1px solid #3a6587;
border: 1px dashed red;
外边距
- 外边距（margin）位于盒子边框外，指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离
外边距也分上、右、下、左边距，设置方式和顺序跟边框基本相同。
| 属性 | 说明 | 示例 |
|---|---|---|
| margin-top | 设置上外边距 | margin-top:1px |
| margin-right | 设置右外边距 | margin-right:2px |
| margin-bottom | 设置下外边距 | margin-bottom:1px |
| margin-left | 设置左外边距 | margin-left:2px |
| margin | |
|---|---|
| 上右下左外边距都一样 | margin :8px; |
| 上下 、 左右 | margin :3px 5px; |
| 上 、左右 、 下 | margin :3px 5px 7px; |
| 上、右、下、左 | margin :3px 5px 7px 4px; |
网页中很多元素都会有默认的外边距，并且在不同的浏览器中，默认的外边距还不一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
</head>
<body>
<h2>CSS</h2>
</body>
</html>
为了使页面在不同的浏览器中显示的效果一样，通常在CSS中使用并集选择器统一设置这些标签的外边距为0px。这样页面中不会因为外边距而产生不必要的空隙。各浏览器显示的效果也会一样。
【注意】并集选择器是同时选中各个基本选择器所选择的范围，任何形式的选择器（包括标签选择器、类选择器、ID选择器等）都可以作为并集选择器的一部分。多个选择器通过逗号隔开。
<style>
/*border和h2都有默认外边距*/
body,h2{
margin: 0px;
}
</style>
清除body和h2的外边距以后：
margin还有一个特殊的值—auto
/*这种方式可以让元素在父容器中水平居中*/
margin：0px auto;
条件：这个元素必须是块元素。其次要给div块设置固定宽度。
内边距
内边距（padding）用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置，内边距也分上、右、下、左内边距。
| 属性 | 说明 | 示例 |
|---|---|---|
| padding-top | 设置上内边距 | padding-top:1px |
| padding-right | 设置右内边距 | padding-right:2px |
| padding-bottom | 设置下内边距 | padding-bottom:1px |
| padding-left | 设置左内边距 | padding-left:2px |
| padding | |
|---|---|
| 上右下左外边距都一样 | padding :8px; |
| 上下 、 左右 | padding :3px 5px; |
| 上 、 左右 、 下 | padding :3px 5px 7px; |
| 上、右、下、左 | padding :3px 5px 7px 4px; |
没有设置内边距
现在我们想让"CSS"和左边框有点距离
/*调左内边距*/
padding-left: 20px;
左内边距设为20px后
初学盒子模型的时候，大家对什么时候用内边距，什么时候用外边距有些迷惑。
大家记住原则：内边距在边框内部，外边距在边框外面。你可以去区分空隙是在边框内部还是外部。如果没有边框的情况下可以手动设置边框，作为调试使用，用完删除即可。
盒子模型的尺寸
/*设置盒子的宽度*/
width：10px;
/*设置盒子的高度*/
height：5px;
默认情况下，元素的宽度与高度计算方式如下：
w i d t h ( 宽 ) + p a d d i n g ( 内 边 距 ) + b o r d e r ( 边 框 ) = 元 素 实 际 宽 度 width(宽) + padding(内边距) + border(边框) = 元素实际宽度 width(宽)+padding(内边距)+border(边框)=元素实际宽度
h e i g h t ( 高 ) + p a d d i n g ( 内 边 距 ) + b o r d e r ( 边 框 ) = 元 素 实 际 高 度 height(高) + padding(内边距) + border(边框) = 元素实际高度 height(高)+padding(内边距)+border(边框)=元素实际高度
这就意味着我们在设置元素的 width或height 时，元素真实展示的高度与宽度会更大，因为元素的边框与内边距也会计算在 width或height 中。
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
以上两个 < div > 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 div2 指定了内边距,内边距也被加到了宽度和高度上。
box-sizing拯救布局
盒子的总尺寸不光包括内容宽度（width），还包括内边距和边框等，这样设计师每次使用都要去计算，其实也很麻烦。
1.box-sizing的语法
为了解决这种问题，CSS3增加了一个盒子模型属性box-sizing，能够事先定义盒子模型的尺寸解析方式。
/*语法：*/
box-sizing：content-box || border-box || inherit
- content-box：默认值，盒子的宽度或高度 = border + padding + （margin） + width / height。
- border-box：盒子的宽度或高度等于元素内容的宽度或高度。这里内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度 = 盒子宽度或高度 - border - padding)。
- inherit：元素继承父元素的盒子模型模式。
2.浏览器兼容性
| 属 性 名 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| box-sizing | 8+ | 1.5+ | 1.0+ | 9.0+ | 3.1+ |
3.box-sizing的使用
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中
/*以下是两个 <div> 元素添加 box-sizing: border-box; 属性*/
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
两个 div 现在是一样大小的!
从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。
以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有)
所有元素使用 box-sizing 是比较推荐的：
* {
box-sizing: border-box;
}
圆角边框
| 属性 | 描述 |
|---|---|
| border-top-left-radius | 定义了左上角的弧度 |
| border-top-right-radius | 定义了右上角的弧度 |
| border-bottom-right-radius | 定义了右下角的弧度 |
| border-bottom-left-radius | 定义了左下角的弧度 |
| border-radius | |
|---|---|
| 四个角都一样 | border-radius:1px； |
| 第一个值左上角和右下角，第二个值右上角和左下角 | border-radius:1px 2px； |
| 第一个值左上，第二个值右上角和左下角，第三个值右下 | border-radius:1px 2px 3px； |
| 左上 、右上 、右下 、 左下 | border-radius:1px 2px 3px 4px； |
参考https://www.runoob.com/css3/css3-border-radius.html
盒子阴影
box-shadow的语法：
box-shadow：inset x-offset y-offset blur-radius color;
这个属性有五个值
- 阴影类型，可选值，如果不设置，默认的投影方式是外阴影；如果设置了inset是内阴影。
- x-offset：X轴位移，如果是正值，阴影在对象的右边。如果是负值，阴影在对象左边。
- y-offset：Y轴位移，如果是正值，阴影在对象的底部。如果是负值，阴影在对象顶部。
- blur-radius：模糊半径，代表阴影向外模糊的模糊范围。值越大向外模糊的范围越大，阴影的边缘就越模糊。这个只能是正值，如果是0，表示不具有模糊效果，是可选值。
- color：阴影颜色
.div1 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
background: lightcoral;
/*设置阴影*/
box-shadow: 3px 3px 6px #ff5656;
}
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)