么寫一個優質的div+css頁面

1.margin屬性容易在低版本的IE中出現兼容性問題，盡量少用，可以選用padding或position方式代替。

2.在寬高固定、子元素比較多、子元素位置雜亂，子元素類型較多的區域中，盡量用定位方法來做，比如美團左側的產品區塊，如 果用margin來做，不同版本IE瀏覽器下的表現可能會讓你崩潰的。

3.能設置具體寬高的區塊盡量設置具體的寬高。

4.需要設置背景圖的元素盡量設置具體的寬高。

5.用常見的標簽和css屬性，盡量別用另類的用法。

6.放文字的標簽一定要設置行高

7.不要用行級標簽（a標簽、span標簽等）和文字標簽（p標簽等）當做劃分區域的標簽。

8.盡量不要在行級標簽內嵌套塊級標簽

9.了解自己寫的每一個標簽，每個標簽的大小范圍、屬性、嵌套層級都要很清楚才行，其實就是深入理解盒子模型。

10.深化區塊的概念，把頁面嚴格的分成不同的區塊，盡量避免不同區塊之間的沖突。

11.不知道不認識的屬性和標簽一定不要亂用

12.寫頁面的時候寫一點就測一下兼容性，發現問題及時改正，不要想著等到全寫完后統一調試兼容性。

13.前端開發最忌諱直接參考別人的標簽和寫法，一定要有自己的開發思路，不要怕麻煩，一旦被別人的思路綁架，你會很痛苦的。

14.一般來說，開發兩個國美、京東規模的頁面就算入門了，開發五個以上就能體會到一定的開發技巧。開發的頁面數量越多，就越 熟練，hack用的也會越來越少。SO，動手去做吧！

透明度

?opacity: 0.5;

? w3c標準屬性，火狐等瀏覽器支持。取值范圍：0-1

?filter:alpha(opacity=50);

? IE瀏覽器支持的，取值范圍：0-100，取整數

visibility屬性

visibility 用來控制元素的隱藏和顯示狀態

visible 當前元素為顯示狀態

hidden 當前元素為隱藏狀態

用visibility隱藏的元素，元素原來所占的空間位置還在。

取消li標簽默認圓點

瀏覽器會默認給li標簽前面加一個黑圓點樣式，這種默認的樣式對現在的開發者來說已經沒有太大的用處了， 一般我們會取消掉這個默認的樣式，方法如下：

list-style：none;

CSS命名規范

對于頁面中具有唯一性、結構性的模塊，使用id選擇器，其他一般采用class選擇器

? 選擇器命名一律使用小寫字母

? 要有合理的注釋

? 結構上有父子包含關系的樣式，應通過命名體現。

? 命名使用駝峰結構+橫線，即同一對象的命名如果需要多個單詞， 使用駝峰命名法則，如：boxMusic

? 名字不能以數字開頭

? 命名的時候一定要有意義

lt;style>

*{ padding:0; margin:0;}

#box{ width:200px; height:200px; padding:30px; border:#000 solid 1px; margin:30px;s}

</style>

<div id="box" class="boxClass">

<p>1</p>

<p>2</p>

</div>

<script>

var box = document.getElementById("box");

console.dir(box);

</script>

盒子模型

1、私有屬性

//className 屬性設置或返回元素的 class 屬性

//clientHeight返回元素的可見高度（樣式高+padding）

//clientWidth返回元素的可見寬度（樣式寬+padding）

//clientLeft左側邊框的大小，即(offsetWidth-clientWidth)/2

//clientTop上側邊框的大小，即(offsetHeight-clientHeight)/2

//offsetHeight返回元素的高度（樣式高+padding+border）

//offsetWidth返回元素的寬度（樣式寬+padding+border）

//offsetLeft返回元素的水平偏移位置

//offsetTop返回元素的垂直偏移位置

//offsetParent返回元素的偏移容器

//scrollHeight滾動條的高度

//scrollWidth滾動條的寬度

//tagName返回元素的標簽名（大寫）

box的屬性__proto__指向HTMLDivElement的原型鏈