HTML中的盒子模型
盒子模型主要由四個部分組成
content（內容）：對應盒內內容
border（邊框）：對應包裝盒的外殼，有厚度
margin（外邊距）：位於邊框外部，是邊框與外部的間隙
padding（內邊距）：位於邊框內部，是內容與邊框的距離，對應包裝殼的填充部分
border
1.邊框線
border-width：設定邊框線寬度
border-style：設定邊框線樣式
border-color：設定邊框線顏色
<head>
<meta charset="utf-8">
<title>邊框線</title 2.背景樣式
background-color：設定背景顏色
background-image：設定背景圖片
background-position：設定背景圖片的位置
background-size：設定背景圖片的大小
background-repeat：設定背景圖片是否重複
background-attachment：設定背景圖片相對瀏覽器的定位位置
<head>
<meta charset 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>
