css编写网页样式注意的点

1、编写前去格式化

需要关闭标签子代的外边距和内边距，不然产生的网页和屏幕的左边和右边会有空隙

<style type=\"text/css\">/* 关闭标签自带的外边距和内边距 */*{margin: 0;padding: 0;}

2、图标和文字一起显示的方法

方式一：在style标签中将图标作为文字显示标签的背景设置成背景之后，需要设置padding-left的宽度

background: url(../img/q-icon.png) no-repeat 0 center rgba(0,0,0,0);padding-left: 25px;

3、文本内容水平居中的方式

水平居中，可以设置style表中的text-align属性为center

#privacy{background-color: rgb(255,248,241);height: 40px;}#privacy>p{/* background-color: yellow; *//* 文本内容在文字标签中水平方向居中 */text-align: center;/* 文本内容垂直方向居中 */height: 100%;line-height: 40px;color: rgb(185,185,185);font-size: 12px;/* 同一个标签，图片文字对齐基准属性设置 */vertical-align: bottom;}

让div框居中也可以使用下面的方式：
margin-left:auto;
margin-right:auto;

4、文字内容垂直对其的方式

1）方式一：
第一步：设置相关标签高度为：100%
第二部：设置line-height的高度=父标签的高度
代码编写如3中代码所示
注意：如果涉及到文字标签的背景图片和文字不能显示在同一条水平线上，还需要设置vertical-align属性，此属性主要是对其基准设置，图片和文字可能对其的基准不一样，所以出现这种情况，可以修改图片或者文字的vertical-align属性为bottom/mindle/top试一下
2）方式2：
原理：先将标签移动至父标签一半高度的地方，然后再向上移动自己高度一半的距离

#logo>div{/* background-color: lavender; */float: left;margin-left: 140px;/* 垂直居中 */position:absolute;top: 50%;margin-top: -30px;/* line-height: 80px; */}

5、超链接下划线属性设置

text-decoration: none;                //无下划线text-decoration: underline;         //有下划线

6、标签边框后，当鼠标放到标签上，又会出现一个边框的解决办法

先设置边框的宽度为0，相当于取消了边框
在设置outline属性为0，此时点击标签，标签就不会在出现边框效果

border: 0;outline: 0;