css进行布局

• 在旧版浏览器中为HTML5元素添加样式

　　IE9以下的IE浏览器会忽略它们不原生支持的元素的css。解决方法是使用htm5-shiv的javascript文件，可以从github上下载，加载到本地。

　　在head元素内，link后面添加以下代码：

<!--[if lt IE 9 ]>
<script src="引入html5-shiv"></script>
<![endif]-->

• css盒状模型

　　盒状模型是指，盒子是有元素内容、padding、border、margin构成的，将元素与周围的元素隔开。默认情况下，css的width指的是元素的内容区域，而浏览器显示的宽度则是内容宽度+padding+border的宽度之和。

　　将box-sizing:border-box，设置width值等于除margin以外的其他的和。

　　*{

　　　-webkit-box-sizing:border-box;

　　　-moz-box-sizing:border-box;

　　　box-sizing:border-box

　　}

• 控制元素的显示类型和可见性

　　　　1）指定元素的显示方式：display,  其值有block , inline ,inline-block,none。设为none时元素隐藏，不占用空间。

　　　　2）控制元素的可见性：visibility ,其值有hidden  visible  ,隐藏后会占用空间

　　　　3）width:auto , 元素的父元素则会自动设置元素的宽度，width等于父元素的宽度-border-padding-margin.

　　　　4)  指定了width,且margin{0 auto}, 左右外边距设置为auto, 居中显示

　　　　5）min-height, 至少具有某一个高度 。 max-width   min-width  max-height

　　　　6)  设置边框  border-width  border-color  border-style  border-top-width  ,  border:none取消边框

• 　使元素浮动

　　　　浮动元素脱离了文档流,浮动元素的display变成block。

　　　　float:left  float:right   float:none

　　　　清除浮动，clear:left () clear:right  clear:both　　

　　　　让浮动元素的父元素自清除：

　　　　为父元素添加类名clearfix后，添加如下样式：

　　　　.clearfix:before,

　　　　.clearfix:after{content:"" ;  display:table}

　　　　.clearfix:after{clear:both;}

　　　　.clear{*zoon:1}

• 为元素进行定位

　　　　position: fixed  relative  absolute  static

　　　　fixed: 元素是相对于浏览器窗口定位

　　　　absolute: 元素是相对于设置了position:relative  和 position:fixed 的父元素的定位，绝对定位，脱离了文档刘

　　　　relative: 元素是相对于元素自身的初始位置定位

　　　　在进行定位时如果元素出现重叠情况，使用z-index来设置显示的次序，z-index值越大越显示在上面。

• 处理溢出

　　　　overflow属性控制元素在盒子外面的部分，其值有visible, hidden , scroll ,auto

• 垂直对齐元素

　　　　vertical-align: sub   sup  baseline  top   bottom  text-top  text-bottom  middle