盒子模型(边框、内边距、外边距)、导航栏（HTML+CSS）

最新推荐文章于 2024-07-25 22:39:04 发布

我是一颗好李子

最新推荐文章于 2024-07-25 22:39:04 发布

阅读量1.9k

点赞数 2

分类专栏： HTML+css 文章标签： html css

本文链接：https://blog.csdn.net/m0_69034993/article/details/125392132

版权

HTML+css 专栏收录该内容

9 篇文章 7 订阅

订阅专栏

本文详细解读了CSS盒子模型，介绍了边框的构成、边距、内边距的作用及设置方法，包括边框样式、颜色和复合写法，以及内边距和外边距如何影响元素尺寸。此外，还涵盖了外边距合并现象及其解决方案，以及清除内外边距的技巧。

摘要由CSDN通过智能技术生成

盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框border、内边距padding、外边距margin和实际内容content

(1)边框（border）

border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

语法格式：

border: border-width || border-style || border-color;

属性	作用
border-width	定义边框粗细，单位是px
boeder-style	边框的样式
border-color	边框颜色

边框样式：solid(实线)、dashed(虚线)、dottde(点线)、double（双实线）

边框的复合写法：例：border: 1px solid red; 没有顺序

边框分开写法：

border-top: 1px solid red; 只定义上边框

border-right: 1px solid red; 只定义右边框

border-bottom: 1px solid red; 只定义下边框

border-left: 1px solid red; 只定义左边框

边框会影响盒子的大小，会额外增加盒子的实际大小

（2）内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding的复合写法：

值的个数	表达意思
padding：5px;	1个值，代表上下左右都有5像素内边距
padding：5px 10px;	2个值，代表上下内边距是5像素左右内边距是10像素
padding： 5px 10px 20px	3个值，代表上内边距5像素左右内边距10像素下内边距20像素
padding：5px 10px 20px 30px	4个值，上是5像素右是10像素下是20像素左是30像素

padding会影响盒子的大小，会额外增加盒子的实际大小

（3）外边距（margin）

margin属性用于设置外边距，即控制盒子与盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式与padding一样

外边距典型应用

外边距可以让块元素盒子水平居中，但是必须满足两个条件：

盒子必须指定宽度（width）

盒子左右的外边距都设置为auto

例：.header{ width:960px; margin: 0 auto;}

常见的写法：

margin-left: auto; margin-right: auto;

margin:auto;

margin：0 auto;

以上方法是让块元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center；即可

外边距合并

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

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，去两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案:尽量只给一个盒子添加margin值

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值

解决方案：

可以为父元素定义上边框

可以为父元素定义上内边框

可以为父元素添加overflow:hidden

清除内外边距

网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距

语法格式：

*{
 padding: 0; 清除内边距
 margin: 0;   清除外边距
}

注：行内元素为了照顾兼顾性，尽量只设置左右内外边距，不要设置上下内外边距。可以转换为块元素或者行内块元素在设置

导航栏（HTML+CSS）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				/*设置盒子高度*/
				height: 40px;
				/*设置上边框*/
				border-top: 3px solid orange;
				/*设置下边框*/
				border-bottom: 1px solid ghostwhite;
				/*设置背景颜色*/
				background-color: white;
				/*实现文字居中值等于height*/
				line-height: 10px;
			}
			a{
				/*转换为行内块元素*/
			    display:inline-block;
			    /*设置高*/
			    height: 40px;
			    /*设置内边距*/
			    padding: 20px 20px 0 20px;
			    /*设置字体大小*/
			    font-size: 20px;
			    /*设置字体颜色*/
				color: gray;
				/*去除超链接样式*/
				text-decoration: none;
			}
			/*鼠标经过链接变换背景颜色*/
			a:hover{
				background-color:burlywood;
				color: orangered;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#">喜洋洋</a>
			<a href="#">懒洋洋</a>
			<a href="#">沸羊羊</a>
			<a href="#">暖洋洋</a>
			<a href="#">美洋洋</a>
			<a href="#">村长</a>
		</div>
	</body>
</html>

结果图：