么写一个优质的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的原型链