css三無準則: 無寬度（充分利用流特性）、無浮動、無
無寬度與寬度分離分離準則相通
瀏覽器相容（區別）：ie8僅支援單冒號的偽元素 如：
.element:before{}
常用清楚浮動方式
/*清楚浮動
*/.clearfix.clearfix:after
需求： 頁面某模組的文字內容是動態的，希望文字少的時候居中顯示，超過一行居左顯示
<div
class
="container"
>
<
div
class
="box"
>
<
p id
="conmore"
class
="content"
>文字內容-新增文字-新增文字-新增文字
p>
div>
div>
<
div
style
="height: 10px;"
>
div>
<
div
class
="container"
>
<
div
class
="box"
>
<
p id
="conmore"
class
="content"
>文字內容
p>
div>
div>
<
style
>
.container
.box
.content
style
>
由於img標籤在firefox瀏覽器中的產生的差異，可以在reset.css中設定予以相容：
img
利用 padding 實現高度可控的分割線（登入 | 註冊）
<a href
="">登入
a><
a href
="">註冊
a>
<
style
>
a+ a:before
style
>
margin 實現等高布局（兩蘭、三欄等） ps: margin 的百分比無論水平還是垂直都是相對於寬度計算的
<div
class
="container"
>
<
div
id="colleft"
class
="column-left"
>
<
h4>正方觀點
h4>
<
p>觀點1
p>
<
p>觀點1
p>
<
p>觀點1
p>
<
p>觀點1
p>
div>
<
div
id="colright"
class
="column-right"
>
<
h4>反方觀點
h4>
<
p>觀點1
p>
div>
div>
<
style
>
.container
/*核心**
*/.column-left,
.column-right
.column-left
.column-right
style
>
文字溢位顯示省略號
/*多行文字
*//* ff不相容，參考鏈結
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
/*控制行數
*/overflow: hidden;
/*單行文字
*/overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
《css世界》的讀書筆記
1.等元素在使用鍵盤進行tab鍵切換時可以被選中，即獲取到焦點，表現為虛框或者外發光，這類元素為焦點元素 非焦點元素 等沒有設定tabindex屬性，即無法被tab鍵獲取。在ie6 7瀏覽器下，非焦點元素對 active置若罔聞。這裡涉及到ie6，7的相容性 2.ie瀏覽器不支援 偽元素的 disp...
《CSS世界》讀書筆記（七）
根據是否具有可替換內容，我們可以把元素分為替換元素和非替換元素。或表單元素和都是典型的替換元素。1 內容的外觀不受頁面上的css的影響。用專業的話講就是樣式表現在css作用域之外。例如 直接 input type checkbox 無法更改內間距 背景色等樣式，需要用瀏覽器自身暴露的一些樣式介面，例...
css世界讀書筆記 line height（0）
預設空div高度是0，但是一旦寫上幾個文字，高度就有了，這個高度由何而來？表面上看，是有font size決定的，但是本質上，是由line height全權決定的，與font size大小無關。注意這裡面的完全，即padding，border屬性對於可視高度無任何影響 對於文字這樣的純內聯元素，li...