关于html css 的部分细节处理的经验 网页布局分析

1 打开psd图，进行页面划分，先大体模块儿，再细节
3、html css中清除属性时，一般将值设置为none;但是在line-height中，设置为none非法，所以如果样式中继承了父类的属性影响正
 常效果，则将该值设置为normal，
4、浏览器的兼容性问题
5、input  select
在浏览器中位置高度不一致，则通过修改
Select  与input
的height  line-height  实在不行，则通过相对定位（相对定位指的是相对于自己原来的位置进行改变）来修订
Input{
Position:relative;
Left|right|top|bottom;
}
 
6、结构伪类  常见：li:last-child    first-child  nth-of-
7、li中前方的小图标两种添加方式；
1、加图片标签image
2、背景定位  background: url(imgs/li.jpg) no-repeat x y;
8、网页加入样式的三种方式：
1、标签头中；
2、<style type="text/css"></style>
3、 <link rel="stylesheet" type="text/css" href="index.css">  (注：这里的index.css可以换名字，路径建议写和html相对路径)  
9、 .css样式 文件中，一般开头为：
 *{margin: 0;padding: 0}   表示清除一般元素的内外边距  
10、 先大块儿分区时，在布局时可以为各个块儿添加一个背景颜色，以示分区，便于观察
a)  body{
b)  font-family: Times,"Times New Roman","微软雅黑";
c)  font-size:12px; /*一般情况下，大小为12   14
等*/
d)  line-height: 20px; /*一般行高*/
e)  background: #EEE;
f)  color: #000;
g) }
h) a{
i)  text-decoration: none;
j)  color: #000;
k)  display: inline-block;/*可以设置高度和宽度的行内元素*/
l) }
m)
n) a:hover{
o)  text-decoration: underline;
p)  color: red;
q) }
r) ul{
s)  list-style: none;
t) }
11、/*动态新增子元素，并设置清除浮动，这样div Ul dl的子元素浮动时候，
就不会出现无法包裹的问题
*/
div:after ul:after,dl{
content: '';
display: block;/*空的块级元素，清除浮动*/
clear: both;
}
12、background: linear-gradient(#fff,#efefef,#fff);/*表示渐变色 从白色到灰色再到白*/
13、Height  和 line-height
同时使用，可以使得div中的文字居中
14、Vertical-align: middle   该属性可以使得图片和文字垂直居中
15、Line-height:normal  可以屏蔽继承而来的一些不必要的高度
16、text-align:center;    可以使div中的文字等居中
17、Text-indent:  2em;   表示文本缩进2个子的宽度
18、Overflow；hidden；  在div中设置后，可以避免因为子元素浮动等造成div变形
19、 background: linear-gradient(#ffefe5,#fff);  用css做渐变色的设置/*表示从粉色到白色的渐变，这里可以多添加几个颜色，设置多个颜色的渐变*/        
20、 font-weight: bold;  表示字体加粗
原文：https://blog.csdn.net/zxllynu/article/details/77150141

方一碗：写的太好了.阅读完之后豁然开朗.回到原帖

写的太好了.阅读完之后豁然开朗.