HTML5前端开发入门之CSS清空默认边距 行高和字号属性

清空默认边距

1.为什么要清空默认边距(外边距和内边距)

在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等,

所以在企业开发中,编写代码之前第一件事就是情况默认的边距

 

2.格式:

*{

    margin:0;

    padding: 0;

}

 

3.注意点:

 通配符选择器会找到(遍历)当前界面中的所有标签,所以性能不好

 所以以后在企业开发中可以从http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css这个网址中拷贝以下代码

 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

行高与字号

1.什么是行高?

在CSS中所有的行都有自己的行高

 

注意点:

行高和盒子的高度不是同一个概念

 

规律:

1.文字在行高中默认是垂直居中的

2.在企业开发中,我们经常将盒子的高度和行高设置为一样,

  那么这样就保证一行文字在盒子的高度中是垂直居中的

简而言之:要想一行文字在盒子中垂直居中,那么只需要设置这行文字的行高等于盒子的高即可

3.在企业开发中如果一个盒子中有多行文字,

  那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中,

  只能设置padding来让文字居中

  例如:div{

            box-sizing: border-box;

            border: 1px solid #000;

            width: 100px;

            height: 80px;

            line-height: 20px;

            padding-top: 20px;

        }

注意点:

1.在企业开发中,如果一个盒子中存储的是文字,

 那么一般情况下我们会以盒子左边的内边距为基准,

 不会以右边的内边距为基准,因为这个右边的内边距有误差

2.右边内边距的误差,从何而来?因为右边如果放不下一个文字,

 那么文字就会换行显示,所以文字和内边距之间的距离就有了误差

3.顶部的内边距并不是边框到文字顶部的距离,而是边框到行高顶部的距离

猜你喜欢

转载自blog.csdn.net/qq_41886761/article/details/85396336