使用css编写网页界面需要主要注意的几个点

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;