CSS的浮动属性
可以举一个现实中的例子去比喻浮动：
给所有的容器添加上float：left；之后，元素会从左往右排列
给所有的容器添加上float：right；之后，元素会从右往左排列
浮动属性的使用
1.作用:可以元素在网页中的位置(如果盒子默认是上下排列的可以改为水平的)
2.属性:float 使xx漂浮/浮动
3.属性值:left、right、none(默认值,不浮动)
4.浮动的特点
- 浮动只能控制元素在水平方向上移动
- 浮动会使元素脱离文档流,初始位置不存在,破坏正常的网页布局
- 浮动停止漂浮的条件
- 碰到父级的包含框就会停止浮动
- 碰到前面一个含有浮动属性的元素也会停止浮动
- 当子级元素比父级元素宽度多的时候,最后一个子级元素往下移动直至找到足够的空间
5.拓展
- 文档流(普通流、普通层):正常的网页布局,从左到右 从上到下
- 浮动流(浮动层):会存在于当前文档流的上方,从上帝视角看不见
盒子模型的组成
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是标准盒模型。
Margin属性
2、margin的使用方法
边界：margin,在元素外边的空白区域，被称为边距。 属性值可以是负数也可以用单词auto,属性值是auto的时候,默认只支持margin-left:auto;和margin-right:auto; 上下暂时不支持auto
单独设置:
margin-left:左边界 margin-right:右边界
margin-top:上边界 margin-bottom:下边界
margin简写的4种方式：
四个值：上 右 下 左 {margin:0px 0px 0px 40px;}
三个值：上 左右 下 {margin:10px 20px 30px ;}
二个值：上下 左右 {margin:10px 20px ;}
一个值：四个方向 margin:2px;/*定义元素四周填充为2px*/
说明：margin:0 auto;可以实现一个有宽度的块元素盒子水平居中
margin相关问题以及解决方法：
1、margin-top的解析
现象：默认情况下在包含结构里面,给子元素添加了margin-top之后，父元素会跟着一起下来。 解决方法：
A、给最近的父元素添加border-top:1px solid transparent;透明上边框
B、给父元素添加overflow:hidden;（溢出隐藏)
C\ 给父元素或者子元素添加浮动
2、margin的上下间距重叠问题
现象：2个上下并列结构的时候,如果给上面的盒子添加了margin-bottom,同时给下面的盒子添加了margin-top,此时应该解析的垂直间距是2者之和,但是浏览器解析的时候,会按照最大数值去解析。
解决方法：A、给下面的盒子添加父元素且添加声明overflow:hidden;
Padding属性
1、padding的使用方法（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。
填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。
用法：
可单独设置一方向填充，单独设置:
上方向padding-top:10px; 右方向padding-right:10px;
下方向padding-bottom:10px; 左方向padding-left:10px;
padding简写的4种方式：
四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
三个值：上 左右 下 {padding:10px 20px 30px ;}
二个值：上下 左右 {padding:10px 20px ;}
一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/
说明：padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值
盒模型中内边距padding的使用方法
1.内边距作用:主要设置父级与子级元素之间的位置间距
2.padding的属性值:数值和单位(像素px)
3.padding的设置位置
- 添加在父级元素上(所有的子级元素间距都是一样的):会撑大当前盒子的宽高大小,为了不破坏初始布局,需要在盒子宽高上减去相应的padding值
- 添加在子级元素上(控制的是每一个子级元素的间距):
4.内边距padding的属性值个数
- padding一个属性值:上下左右
- padding两个属性值:上下 左右
- padding三个属性值:上 左右 下
- padding四个属性值:上 右 下 左
5.属性值的方向设置(顺时针)
- padding-top
- padding-right
- padding-bottom
- padding-left
6.关于内外边距设置负值的问题?
- 内边距 不可以
- 外边距 可以
Border属性
拆开写法:
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
简写：
border：30px solid blue; 参数的顺序可以随意调换
单边框设置：上边框 border-top：30px blue solid; 下 border-bottom 左 border-left 右 border-right
怪异盒子模型
IE盒子模型(怪异盒模型) 在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)
box-sizing属性
CSS3指定盒子模型种类
box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
box-sizing: content-box;//宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
box-sizing: border-box;// 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。在这种解析模式下添加padding或者border不会再把盒子撑大。