-
①盒子水平居中注意
可以讓一個(gè)盒子實(shí)現(xiàn)水平居中罩抗，需要滿(mǎn)足一下兩個(gè)條件：
必須是塊級(jí)元素统求。
盒子必須指定了寬度（width）
代碼
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
line-height: 文字垂直居中;
text-align: center; /*可以讓盒子內(nèi)容（文字 行內(nèi)元素 行內(nèi)塊元素）居中對(duì)齊*/
width: 300px;
height: 100px;
background-color: pink;
/*寫(xiě)法一*/
/* margin: 0 auto; 通俗寫(xiě)法 0 auto 上下是 0 左右是auto 自動(dòng) 水平居中對(duì)齊 */
/*寫(xiě)法二*/
/* margin-left: auto;
margin-right: auto; 自動(dòng)充滿(mǎn)*/
/*寫(xiě)法三*/
/* margin: auto; 上下左右都是auto*/
margin: 100px auto;
}
</style>
</head>
<body>
<div>
我是盒子
</div>
</body>
</html>
效果
效果
-
②相鄰塊元素垂直外邊距的合并
有 A 盒子 與 B 盒子
給A盒子底部設(shè)置margin-bottom: 100px;
給B盒子頂部設(shè)置margin-top: 150px
則AB 之間的垂直距離不會(huì)相加為 250px 要以大的距離為準(zhǔn)為150px
示例圖
代碼
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
background-color: purple;
}
.xiongda {
margin-bottom: 100px;
}
.xionger {
background-color: pink;
margin-top: 150px; /*最終兩個(gè)盒子的距離是 最大的那個(gè)為準(zhǔn) 150*/
}
</style>
</head>
<body>
<div class="xiongda">1</div>
<div class="xionger">2</div>
</body>
</html>
效果
效果
-
③padding不會(huì)撐開(kāi)盒子
如果一個(gè)盒子和父親一樣寬,占滿(mǎn)父親的寬度, 如果此盒子沒(méi)有給定寬度 則padding 不會(huì)影響本盒子大小
如果給定了寬度則盒子會(huì)受影響.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 200px;
height: 300px;
background-color: pink;
/*padding-left : 30px;因?yàn)楦负凶佑袑挾冉o定值了 則padding會(huì)撐開(kāi)*/
}
.son {
padding-left : 30px
/*兒子 沒(méi)有給定寬度 ,用的是默認(rèn)的 ,所以padding不會(huì)被撐開(kāi)*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
-
④嵌套元素垂直外邊距合并
問(wèn)題描述 :
B盒子在A盒子之內(nèi) ,B盒子想距離A盒子下方50px 采用 margin-top: 50px失效
但是對(duì)于左右則好用margin-left: 50px
示例圖
問(wèn)題代碼
.father {
width: 500px;
height: 500px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
margin-left: 50px;
}
問(wèn)題效果
解決方法
- 可以為父元素定義1像素的上邊框或上內(nèi)邊距。(padding)
- 可以為父元素添加overflow:hidden。
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
/*padding-top: 50px;*/
/*border-top: 1px solid pink; 1. 用border*/
/*padding-top: 1px; 2 用padding */
overflow: hidden; /* 3. 用這個(gè)單詞可以解決耕陷，具體單詞的意思我們后面講*/
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
修改后效果
修改后效果
