《最終幻想7重製版》蒂法肌肉Mod 一拳下去你會死
阿新 • • 發佈：2022-02-21
1.需求
1:給盒子設定四周20px 實線 藍色邊框。屬性如何設定？ border:20px solid blue
2：給盒子設定上邊框10px 虛線 黃色的邊框 屬性如何設定？ border-top:10px dashed yellow
3：盒子尺寸400*400，背景綠色，邊框10px 實線 黑色 如何完成
width:380px;height:380px; border:10px solid; background-color:green;
4：給盒子設定四周20px的內邊距可以通過什麼屬性設定？ padding:20px;
5：給盒子設定上下20px 左右30px的內邊距怎麼設定? padding:20px 30px;
6“給盒子設定左側50px的內邊距如何設定？ padding-left:50px;
7：那些屬性可以撐大盒子？
盒子的寬=width+padding左右+border左右
盒子的高=height+padding上下+border上下
2.外邊距
margin 盒子和盒子之間的距離
margin:10px;
margin:10px 20px;
margin:10px 20px 30px;
margin:10px 20px 30px 40px;
margin-left:10px;
margin-top:20px;
2.1 清除預設外邊距
瀏覽器會預設給部分標籤設定預設的margin和padding，但是在專案開始前 需要先清除這些標籤預設的margin和padding，後續自己設定
body 預設8px的外邊距
p標籤預設右上下的margin
ul 預設上下的margin和padding-left
....
清除預設樣式
body,button,dd,dl,dt,h1,h2,h3,h4,h5,h6,p,ul,li,ol,td,textarea{
margin:0;
padding:0;
}
*{
margin:0;
padding:0;
}
2.2 網頁新聞列表案例
佈局順序： 從外往內，從上往下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/base.css"> <title>網頁新聞列表案例</title> <style> .news { width: 498px; height: 398px; border: 1px solid #ccc; margin: 30px auto; padding-left: 43px; padding-top: 30px; padding-right: 30px; } .news h2 { border-bottom: 1px solid #ccc; padding-bottom: 10px; font-size: 30px; } .news ul li { height: 50px; line-height: 50px; font-size: 18px; border-bottom: 1px dashed #ccc; padding-left: 30px; } .news ul li a { color: #666; } </style> </head> <body> <div class="news"> <h2>最新文章/New Articles</h2> <ul> <li> <a href="#">北京招聘網頁設計,平面設計,php</a> </li> <li> <a href="#">體驗javascript的魅力</a> </li> <li> <a href="#">jquery世界來臨</a> </li> <li> <a href="#">網頁設計師的夢想</a> </li> <li> <a href="#">jquery中的鏈式程式設計是什麼</a> </li> </ul> </div> </body> </html>
2.3 外邊距正常情況
水平佈局的盒子 ，左右的margin征程，互不影響
最終兩者距離為左右margin的和
2.4 外邊距摺疊現象---1合併
垂直佈局的塊元素，上下的margin會合並
最終兩者距離為margin的最大值
解決：只給其中一個盒子設定margin就可以
2.5 外邊距摺疊現象---2塌陷
互相巢狀的塊元素，子元素的margin-top會作用在父元素上，導致父元素一起往下移動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外邊距塌陷現象</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: yellow;
}
.son {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.4.1 解決辦法1: 給父元素設定border-top或者padding-top （推薦）
給父元素設定border-top或者padding-top(分割父元素的margin-top)【】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外邊距塌陷現象</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: yellow;
padding-top: 50px;
}
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.4.2 解決辦法2: 給父元素設定overflow
給父元素設定overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外邊距塌陷現象</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: yellow;
/* border-top: 1px solid; */
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.4.3 解決辦法3 給子元素轉換為行內元素(不建議使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外邊距塌陷現象</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: yellow;
/* border-top: 1px solid; */
/* overflow: hidden; */
}
.son {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.4.4 給子元素設定浮動 （推薦）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外邊距塌陷現象</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: yellow;
}
.son {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.4.5 最後達到的效果
2.6 行內元素的margin和padding無效情況
行內標籤只作用於行，所以margin-top / margin-bottom / padding-top / padding-bottom 是不生效的
給行內元素設定margin和padding時
1：水平方向的margin和padding佈局中有效
2：垂直方向的margin和padding佈局中無效