中文文字对齐
<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值.
