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;
      }

未完 ， 待续 .....