復習CSS - diligenceday－IT工程師數位筆記本

文章出處

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
<style>
/*(Eric Meyer’s CSS 清零代碼)清零代碼*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
</style>
<!--
CSS 盒子模型負責處理以下事情:

    一個 blcok （區塊）級對象占據多大的空間
    該對象的邊界，留白 //margin; padding
    盒子的尺寸 //width; height; border
    盒子與頁面其它元素的相對位置 //float; position; inline
-->

<!--
CSS 盒子模型有以下準則:
    
    Block （區塊）對象都是矩形 （事實上所有對象都如此）
    其尺寸由 width, height, padding, borders, 以及 margins 決定
    如果不設置高度，該盒子的高度將自動適應其包含的內容，加上留白等（除非使用了 float）;
    如果不設置寬度，一個非 float 型盒子水平上將充滿其父容器（扣除父容器的留白）
-->
<div style="float:left;background:#666">
	111
    //進行float的元素的寬度收縮了
</div>
<div style="float:left;background:#333;width:100%;">
	222
    //就把這個元素的width設置100%
</div>
<div style="float:left;background:#333;width:100%;margin:10px;">
	3333
    //元素的width設置100%,又去設置margin或者padding的話，會破其父容器出現滾動條哦
</div>
<div style="clear:both">clear</div>
<div>
222
</div>
<div style="margin-bottom:100px;">
mb_100px;
</div>
<div style="margin-top:100px;">
出現了margin合并
mt_100px;
</div>
<div>
block: 1:下個元素會折行；2:寬度為100%
<br>
inline: 1:跟隨上一個元素； 2:不存在寬和高; 3:受到排版的影響；可以用verticalalign進行居中；
4：增加float屬性就會變成block元素了; 5: white-space, font-size, letter-spacing
</div>
<div>
以下是使用 float 和 clear 屬性的一些重要準則:

一個 float 對象，將從其置身的 block 級非 float 內容流中跳出，換句話說，如果你要將一個 box 向左邊 float，它后面的 block 級非  float 對象會顯示到下方，inline 級內容會在旁邊包圍
要讓一段內容從一側包圍一個 float  對象，這段內容必須要么是 inline 級的，要么也設置為相同方向的 float
一個 float 對象，如果沒有設置寬度，則會自動縮成其包含的內容的寬度，因此最好為 float 對象明確設置寬度
如果一個 block  對象包含 float  子對象，會出現本文中闡述的問題。
一個設置了 clear 屬性的對象，將不會包圍其前面的 float 對象
一個既設置了 clear 又設置了 float 屬性的對象，只有 clear:left 屬性生效，clear:right 不起作用
</div>
<div>
IE 瀏覽器最常見的問題:<br>
IE6 中不可濫用 float，否則會帶來內容消失以及文字重復等稀奇古怪的問題<br>
IE6 中，float 對象，在 float 方向的那邊，會出現雙倍 margin，將 display 設置為 inline 會解決這個問題<br>
IE6/7 中，一個沒有直接或間接設置 hasLayout 的對象，會發生各種稀奇古怪的問題 （譯者注：對這類問題，zoom 這個 css 屬性可以幫很大的忙，將 zoom 設置為除了 normal 之外的其它值，可以迫使一個對象 hasLayout 同時不影響這個對象的任何視覺外觀）<br>
IE6 不支持 min-width, max-width, min-height, max-height 一類的屬性<br>
IE6 不支持固定位置背景圖<br>
IE6/7 不支持很多 display 屬性值（如 inline-table, table-cell, table-row）<br>
IE6 中，只有 a 這個對象才可以使用 :hover 這個偽類<br>
IE 的某些版本對某些 CSS 選擇器支持很少（如屬性選擇器，子對象選擇器）<br>
IE6~8 對 CSS3 的支持很有限 (不過有一些變通方法)<br>
IE6--7中的padding是包含在寬里面，不符合W3C標準
</div>
//50個值得收藏的實用CSS代碼片段
//http://www.open-open.com/news/view/b6f3e5
</body>
</html>

文章列表