书写html页面时的一些小技巧

当我们在书写静态页面时，有时一些简单的小技巧可能会提高我们的效率，今天为大家总结一些，希望可以帮助到大家。
1.当我们需要图片水平居中时

 1.水平方向：text-align:center 垂直方向：line-height:X(X为父元素高度)
 2.text-align:vertical 

2.有水平就有垂直，图片垂直居中

1.先设置和父元素同样的宽度：line-height:XXpx  再在子元素添加vertical-align:middle
2..valign{text-align:center;}
.valign img{vertical-align:middle;}
.valign:after{content:"";display:inline-block;vertical-align:middle;height:100%;}

3.关于高度自适应

子元素无法撑开父元素，要写height    
如果高度自适应有“底线”，用min-height  属性设置最小高度   最小高度自适应 hack1:min-height:value; _height:value;    height:content;

4.关于宽度自适应

子元素盒模型width总和等于父元素width，为了调整子元素，尽量不要写width：100%
width:100%一般可以用在图片元素上，width:100%是格固定值，等于父元素width      而width:auto  是宽度自适应，宽度实时自调整
1.如果父元素和子元素是同样大小的情况下，父子元素总有一个不要写
2.父元素会被子元素撑开的情况下，父子元素总有一个不要写
注意：高度height不会自适应！所以一般父元素内只有一个子元素，且子元素与父元素宽高完全一样，可以给父元素只写height，让子元素的width自适应

5.浮动元素高度塌陷解决方法

1.overflow:hidden; 自动检索子元素高度。
2.clear:both; 清除浮动  (在最后一个浮动元素之后添加一个块元素 来清浮动)
3.万能清除法：配合第二种方式通过伪元素实现（推荐）
clear:after { content:""; clear:both; display:block;}

6.解决margin-top向上传递问题

给父元素设置overflow：hidden.（当给父元素中第一个子元素的margin-top  会出现此种情况，即margin-top穿过父元素的的范围，从而达不到调整距离的需求）

7.常见的几种圆角设置

小圆角：border-radius:5px
小圆角（按钮）：border-radius:为短边长度的一半
圆：border-radius 边长的一半（正方形）
半圆：border-radius 值为短边长度（长宽比为2的长方形）

8.文本溢出隐藏

width:200px; 文本超出200(200自定义，可改)才隐藏
white-space:nowrap; 强制不换行
overflow:hidden; 溢出隐藏属性
text-overflow:ellipsis; 文本溢出隐藏时出现省略号

9.文本居中问题

text-align：center  让某文本居中要加在其父元素上

暂时就想到这些，后面如果有发现，再分享给大家