CSS样式的一些小总结

这是本人学习 css 两天的一些小总结和体会，如果有什么不足或错误的地方还请指教，纠错和探讨。

css 样式最令人头疼的地方就是一个属性有时候在这地方用可以，到另一个地方用却没效果了，或是冲突了。搞得头昏昏的，这时候得看文档才能明了，或做些小总结就心里有底了，下次不同的场景就知道用不同的 属性来实现效果，纠错也更明确思路了。

第一部分 ：line-height: 和 padding：

 line-height: 和 padding：

1.line-height:

line-height: 说明：检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

这句话看来半天越看越奇怪，实际开发中也经常碰到 行高不精确的问题

最经常见的是给字体居中显示，如我给<a 标签设置垂直居中，

外边框为 200px ，所以 line-height: 200px 效果就实现了。
所以我对上面 line-height 作用于行内元素的理解是这样的。注意是 行内元素

再给一个 快级元素的，如 <p 标签
现在下面一张图。

外边框为 200px ，所以 line-height: 200px 效果就 MD 尴尬了。

所以我对上面 line-height 作用于块级元素的理解是上图所标记的，所以要对 块级元素居中，实际行高要减去 2倍 字体大小，及 line-height：160px

其他行内元素和块级元素遇到行高问题可以依照上面这种思路分析分析。

2.padding：

padding： 说明：检索或设置对象四边的内部边距。

padding也跟上面 line-height 一样受行内元素和块级元素的影响

注意要点：行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。

第二部分: margin:0 auto; 和 text-align:center;

margin:0 auto; 和  text-align:center;

1.margin:0 auto;

margin:0 auto：说明：上下间距为0，左右自适应，及居中

这里只讨论居中的情况，不讨论 margin-left,marging-top等一些情况

 行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。

对于 行内元素设置居中：

但对于图片不用设置大小，

.text_div img{
          display: block;
          margin:0 auto;
      }

就能居中

对于块级元素

2. text-align:center;

text-align:center：说明：设置或检索对象中内容的水平对齐方式。

对于 行内元素使用 text-align，与 margin:0 auto 不同的是，不同设置元素的大小

.text_div a{
          display: block;
          text-align: center;
      }

对于 快级元素

那么 <img 标签呢，发现 text-align: center ；只对能作用于文字的标签有用，比如<a 标签， <p 标签等，<img标签需要外面嵌套个< a 标签才行，实际中也经常这么做。

最后来个效果图：

代码：
html:

 <div class="text_div"  >
               <img src="img/img.jpg"/>
               <p> 嗨 你好 ！</p>
               <a href=""> 点个赞</a>
           </div>

css:

.text_div{
          margin-top: 100px;
          margin-left: 50px;
          width:400px;
          height:400px;
          border: 1px solid  #7e1a05;

      }
      .text_div img{
          display: block;
          margin:0 auto;
      }
      .text_div p{
          text-align: center;
      }
      .text_div a{
          width: 70px;
          height: 22px;
          background:  #7e1a05;
          color: #FFF;
          border-radius: 2px;
          display: block;
          text-align: center;
          margin:0 auto;
          text-decoration:none;
          line-height: 22px;
      }

未完 ， 待续 .....