標籤：標籤 隔離 元素
塊元素的特徵：(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|inheritleft:左浮動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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
