CSS快速学习4：浮动和盒模型

浮动属性：

Float：定义网页中其他文本如何环绕该元素。

有三个属性值：

left：元素活动浮动在文本左面；

right：元素浮动在右面；

none:默认值，不浮动。

浮动的三大显著特征：

1.div块元素失去“块状”换行显示特征，变为行内元素。

2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示。

3.占据行内元素的空间，导致行内元素围绕显示。

 

浮动元素的宽度由子元素的宽度决定。

Clear：清除浮动

如果前一个元素存在左浮动或右浮动，则换行以区隔

只对块级元素有效

属性值

none：允许两边都可以有浮动对象

both：清除两边浮动

left：清除左边浮动

right:清除右边浮动

 

如果父元素出现高度塌陷，给高度塌陷的元素添加overflow：hidden

 

盒模型组成部分：

CSS盒子模式都具备这些属性：内容（content）、填充（padding）、边框（border）、边界（margin）.

盒模型的相关元素：

1.border的使用方法

border:边框宽度 边框风格 边框颜色;

例如：border:5px solid #f00

border-style的值：

solid实线，dotted点线，dashed虚线，double双线，groove槽边，ridge岭边，inset凹边，ouset凸边，none无边框，默认值，hidden无边框。

2.padding的使用方法

padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域；

属性值的4种方式：

四个值：上   右   下   左 {padding:10px   20px   30px    40px;}

三个值：上    左右    下 {padding:10px   20px   30px ;}

二个值：上下    左右 {padding:10px   20px  ;}

一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/

padding不可以为负值

padding-left	padding-left:10px;	左内边距为10px
padding-right	padding-right:5px;	右内边距为5px
padding-top	padding-top:20px;	上内边距为20px
padding-bottom	padding-bottom:8px;	下内边距为8px

 

3.margin的使用方法

外边距(margin)在border之外，margin区域不应用背景;

CSS中margin默认值为0

边界：margin，在元素外边的空白区域，被称为边距。

margin:2px 4px 6px;/*定义元素上边界为2px，左右边界4px下边界为6px，*/

margin:0 auto;/*在浏览器中横向居中。

说明：可单独设置一方向边界，如：margin-top:10px;

在非浮动的情况下，margin两者相遇取最大值，比如一个5px和一个10px,显示效果为10px。

在非浮动的情况下，当我们的父元素既没有padding值也没有border值，子元素的margin-top会和父元素合二为一，导致父元素产生margin-top的效果。

在浮动的情况下，margin值相遇取相加值。