前端H5初学笔记（四）

1. boder的可选值：
   none，默认值，无边框
   solid，实线
   dotted，点状边框
   dashed，虚线
   double，双线

2. margin还可以设置为auto，auto一般只设置给水平方向的margin
   如果只指定，左外边距或右外边距的margin位auto则会将外边距设置为最大值。
   垂直方向外边距如果设置为auto，则外边距默认为0

3. 浏览器默认样式
   浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多额元素设置了一些默认的margin和padding，我们往往在编写样式之前将这些默认的样式去掉。
   *{margin:0;padding:0;}

4. display和visibility
   通过display可以修改元素的类型，可选值：
   inline：将一个元素作为内联元素显示。
   block：将一个元素设置块元素显示。
   inline-block：将一个元素转换为行内块元素，可以使一个元素既有行内元素的特点又可以有块元素的特点，既可以设置宽高又不会独占一行。

   通过visibility可以用来设置元素的显示和隐藏状态，可选值：
   visible：默认值，元素在页面显示。
   hidden：元素隐藏不显示，但在页面中占位。

5. overflow
   设置父元素如何处理溢出内容，可选值：
   visible：默认值，不对溢出的内容做处理，元素会在父元素以外的位置显示。
   hidden：溢出的内容会被修剪，不会显示。
   scroll：为父元素添加滚动条，该属性无论内容是否溢出，都会添加水平和垂直双方向的滚动条。
   auto：会根据需求自动添加滚动条。

6. Block Formatting Context
   BFC属性默认关闭，开启后有如下特性：
   1.父元素的垂直外边距不会和子元素重叠。
   2.开启BFC的元素不会被浮动元素所覆盖。

   如何开启BFC
   1.设置元素浮动，使用这种方式开启，虽然可以撑开父元素，但会导致父元素的宽度丢失，而且这种方式也会导致下边元素上移，不能解决问题。
   2.设置元素绝对定位
   3.设置元素为inline-block，可以解决问题，但是会导致宽度丢失，不推荐使用这种方式。
   4.将元素的overflow设置为一个非visible的值，推荐设置为hidden，副作用最小的开启BFC方式。

   在IE6及以下中不支持，支持hasLayout，开启hasLaout直接将元素的zoom设置为1即可，zoom表示放大的意思，后边跟着的数值表示将元素放大几倍，1表示不放大元素，通过该方式可以开启hasLayout。zoom这个样式只在IE中支持，其他浏览器都不支持。在IE6中为元素设置宽度默认开启hasLayout。

7. clear清除浮动
   可选值：
   none：默认值，不清除浮动。
   left：清除左侧浮动元素对当前元素的影响。
   right：清除右侧浮动元素对当前元素的影响。
   both：清除两侧浮动元素对当期元素的影响，清除对他影响最大的那个元素。
   清除浮动后，元素回到其他元素浮动前的位置。

8. 解决高度塌陷
   可以直接在高度塌陷的父元素最后添加一个空白的div，由于这个div没有浮动，所以他可以撑开父元素的高度，然后对其进行清除浮动，基本没有副作用，但是会添加多余的结构。
   可以直接通过父元素的伪类:after清除浮动。
   .class:after{
content:"";
display:block;
clear:both;
}
   但在IE6中不支持after伪类，要结合
   .class{
zoom:1;
}
   使用。

9. position定位
   可选值：
   static：默认值，元素没有开启定位
   relative：开启元素相对定位
   absolute：开启元素绝对定位
   fixed：开启元素的固定定位（也是绝对定位的一种）

position：relative
1.当元素开启了relative相对定位后而不设置偏移量，元素不会发生任何变化。left、right、bottom、top。
2.相对定位是相对于元素在文档流中原来的位置进行定位。
3.相对定位的元素不会脱离文档流。
4.相对定位会使元素提升一个层级。
5.相对定位不会改变元素的性质，块还是块，内联还是内联。

position：absolute
1.开启绝对定位，会使元素脱离文档流但不设置偏移量，元素不会发生任何变化。
2.绝对定位相对于离它最近的开启了定位的祖先元素进行定位的，如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位，一般开启了子元素的绝对定位都会同时开启父元素的相对定位。
3.相对定位会使元素提升一个层级。
4.绝对定位会改变元素的性质，内联元素会变成块元素，块元素的高度和宽度默认都被内容撑开。

position：fixed
固定定位也是一种绝对定位，它的大部分特点都跟绝对定位相同，不同的是：
1.固定定位永远都相对于浏览器窗口进行定位。
2.固定定位永远都会根据浏览器某个位置，不会随滚动条滚动。
在IE6中不支持固定定位。

10 . 层级
1.对于没有开启定位的不能使用z-index。
2.如果定位层级一样，则下边的元素会盖住上边的。
3.可以我z-index指定一个正整数作为值，该值将作为当前元素的层级，层级越高，越优先显示。
4.父级元素层级再高也不会盖住子元素。