CSS样式详解：边框、背景、外边距、内边距与显示属性-优快云博客

本文链接：https://blog.youkuaiyun.com/zwb1365237878/article/details/111239042

盒子模型主要由四个部分组成
content（内容）：对应盒内内容
border（边框）：对应包装盒的外壳，有厚度
margin（外边距）：位于边框外部，是边框与外部的间隙
padding（内边距）：位于边框内部，是内容与边框的距离，对应包装壳的填充部分

border

1.边框线
border-width：设置边框线宽度
border-style：设置边框线样式
border-color：设置边框线颜色

<head>
		<meta charset="utf-8">
		<title>边框线</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				/* border-width: 5px;
				border-style: dashed;
				border-color: #0000FF; */
				border: 3px double #FF0000;
				/* 控制四条边的样式（上） */
				/* border-top-color: red;
				  border-top-width: 5px;
				  border-top-style: dotted; */
				  border-top: red 5px dotted;
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

2.背景样式
background-color：设置背景颜色
background-image：设置背景图片
background-position：设置背景图片的位置
background-size：设置背景图片的大小
background-repeat：设置背景图片是否重复
background-attachment：设置背景图片相对浏览器的定位位置

<head>
		<meta charset="utf-8">
		<title>背景样式</title>
		<style>
			div{
				width: 2000px;
				height: 1000px;
			    /* background-color: #0000FF; 
				background-image: url(./image.jpg);
				background-size: 500px 500px;
				background-position: center;
				background-repeat: no-repeat;
				background-attachment: fixed; */
				background: #008B8B url(image.jpg);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

margin

margin-top：距离盒子顶部的距离
margin-right：距离盒子右侧的距离
margin-bottom：距离盒子底部的距离
margin-left：距离盒子左侧的距离

<head>
		<meta charset="utf-8">
		<title>外边距</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 500px;
				height: 500px;
				background-color: #0000FF;
			}
			
			div{
				margin: 0 auto;//让元素在水平方向居中
			}
			p,h4{
				width: 100px;
				height: 100px;
			}
			p{
				background-color: #FF0000;
				margin-bottom:50px ;
				margin-left: 50px;
			}
			h4{
				background-color: #8A2BE2;
				margin-top: 50px;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
			<h4></h4>
		</div>
	</body>

注意：当对父元素中的第一个子元素使用margin-top时，会出现margin塌陷的问题（父元素会随着第一个子元素整体下沉）
解决方法：
1.不让其作为第一个子元素不合适（添加了空元素有内容时会影响实际的距离）
2.给父元素添加一条边框线不合适（边框线的大小也会影响元素占据的位置大小）
3.使用内边距代替

padding

padding简写方式（margin简写方式也相同）
padding:20px 10px 15px 25px;分别代表上右下左
padding:20px 10px 15px;分别代表上左右下
padding:20px 10px;分别代表上下左右
padding:20px;上下左右

<head>
		<meta charset="utf-8">
		<title>内边距</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 500px;
				height: 500px;
				background-color: #0000FF;
			}
			
			div{
				margin: 0 auto;//让元素在水平方向居中
			}
			p{
				width: 100px;
				height: 100px;
			}
			p{
				background-color: #FF0000;
			}
			
			div{
				padding: 200px;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
			
		</div>
	</body>

display属性

用于改变元素的生成类型
display:none;隐藏元素
display:block;将元素变为块元素
display:inline;将元素变为行元素
display:inline-block;将元素变为行内块元素

使用display属性实现导航栏效果

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				margin: 100 auto;
				background-color: #0000FF;
			}
			p{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
			}
			div:hover p{
				/* display:none; */
				visibility: hidden;
			}
			
			
			a{
			  text-decoration: none;//下划线
			  color: white;
			}
			ul{
				list-style: none;
				font-size: 0;
			}
			ul li{
				display:inline-block;
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				color: white;
				background-color:pink;
			}
			ul li{
				font-size: 15px;
			}
			ul li:hover{
			  background-color: #008B8B;
			}
			ul li:hover a{
			  color: #483D8B;
			}
			
		</style>
	</head>
	<body>
		
		<div>
			<p></p>
		</div>
		<hr >
		<ul>
		  <li>
		    <a href="">B站主页</a>
		  </li>
		  <li>
		    <a href="">游戏中心</a>
		  </li>
		  <li>
		    <a href="">漫画</a>
		  </li>
		  <li>
		    <a href="">番剧</a>
		  </li>
		</ul>
	</body>