Html回溯1
塊元素的特征：(block)
含義：能夠設置元素尺寸，隔離其他元素。
1：在沒有設置寬度的時候，默認為父級的寬度。
2：塊元素默認獨占一行。
3：支持所有css指令。
內聯元素的特征：(lnline)
含義：不能夠設置元素尺寸，它能自適應內容， 無法隔離其他元素。其他元素會緊跟其後。
1：寬高由內容撐開。
2：不支持寬高(width,height)屬性
3：同排可以跟上同類的標簽。
4：不支持上下的margin。
5：代碼中的換行要被解析。
內聯塊:(Inline-block)
含義：可以設置元素尺寸，但無法隔離其他的元素。
1：塊在一行顯示。
2：行內屬性標簽支持寬高。
3：沒有寬度的時候內容撐開高度。
4: 標簽之間的換行間隙會被解析。
5：ie6,ie7不支持塊屬性標簽的inline-block。
練習一：<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#parent a{
width: 17px;
height: 20px;
font: 12px ‘宋體‘;
border:1px solid #e0e1e2;
display:inline-block;
text-decoration: none;
text-align: center;
line-height: 20px
}
#parent .page{
width: 64px;
}
a:hover,.active{
background: #1f3a87;
color: #fff;
}
</style>
</head>
<body>
<div id="parent">
<a class=‘page‘ href=‘#‘>上一頁</a>
<a href=‘#‘>1</a>
<a href=‘#‘>2</a>
<a href=‘#‘ class=‘active‘>3</a>
<a href=‘#‘>4</a>
<a href=‘#‘>5</a>
<a href=‘#‘>6</a>
<a href=‘#‘>7</a>
<a href=‘#‘>8</a>
<a href=‘#‘>9</a>
<a class=‘page‘ href=‘#‘>下一頁</a>
</div>
</body>
</html>
float/文檔流 （讓塊元素在同一行顯示）
float: left|right|none|inherit
left:左浮動
right:右浮動
inherit:繼承父級的浮動屬性
none:不浮動
文檔流是文本當中可顯示對象在排列時所占用的位置。
浮動的定義:
使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停下來。
clear: left|right|both|none|inherit ：清楚某個方向上的移動。
Float的特征:
1：塊在一排顯示。
2：內聯支持寬高。
3：默認內容撐開寬度。
4：“脫離文檔流”。
5：提示層級半層。
清浮動方法：
1：加高度
問題：擴展性不好。
2：父級浮動
問題：頁面所有元素都需要加浮動，margin左右自動失效。
3：inline-block 。
問題：margin左右auto失效
4：br清浮動。
問題：不符合工作中：結構，樣式，行為，三者分離的要求
5：after偽類清浮動方法。（父級）
看實例:
:after{} IE6,7不兼容
zoom；ff不支持。觸發IE下haslayout,使元素根據自身內容計算寬高
6: 空標簽清浮動。
問題：IE6最小高度19px,（有2px偏差）
7: overflow: hidden
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完美清浮動</title>
<style type="text/css">
.clear:after{
content: ‘‘;
display: block;
clear: both;
}
.clear{
*zoom:1;
}
.parent{
border: 1px solid red;
}
.son{
background: pink;
width: 200px;
height: 200px;
float:left;
}
</style>
</head>
<body>
<div class="parent clear">
<div class="son"></div>
</div>
</body>
</html>
本文出自 “12897581” 博客，請務必保留此出處http://12907581.blog.51cto.com/12897581/1929513
Html回溯1