盒子模型(第二章)
一、盒子的组成部分
CSS 会把所有的 元素将作为块级元素显示。 元素将作为内联元素显示。 元素将作为行内块元素显示。 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。
- margin（外边距）： 盒子与外界的距离
- border（边框）： 盒子的边框。
- padding（内边距）： 紧贴内容的补白区域。
- content（内容）：元素中的文本或后代元素都是它的内容。
图示
结论
盒子的大小 = content + 左右 padding + 左右 注意：外边距 border 。
外边距 margin 不会影响盒子的大小，但会影响盒子的位置
示例
markdown
<style>
div {
/* 内容区宽 */
width: 400px;
/* 内容的高 */
height: 400px;
/* 内边距 */
padding: 20px;
/* 边框 */
border: 10px solid transparent;
/* 外边距 */
margin: 50px;
font-size: 20px;
background-color: gray;
}
</style>
</head>
<body>
<div>你好啊，盒子模型</div>
</body>二、盒子内容区域 content
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| width | 设置内容区域宽度 | 长度 |
| max-width | 设置内容区域的最大宽度 | 长度 |
| min-width | 设置内容区域的最小宽度 | 长度 |
| height | 设置内容区域的高度 | 长度 |
| max-height | 设置内容区域的最大高度 | 长度 |
| min-height | 设置内容区域的最小高度 | 长度 |
-
注意
max-width、min-width 一般不与 width 一起使用。 max-height、min-height 一般不与 height一起使用。
三、盒子内边距（padding）
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| padding-top | 上内边距 | 长度 |
| padding-right | 右内边距 | 长度 |
| padding-bottom | 下内边距 | 长度 |
| padding-left | 左内边距 | 长度 |
| padding | 复合属性 | 长度，可以设置 1 ~ 4 个值 |
使用规则
- padding: 10px; 四个方向内边距都是 10px。
- padding: 10px 20px; 上10px，左右20px 。（上下、左右）
- padding: 10px 20px 30px; 上10px，左右20px，下30px。（上、左右、下）
- padding: 10px 20px 30px 40px; 上10px，右20px，下30px，左40px。（上、右、 下、左）
使用注意事项
- padding 的值不能为负数
- 行内元素的 左右内边距是没问题的，上下内边距不能完美的设置
- 块级元素、行内块元素，四个方向内边距都可以完美设置
示例
markdown
<style>
div {
width: 400px;
height: 400px;
/* 复合属性， 代表的是四个方向 */
/* padding: 40px;
padding-left: 20px;*/
/* 上内边距
padding-top: 30px;*/
/* 右侧内边距
padding-right: 40px;*/
/* 底边 内边距
padding-bottom: 50px;*/
/* 复合属性 ，写两个值 上下 左右 */
/* padding: 10px 20px; */
/* 复合属性，三个值 上 左右 下 */
/* padding: 10px 20px 30px; */
/* 复合属性，四个值 上 右 下 左 */
padding: 10px 20px 30px 40px;
font-size: 30px;
background-color: skyblue;
}
span {
background-color: yellow;
font-size: 30px;
/* */
padding-left: 20px;
/* 行内右边起作用 */
padding-right: 50px;
/* 上边距没有用 对于行内元素 */
padding-top: 40px;
/* 下边距没有用 对于行内元素 */
padding-bottom: 50px;
}
</style>
</head>
<body>
<div>内边距padding</div>
<hr>
<span>内边距span</span>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, minima atque facere corporis et laboriosam expedita nihil accusantium autem modi similique iste recusandae cupiditate velit placeat? Autem, maiores laudantium? Dignissimos numquam cumque quod a ex odit hic magni repellendus sit nisi quo illum iure natus, earum tempore atque. Laudantium, ex!</div>
</body>四、盒子边框 (border)
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| border-style | 边框线风格 复合了四个方向的边框风格 | none： 默认值 solid： 实线 dashed： 虚线 dotted： 点线 double： 双实线 |
| border-width | 边框线宽度 复合了四个方向的边框宽度 | 长度，默认3px |
| border-color | 边框线颜色 复合了四个方向的边框颜色 | 颜色，默认黑色 |
| border | 复合属性 | 值没有顺序和数量要求。 |
| border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color | 分别设置各个方向的边框 |
复合属性
边框相关属性共 20个
border-style 、border-width、border-color其实也是复合属性
示例
markdown
<style>
div {
width: 400px;
height: 400px;
background-color: aqua;
/* border: 1px solid pink; */
/* border-width: 10px; */
border-left-width: 10px;
border-top-width: 20px;
border-right-width: 30px;
border-bottom-width: 40px;
/* border-color: pink; */
border-left-color: red;
border-top-color: orange;
border-right-color: green;
border-bottom-color: purple;
/* border-style: dashed; */
border-left-style: solid;
border-top-style: dashed;
border-right-style: double;
border-bottom-style: dotted;
/* 复合属性 不挑顺序 */
border-left: 30px pink solid;
border-top: 20px skyblue dashed;
border-right: 10px aqua double;
border-bottom: 40px gray dotted;
}
</style>
</head>
<body>
<div>你好啊！</div>
</body>五、盒子外边距(margin)
| CSS 属性名 | 功能 | 属性 |
|---|---|---|
| margin-left | 左外边距 | CSS中的长度 值 |
| margin-right | 右外边距 | CSS中的长度 值 |
| margin-top | 上外边距 | CSS中的长度 值 |
| margin-bottom | 下外边距 | CSS中的长度 值 |
| margin | 复合属性，可以写1~4个值，规律同padding（顺时 针） | CSS中的长度 值 |
注意事项
- 子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承装着 子元素）
- 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素 的位置。
- 块级元素、行内块元素，均可以完美地设置四个方向的margin；但行内元素，左右 margin可以完美设置，上下margin设置无效。
- margin的值也可以是 auto，如果给一个块级元素设置左右margin都为 auto，该块级 元素会在父元素中水平居中。
- margin的值可以是负值。
示例
mar
<style>
.outer {
width: 400px;
height: 400px;
padding: 50px;
background-color: bisque;
}
.inner {
width: 100px;
height: 100px;
margin: 50px;
background: orange;
}
</style>
</head>
<body>
<!-- 子元素的margin是参考父元素content元素计算的 -->
<div class="outer">
<div class="inner"></div>
</div>
------------------------------
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: red;
}
.box2 {
margin-top: 50px;
margin-bottom: 50px;
background-color: yellow;
}
.box3 {
background-color: green;
}
</style>
</head>
<body>
<!--上margin 左margin会影响自身位置，下 marin右margin 会影响兄弟元素原子 -->
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<hr>
<img src="../../个人总结md/1盒子模型图片/image-20250315204614337.png" alt="111" >
<img src="../../个人总结md/1盒子模型图片/image-20250315204614337.png" alt="" srcset="">
<img src="../../个人总结md/1盒子模型图片/image-20250315204614337.png" alt="" srcset="">
</body>
--------------------------
<style>
#d1 {
width: 400px;
height: 400px;
margin: 50px;
background-color: deeppink;
}
img {
margin: 50px;
}
.one {
background-color: deepskyblue;
}
.two {
background-color: darkred;
margin-left: 50px;
margin-right: 50px;
/* 行内元素 上下margin设置无效 */
margin-top: 4000px;
}
.three {
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 对于行内元素来说，左右的margin是可以设置的，上下的margin设置后是无效的 -->
<div id="d1">我是一个块级元素</div>
<img src="./image/image-20250315204614337.png" alt="">
<div>我是一段文字</div>
<hr>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="three">性相近</span>
-----
<style>
div {
width: 800px;
height: 100px;
/* margin-left: auto;
margin-right: auto; */
/* 块元素 水平居中了 */
margin: 10px auto;
background-color: deepskyblue;
}
span {
background-color: blueviolet;
margin: 10px auto;
}
</style>
</head>
<body>
<!-- margin的值可以是auto，给一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中 -->
<div>margin注意四</div>
<span>好好学习，我是内联元素</span> 五、margin 塌陷问题
什么是 margin 塌陷
第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。
如何解决margin 塌陷
- 给父元素设置不为 0 的padding。
- 给父元素设置宽度不为 0 的border。
- 给父元素设置 css 样式 overflow:hidden
示例
markdown
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
/* overflow: hidden; */
}
.inner1 {
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 50px;
}
.inner2 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1">inner1</div>
<div class="inner2">inner2</div>
</div>
<div>我是一段测试代码</div>
</body>六、margin 合并问题
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。 margin-bottom 何 margin-top
如何解决
写上边的时候直接把值加上下边，相当于只写一个值，用上边距+下边距;
布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。
示例
markdown
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
margin-bottom: 50px;
}
.box2 {
background-color: deeppink;
margin-top: 60px;
}
.test {
width: 200px;
height: 200px;
display: inline-block;
}
.testa {
background-color: aqua;
margin-right: 50px;
}
.testb {
background-color: deepskyblue;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<hr>
<div class="test testa">a</div>
<div class="test testb">b</div>
</body>