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;