当前位置：首页 > news >正文

CSS学习8[重点]--盒子模型边框、内外边距设定和外边距合并

news 2025/7/10 17:24:39

盒子模型

一、网页布局
二、盒子边框(box-border)
三、内边距(padding)
四、外边距(margin)
五、外边距合并

一、网页布局

CSS三大模块：盒子，浮动，定位。
盒子模型是把html中每个元素看成一个矩形的盒子。
每个矩形由元素内容、边距、边框组成。

二、盒子边框(box-border)

常用盒子边框设置

border: border-width || border-style || boder-color

设置border-style

none 无
solid 单实线，最为常用
dashed 虚线
dotted 点线
double 双实线

<html><head><style>div {width: 100px;height: 200px;border-width: 1px; /*边框宽度*/border-color: pink; /*边框颜色*/border-style: solid; /*边框样式*/border-style: dashed;border-style: dotted;}</style></head><body><div>我是一个盒子</div></body>
</html>

<html><head><style>.user {border-width: 1px; /*边框宽度*/border-color: pink; /*边框颜色*/border-style: solid; /*边框样式*/}.nc {border-top-width: 1px; /*上边框宽度*/border-top-color: pink; /*上边框颜色*/border-top-style: solid; /*上边框样式*/border-bottom-width: 1px; /*下边框宽度*/border-bottom-color: pink; /*下边框颜色*/border-bottom-style: solid; /*下边框样式*/}.email {border-top: 1px solid red;border-bottom: 1px solid green;}.ph {border: 1px solid skyblue;}</style></head><body>用户名：<input type="text" class="user"/><br/><br/>昵 称：<input type="text" class="nc"/><br/><br/>邮 箱：<input type="text" class="email"/><br/><br/>手 机：<input type="text" class="ph"/><br/><br/></body>
</html>

表格边框美化

table {border-collapse: collapse} 合并相邻边框

<html><head><style>table {width: 100px;height: 200px;border: 1px solid pink;border-collapse: collapse;}td {border: 1px solid pink;}</style></head><body><table><tr><td>123</td><td>345</td><td>234</td></tr></table></body>
</html>

圆角边框

<html><head><style>div {width: 200px;height: 200px;border: 1px solid pink;}div:first-child {border-radius: 10px; /*设置角度，越大越圆*/}div:nth-child(2) {border-radius: 100px; /*取值取高宽的一半会变成圆⚪*/border-radius: 50%;}div:nth-child(3) {border-radius: 10px 40px; /*左上和右下是10px，令两个是40*/}div:nth-child(4) {border-radius: 10px 40px 80px; /*左上是10px，右上左下是40px 右下80px*/}div:nth-child(5) {border-radius: 10px 40px 80px 100px; /*左上是10px，右上是40px 右下80px 左下是100px*/}div:nth-child(6) {border-radius: 50%; height: 100px;}</style></head><body><div>10px</div><div>50%或者100px</div><div>10px 40px</div><div>10px 40px 80px</div><div>10px 40px 80px 100px</div><div>胶囊</div></body>
</html>

三、内边距(padding)

内边距：内容距离边框的距离

padding: 值；

 - 一个值，上下左右- 两个值，上下是1，左右是2；- 三个值，上是1，左右是2，下是3；- 四个值，上右下左，顺时针

<html><head><style>div {width: 200px;height: 200px;padding-left: 10px;padding: 10px; /*只写一个值表示上下左右都是10px*/}</style></head><body><div>内容</div></body>
</html>

新浪导航栏

<html><head><style>nav {height: 41px;background-color: #FCFCFC;border-top: 3px solid orange;border-dottom: 1px solid #EDEEF0;}nav a {font-size: 14px;color: #4C4C4C;text-decoration: none;/*width: 100px;*/height: 41px;background-color: pink;/*链接是行内元素没有大小，需要转换*/padding: 0 15px;display: inline-block;}nav a:hover {ibackground-color: #eee;}</style></head><body><nav><a href="#">首页</a><a href="#">手机新浪网</a><a href="#">网页导航</a></nav></body>
</html>

四、外边距(margin)

外边距：盒子外边距离
外边距可以实现盒子居中对齐，给左右设置auto。
- 必须是块级元素
- 盒子必须指定宽度（width）
.header { width: 900px; margin: 0 auto;}
```
<html><head><style>div {width: 100px;height: 100px;margin: 30px auto;padding: 4px;}</style></head><body><div></div></body>
</html>
```

居中和图片

<html><head><style>div {width: 100px;height: 100px;margin: 30px auto;/*盒子*/text-align: center;/*文字*/}section img {width: 200px;height: 100px;margin-top: 30px;margin-left: 50px; /*插入图片也是盒子*/}aside {width: 200px;height: 100px;border: 1px solid purple;background: #fff url(#.png) 0 0 no-repeat;background-size: 200px 100px;}</style></head><body>1. 文字水平居中 和盒子水平居中<div>文字</div>2. 插入图片和背景图片大小<section><img src="#.png" height="689" width="123" alt=""></section><aside>123</aside>3. 一般情况下，背景图片适合做小图标</body>
</html>

清除元素内外边距
```
<html><head><style>* {padding: 0; /*清除内边距*/margin: 0; /*清除外边距*/}</style></head><body></body>
</html>
```
注意：行内元素只有左右内外边距，没有上下内外边距。尽量不给行内元素指定上下的内外边距。

五、外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是两个之和，而是二者之中的较大者。
尽量避开即可。

<html><head><style>div:first-child {width: 300px;height: 300px;background-color: pink;margin-bottom: 50px;}div:last-child {width: 300px;height: 300px;background-color: pink;margin-bottom: 30px;}</style></head><div></div> <!--上下两个盒子的距离为50px--><div></div><body></body>
</html>

嵌套块元素垂直外边距的合并
对于嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为二者中较大的值，即使父元素的上外边距为0，也会发生合并。
解决方案：

为父元素定义1像素的上边框或者上内边距。
为父元素添加overflow: hidden。

<html><head><style>.father {width: 300px;height: 300px;background-color: pink;/*border: 1px solid red; /*解决外边距合并问题*//*padding: 1px;*//*overflow: hidden; BFC*/}.son {width: 300px;height: 300px;background-color: pink;margin-top: 30px; /*只有这一行时，两个盒子一起距离30px，两个盒子top重叠*/}</style></head><div class="father"> <div class="son"></div></div><body></body>
</html>