第四章 浮动以及div

一、浮动语法

属性	含义
folat:left	从左向右浮动
float:right	从右向左浮动
float:none	不浮动，默认值

二、脱离文档流的含义：

当一个元素不再在文档流中占据空间，而是漂浮在文档流的上方的时候这个现象叫做脱离文档流。

特点：不会与文字发生重叠，文字会环绕浮动元素显示。

三、清除浮动方法

        目前暂时两种常用方法，之后再进行补充说明

        其一：给有浮动的盒子再套一个大的盒子给出宽高即可；

        其二：给所有有浮动的盒子加一个盒子，加一个宽高为0，添加一个clear:both；

三、盒模型布局组成：内容--conten

                                        内边距--padding

                                         外边距--magin

                                         边框--boder

四、magin相关用法

标签	说明
magin-top	上间距
magin-left	左间距
magin-right	右间距
magin-bottom	下间距
margin:20px	四个方向数值一样
margin:10px 20px ;	上下   左右
margin:10px 20px 30px ;	上  左右  下
margin:0px 0px 0px 40px;	上 右 下 左

     注意点：

1. 盒子左右居中：左右都给auto，且注意当我们给了盒子浮动的时候，是和auto是冲突的；
2. magin是可以给负值；
3. 当我们给子元素添加浮动"magin-top"之后，浏览器解析的时候，会把这个上间距也传递给父元素，导致父元素也会下来，解决办法 ：给父元素添加overflow:hidden;（溢出隐藏)

.box{overflow: hidden;}   

五、padding用法

        padding标签和magin相同，但是padding没有负值和居中

        注意点：padding是添加在盒子大小之上的，所以会把盒子给撑大，解决办法是：从宽度或者高度上减去添加的padding值，不过一般magin就够我们使用了哦~

六、快捷创建标签（段落、标题、div）的用法

       标签名.类名$*数量----其中类名为class类名；