经过不到一个月基础班的学习，即将完成前端最基础的HTML和CSS的学习，根据内容来说不算很难，但是有的时候做到了项目在布局方面会有些小的疑惑。根据布局方面做了点分析：
一、浮动
使用float来设置元素浮动
可选值
None：默认值，不浮动，元素在文档流中
Left：元素向左浮动
Right：元素向右浮动
特点
1.元素浮动以后会完全脱离文档流
2.浮动以后元素会一直向父元素的最上方移动
3.直到遇到父元素的边框或者其他的浮动元素，会停止移动
4.如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
6.浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果
浮动以后元素的特点：
元素浮动以后，会使其完全脱离文档流。
块元素
块元素脱离文档流以后
1.不会独占一行
2.宽度和高度都被内容撑开
内联元素
内联元素脱离文档流以后会变成块元素
高度塌陷
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱
方法一
开启父元素的BFC或hasLayout
BFC（Block Formatting Context）块级格式化环境
BFC是元素的隐含属性，默认是在关闭状态的
可以通过一些特殊的样式，来开启BFC
开启BFC以后元素将会具有如下特性
1、父元素的垂直外边距不会与子元素重叠
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素可以包含浮动子元素
开启BFC的方式
1.设置元素浮动
2.设置元素绝对定位
3.设置元素的类型为inline-block
4.设置overflow为一个非默认值
一般都是使用overflow:hidden来开启BFC

hasLayout
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）
在IE6中没有BFC，但是有一个和BFC类似的hasLayout
在IE6中可以通过开启hasLayout来解决高度塌陷的问题
副作用最小的开启方式
zoom:1
当为元素设置宽度非默认值时，会自动开启hasLayout
方法二
在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
使用这种方式会在页面中添加多余的结构
方法三
使用after伪类，向父元素后添加一个块元素，并对其清除浮动
该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构
定位
通过定位可以将页面中的元素，摆放到页面的任意位置
使用position来设置元素的定位
可选值
static
默认值，元素没有开启定位
relative
开启元素的相对定位
absolute
开启元素的绝对定位
fixed
开启元素的固定定位
相对定位（position：relative）
1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2.相对定位元素相对于其自身在文档流中的位置来定位
3.相对定位的元素不会脱离文档流
4.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
5.相对定位的元素会提升一个层级
绝对定位（position:absolute）
1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。
3.绝对定位的元素会完全脱离文档流
4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
5.绝对定位会使元素提升一个层级

固定定位（position:fixed）
固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样。
不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动。IE6不支持固定定位
还有就是关于ul li 的一些扩展
1．列表符号
列表符号是指显示于每一个列表项目前的符号标识。
基本格式如下：
list-style-type：参数
参数取值范围：
·disc：圆形
·circle：空心圆
·square：方块
·decimal：十进制数字
·lower-roman：小写罗马数字
·upper-roman：大写罗马数字
·lower-alpha：小写希腊字母
·upper-alpha：大写希腊字母
·none：无符号显示
参数中的disc是默认选项。
2．图形符号
图形符号指原来列表的项目符号将可以使用图形来代替。
基本格式如下：
list-style-image：URL
URL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。
3．列表位置
列表位置描述列表在何处显示。
基本格式如下：
list-style-position：参数
参数取值范围：
·inside：在BOX模型内部显示
·outside：在BOX模型外部显示

经过不到一个月基础班的学习，即将完成前端最基础的HTML和CSS的学习，根据内容来说不算很难，但是有的时候做到了项目在布局方面会有些小的疑惑。根据布局方面做了点分析：
一、浮动
使用float来设置元素浮动
可选值
None：默认值，不浮动，元素在文档流中
Left：元素向左浮动
Right：元素向右浮动
特点
1.元素浮动以后会完全脱离文档流
2.浮动以后元素会一直向父元素的最上方移动
3.直到遇到父元素的边框或者其他的浮动元素，会停止移动
4.如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
6.浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果
浮动以后元素的特点：
元素浮动以后，会使其完全脱离文档流。
块元素
块元素脱离文档流以后
1.不会独占一行
2.宽度和高度都被内容撑开
内联元素
内联元素脱离文档流以后会变成块元素
高度塌陷
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱
方法一
开启父元素的BFC或hasLayout
BFC（Block Formatting Context）块级格式化环境
BFC是元素的隐含属性，默认是在关闭状态的
可以通过一些特殊的样式，来开启BFC
开启BFC以后元素将会具有如下特性
1、父元素的垂直外边距不会与子元素重叠
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素可以包含浮动子元素
开启BFC的方式
1.设置元素浮动
2.设置元素绝对定位
3.设置元素的类型为inline-block
4.设置overflow为一个非默认值
一般都是使用overflow:hidden来开启BFC

hasLayout
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）
在IE6中没有BFC，但是有一个和BFC类似的hasLayout
在IE6中可以通过开启hasLayout来解决高度塌陷的问题
副作用最小的开启方式
zoom:1
当为元素设置宽度非默认值时，会自动开启hasLayout
方法二
在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
使用这种方式会在页面中添加多余的结构
方法三
使用after伪类，向父元素后添加一个块元素，并对其清除浮动
该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构
定位
通过定位可以将页面中的元素，摆放到页面的任意位置
使用position来设置元素的定位
可选值
static
默认值，元素没有开启定位
relative
开启元素的相对定位
absolute
开启元素的绝对定位
fixed
开启元素的固定定位
相对定位（position：relative）
1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2.相对定位元素相对于其自身在文档流中的位置来定位
3.相对定位的元素不会脱离文档流
4.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
5.相对定位的元素会提升一个层级
绝对定位（position:absolute）
1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。
3.绝对定位的元素会完全脱离文档流
4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
5.绝对定位会使元素提升一个层级

固定定位（position:fixed）
固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样。
不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动。IE6不支持固定定位
还有就是关于ul li 的一些扩展
1．列表符号
列表符号是指显示于每一个列表项目前的符号标识。
基本格式如下：
list-style-type：参数
参数取值范围：
·disc：圆形
·circle：空心圆
·square：方块
·decimal：十进制数字
·lower-roman：小写罗马数字
·upper-roman：大写罗马数字
·lower-alpha：小写希腊字母
·upper-alpha：大写希腊字母
·none：无符号显示
参数中的disc是默认选项。
2．图形符号
图形符号指原来列表的项目符号将可以使用图形来代替。
基本格式如下：
list-style-image：URL
URL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。
3．列表位置
列表位置描述列表在何处显示。
基本格式如下：
list-style-position：参数
参数取值范围：
·inside：在BOX模型内部显示
·outside：在BOX模型外部显示