一、CSS操作规范
1、CSS书写技巧
（1）最外层是一个<div id="bigDiv">，将所有元素都包进去
（2）去除<body>的外边距（body{margin: 0px;}） ，因为不同浏览器对body边距的处理有差别
（3）去除所有元素的内外边距（*{padding: 0px; margin: 0px;}），并让最大的盒子水平居中（#bigDiv{margin: 0px auto;}）
（4）布局多用<div>，使用4个属性：border=0、padding=0、margin=0、width
（5）做背景图片时，使用background这一背景属性（background-image：url(xxx/xxx.jpg);）。如果想将<ul>中<li>前的默认图标（实心圆点）换掉，要先将<ul>中<li>前的默认图标样式清除（list-style: none; ），之后加入自定义图片为其设置新的图标样式（list-style-image：url(xxx/xxx.jpg);）
（6）使用标签时，要先考虑是块元素还是行内元素
注：除使盒子居中，距浏览器的上下边距使用margin外，其他最好都使用padding。因为margin的兼容性不好
<head>
<title></title>
<style type="text/css">
/* 去除<body>的外边距 */
body {
margin: 0px;
}
/* 去除所有元素的内外边距 */
* {
padding: 0px;
margin: 0px;
}
/* 让最大的盒子水平居中 */
#bigDiv {
margin: 0px auto;
}
/* 为<ul>设置背景图片 */
ul {
background-image: url("1.jpg");
}
/* 将<li>前的默认图标（实心圆点）换掉 */
ul li {
padding: 10px;
margin: 20px;
/* 清除默认样式 */
list-style: none;
/* 添加自定义图片样式 */
list-style-image: url("1.jpg");
}
</style>
</head>
<body>
<!-- 最外层是一个<div>，将所有元素都包进去 -->
<div id="bigDiv">
<!-- 为<ul>设置背景图片 -->
<ul>
<!-- 将<li>前的默认图标（实心圆点）换掉 -->
<li>xxx</li>
</ul>
</div>
</body>二、通栏布局
1、导航栏和页面底部为通栏模块，它们始终横铺于浏览器窗口中。通栏布局的关键在于在相应模块的外面添加一层<div>，并将外层<div>的宽度设置为100%。而对于内部的子盒子，只要固定宽度并居中对齐即可
三、标签的注意事项
1、图片<img>
（1）默认情况下图片不显示边框，但在图片作为超链接时，会显示边框。border=0即可消除超链接图片的边框
（2）图片的宽高（width、height）通常只设置其中的一个，另一个会按原图等比例显示
2、表格<table>
（1）在没有添加css样式之前（默认情况下），表格没有边框/表格线，即border=0
（2）表格的宽度和高度靠其自身的内容来支撑，也可以设置width和height
（3）表格不能加滚动条，可以在<table>外嵌套一个<div>，设定<div>的高度，然后给<div>加滚动条（overflow: auto;）
（4）表格嵌套表格：里面表格的宽度一般用百分比（不设固定值），根据外面表格的变化而变化
（5）border-collapse: collapse;：表格边框合并 ，此时HTML中设置的cellspacing属性值无效
3、行<tr>
1、<tr>没有width属性，<tr>的宽度取决于<table>
2、<tr>没有border属性，但<th>、<td>有border属性
4、单元格<td>
1、<td>中有padding属性，但无margin属性（对<td>设置margin无效）
四、三大类标签（块元素、行内元素、行内块元素）
1、块元素
（1）块元素可以设置宽高、行高、顶底边距以及对齐属性
注：text-align只对块元素有效（eg：块元素中的文本、图片等内容），对行内元
最低0.47元/天 解锁文章
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
