css tricks

中文文字对齐

<div class="demo">
<div><span>姓名</span></div>
  <div>
   <span>联系方式</span> 
  </div>
</div>

span{
  display:inline-block;
  border:1px solid red;
  width:4em;  //设置宽度,单位em
  line-height:20px; //设置行高
  height:20px;//必须设置高度,否则下面的伪元素会显示出来
  text-align:justify;//设置对齐方式,其实就是跟下面的伪元素对齐
  overflow:hidden;//隐藏伪元素
}
span::after{ //用于对齐的伪元素
  content:"";
  display:inline-block;
  width:100%;//必须设置为100%
  border:1px solid blue;
  
}

效果

line-height

如果不设置行高那么默认会有一个值,让行高看起来合理;
设置为数字(mdn推荐)

高度为:数字*字体大小,如font-size:12px,line-height:2,那么实际高度为24px

image.png

em或者百分比%
两者同样可以设置line-height大小,效果也类似于数字,但是两者会受到其他因素影响,从而达不到我们想要的效果,因而更推荐使用数字设置

清除浮动

清除浮动一般用于float元素上

 .clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

text-align

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align并不控制块元素自己的对齐,只控制它的行内内容的对齐.
常用的属性:

center
行内内容居中。
justify
行内内容两端对齐
left
行内内容向左侧边对齐
right
行内内容向右侧边对齐。

margin合并

父元素如果没有东西挡住子元素,那么就会出现margin合并问题.
但是如果父元素有padding或者border值就可以避免合并,设置border:0.1px solid red; 或者设置父元素padding值.