1.行內元素不能指定上下外邊距 (margin-top,margin-bottom)
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background: #0094ff;
}
span{
margin: 100px;
background: blue;
}
</style>
</head>
<body>
<!--行內元素不能指定上下外邊距-->
<span>行內元素</span>
</body>
</html>
上下外邊距不生效，另外要行內元素要避免內邊距的使用，因爲預期效果可能不好。
2. 外邊距合併問題(子塊在父塊中塌陷）
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background: #0094ff;
}
.father {
width: 400px;
height: 400px;
background: #b200ff;
}
.son {
width: 200px;
height: 200px;
background: pink;
margin: 100px;
}
</style>
</head>
<body>
<!--外邊距合併問題-->
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
我們的預期效果是 子塊居中在父塊當中，但是我們發現父塊卻移動了，子塊與父塊之間的上邊距也沒有生效。
解決方案：
- 父塊加入 overflow: hidden;
![在這裏插入圖片描述]()
- 爲父塊加入邊框,例: border: 1px solid purple;
![在這裏插入圖片描述]()
3.文字垂直居中： 設置行高等於塊的高度
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 100px;
height: 50px;
line-height: 50px;
border: 1px solid purple;
}
</style>
</head>
<body>
<div>
文字垂直居中
</div>
</body>
</html>
4.width > padding > margin 在佈局時優先使用 width ,其次padding,最後margin
- width基本不會出現問題
- padding會影響盒子大小，需要計算
- margin會出現外邊距合併等問題，最後使用
5.浮動首先創建塊，浮動的元素總是找到他最近的父級元素對齊，但是不會超出內邊距的範圍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background: red;
border: 3px solid yellow;
padding: 10px;
}
.son {
width: 200px;
height: 200px;
background: purple;
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
6.浮動元素不佔位置，父塊很多時候不方便指定高度，此時佈局會改變，因此要清除浮動（更準確來說是清除浮動造成的影響。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 400px;
background: pink;
}
.son1 {
width:100px;
height: 100px;
background: purple;
float: left;
}
.son2 {
width: 100px;
height: 100px;
background: hotpink;
float: left;
}
.other {
width: 300px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="other">
</div>
</body>
</html>
1.在浮動元素加個空塊
<div style="clear: both"></div>
缺點：結構化較差，繁瑣
2.父級添加overflow屬性
overflow: hidden | scroll | auto;
缺點：內容增多時有時會無法顯示需要溢出的元素
3.after僞類元素
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:box;
}
.clearfix {
*zoom: 1;/*兼容ie6 7*/
}
4.雙僞類元素
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
未完待續…