一.内联元素的盒子模型：
1.内联元素不能设置width和height；
2.设置水平内边距,内联元素可以设置水平方向的内边距：padding-left，padding-right；
3.垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局；
4.为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局；
5.水平外边距内联元素支持水平方向的外边距；
6.内联元素不支持垂直外边距；
7.为右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和。
二.元素包含关系：
1.a元素可以包含任意元素，除了他本身；
2.p元素不可以包含任何其他的块元素；
三.display样式：
1.inline 可以将一个元素作为内联元素显示；
2.block 可以将一个元素作为块元素显示；
3.inline-block 将一个元素设置为行内块元素，既可以设置宽高，又不会独占一行；
4.none 不显示元素，并且元素不在页面中占位置；
注意：visibility设置hidden时虽然不在页面中显示，但是位置依然保存；默认值是visible；
四.overflow样式（溢出）：
通常，子元素默认在父元素内容区中，如果子元素大小超过父元素的内容区，就会出现溢出的情况，通过overflow可以设置父元素如何处理溢出内容。
1.visible 默认值，不做任何处理；
2.hidden 溢出的内容被修剪，不会显示；
3.scroll 溢出部分以滚动条形式显示且不管是否溢出都会显示滚动条；
4.auto 根据需要自动添加水平或垂直滚动条；
五.文档流（页面就是文档流，元素在文档流中）：
元素在文档流中的特点：
块元素：
1.块元素会在文档流中独占一行，块元素会自上往下排列；
2.块元素在文档流中默认宽度是父元素的100%；
3.块元素在文档流中的高度默认被内容撑开（前提是未指定宽度）；
内联元素：
1.内联元素在文档流中只占自身大小，会默认从左往右排列，一行不够则换行显示；
2.内联元素宽度、高度默认都被是内容撑开；
六.float（浮动）
作用：使元素浮动，脱离文档流；
none：默认值，在文档流中排列；
left：脱离文档流，在页面左侧浮动；
right：脱离文档流，在页面右侧浮动；
注意：
1.当一个元素设置为浮动后，下面的元素会立即往上移动；元素浮动以后，会尽量往页面左上或右上漂浮，直到遇到父元素的边框；
2.当浮动元素上面是一个没有浮动的块元素时，则浮动元素不会超过块元素；
3.浮动的元素不会超过它上边的兄弟元素，最多一边齐；
4.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围；所以可以通过浮动设置文字环绕图片效果；
5.块元素脱离文档流后，当不设置宽高是，默认宽高被子元素内容撑开；
6.内联元素设置浮动脱离文档流后会变成块元素，设置的宽高有效；
七.高度塌陷的问题
在文档流中，父元素的高度默认是被子元素撑开的（没有设置实际高度），当为子元素设置浮动以后，子元素会脱离文档流，此时导致子元素无法撑开父元素的高度，导致父元素的高度塌陷；由于父元素高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
所以在开发中要避免高度塌陷的问题：
1.可以将父元素高度写死，但是父元素不能自动适应子元素高度，所以不推荐使用；
2.BFC：根据W3C标准，页面中的元素都有一个隐含的属性叫Block Formatting Context，该属性可以设置关闭或打开，默认关闭。当开启BFC后，元素将会具有以下特性：
a.父元素的垂直外边距不会和子元素重叠；
b.开启BFC的元素不会被浮动元素所覆盖；
c.开启BFC的元素可以包含浮动的子元素；
如何开启BFC：
a.设置元素浮动;—虽然可以撑开父元素，但是会导致父元素宽度丢失，而且也会导致下面的元素上移，不推荐使用；
b.设置元素决定定位；—和上面效果一样，不推荐使用；
c.设置元素为：inline-block;—会解决问题，但是也会导致宽度丢失，不推荐使用；
d.将元素的overflow设置为非visible的值；—推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式；
注意：在IE6及以下版本不支持BFC，但有另一个隐含属性hasLayout，其作用和BFC一样，开启方式很多，推荐副作用最小的方式，将元素的zoom设置为1即可（zoom：1），zoom表示放大的意思，数值1表示不放大；为了兼容所有浏览器，可以两种方式都写；
八.解决高度塌陷的最终方案：
一般如果由于元素1浮动会导致元素2上移，我们有时候希望清除其他元素浮动对当前元素产生影响，这时可以使用clear来完成；
1.none：默认值，不清除浮动；
2.left：清除左侧浮动元素对当前元素的影响；
3.right：清除右侧浮动元素对当前元素的影响；
4.both：清除两侧浮动元素对当前元素的影响（清除影响最大的元素的影响）；
所以：解决高度塌陷的第二个方法：可以直接在高度塌陷的父元素的最后添加一个空白的块元素，由于这个块元素并没有浮动，所以他可以撑开父元素高度，再对其clear清除浮动，这样可以通过空白的块元素来撑开父元素的高度，基本没有副作用，可兼容各种浏览器，但是会添加多余的结构（一个空的块元素）；
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{border: 5px solid red;}
.box2{width: 50px;height: 50px;background-color: blue;float: left;}
.box3{clear: left;}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
最后，可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这和添加一个div的原理一样，可以达到一个相同的效果，但不会在页面上添加多余的div；这是最推荐使用的解决高度塌陷问题的方法，几乎没有副作用，但是在IE6中不起作用，还需添加zoom：1；
.box1:after{content: "";display: block;clear: both;}
九.定位（position）
定位：指的是将指定的元素摆放到页面的任意位置；通过position属性来设置元素的定位。可选值：
1.static：默认值，元素没有开启定位；
2.relative：开启元素的相对定位；
3.absolute：开启元素的绝对定位；
4.fixed：开启元素的固定定位（也是绝对定位的一种）；
可以通过left，right，top，bottom来设置元素的偏移量。
相对定位（position:relative;）,开启相对定位的特点：
a.开启元素的相对定位，而不设置偏移量时，元素不会发生任何变化；
b.相对定位是相对于元素在文档流中原来的位置进行定位；
c.相对定位的元素不会脱离文档流；
d.相对定位会使元素提升一个层级；
e.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素；
绝对定位（position:absolute;），开启绝对定位的特点：
a.开启绝对定位，会使元素脱离文档流；
b.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化；
c.绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位），如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位；
d.绝对定位会使元素提升一个层级；
e.绝对定位会改变元素的性质，内联元素会变成块元素，块元素的宽度和高度默认被内容撑开；
固定定位（position:fixed;），开启固定定位的特点：
a.固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样；
b.不同的是，固定定位永远都会相对于浏览器窗口进行定位；固定定位会固定在窗口某个位置，不会随滚动条滚动；
c.IE6不支持固定定位；
元素的层级：如果定位元素的层级是一样的则下边的元素会盖住上边的，通过z-index可以设置开启定位的元素的层级，层级越高，越优先显示，父元素的层级再高也不会盖住子元素；
十.opacity属性
opacity可以用来设置元素背景透明，范围0~1之间的数；但是在IE8及以下浏览器中不支持，所以，IE8及以下浏览器需使用以下属性代替：
filter:alpah(opacity=50);(范围0~100)
1062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
