第五章 盒子模型

CSS中将每一个元素都设置为了一个矩形的盒子

将所有的元素都设置为盒子，是为了方便页面的布局

当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子

5.1盒子模型

5.2盒子的组成部分

1)内容区

内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

•如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。

•通过width和height两个属性可以设置内容区的大小。

•width和height属性只适用于块元素。

2)内边距

顾名思义，内边距指的就是元素内容区与边框以内的空间。

•默认情况下width和height不包含padding的大小。

•使用padding属性来设置元素的内边距。

•例如：

– padding:10px 20px 30px 40px

– 这样会设置元素的上、右、下、左四个方向的内边距

padding:10px 20px 30px;

– 分别指定上、左右、下四个方向的内边距

•padding:10px 20px;

– 分别指定上下、左右四个方向的内边距

•padding:10px;

– 同时指定上左右下四个方向的内边距

•同时在css中还提供了padding-top、 padding-right、 padding-left、 padding-bottom分别用来指定四个方向的内边距。

3)边框

可以在元素周围创建边框，边框是元素可见框的最外部。

设置边框需要同时设置三个样式，缺一不可

•可以使用border属性来设置盒子的边框：

– border:1px red solid;

– 上边的样式分别指定了边框的宽度、颜色和样式。

•也可以使用border-top/left/right/bottom分别指定上右下左

四个方向的边框。

•和padding一样，默认width和height并包括边框的宽度。

规则

四个值

border-width: 10px 20px 30px 40px;

border-width: 上 右 下 左;

三个值

border-width: 10px 20px 30px;

border-width: 上 左右 下 ;

两个值

border-width: 10px 20px;

border-width: 上下 左右 ;

一个值

border-width: 10px;

border-width: 上下左右 ;

border-color边框的颜色

border-style边框的样式

除了这三个样式，CSS中还提供了

border-xxx-width

border-xxx-color

border-xxx-style

xxx可以是

top

right

bottom

left

通过这些样式可以单独指定四个边的颜色，宽度和样式

边框可以设置多种样式：

– none（没有边框）

– dotted（点线）

– dashed（虚线）

– solid（实线）

– double（双线）

– groove（槽线）

– ridge（脊线）

– inset（凹边）

– outset（凸边）

4)外边距

外边距是元素边框与周围元素相距的空间。

•使用margin属性可以设置外边距。

•用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。

•当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会反方向移动。

Margin还可以设置为auto，一般只设置水平方向的margin

Ø如果单独将左右外边距设置为auto，则会将左或右外边距设置为最大值

Ø如果同时将左右外边距设置为auto，则会将左右外边距设置为一个相等的值，通过这种方式使一个子元素在它的父元素中水平居中

margin:0 auto

外边距的重叠

l相邻的垂直外边距会发生重叠现象

n相邻元素的外边距会取最大值

n子元素的外边距会传递给父元素

l水平外边距不会重叠，而是取和

5.3浏览器默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

清除浏览器的默认样式

*{

margin: 0;

padding: 0;

}

5.4内联元素的盒模型

nWidth不支持

nHeight不支持

npadding

u支持水平方向的padding

u垂直方向的padding也支持，但是不会影响布局

nborder

u支持四个方向边框，但是垂直的边框不会影响布局

nmargin

u支持水平方向外边距

u不支持垂直方向的

5.5盒模型相关的样式

1) display

设置元素的显示类型

可选值

None:元素不会在页面中显示，并且不会占据页面的位置

Block:元素会作为块元素显示

Inline:元素会作为内联元素显示

inline-block:元素会作为行内块元素显示

既具有内联元素的特点也具有块元素的特点,不独占一行

可以设置宽高

2) visibility

设置元素是否在页面中显示

可选值

Visible:默认值，元素在页面中正常显示

Hidden:元素不在页面中显示，但是依然在页面中占据位置

3) overflow

设置元素如何处理溢出内容

可选值

Visible:默认值，不会处理溢出的内容，在父元素以外的地方显示

Hidden:溢出的内容会被隐藏不会显示

Scroll:在父元素中同时添加水平和垂直方向的滚动条,不内容是否溢出都会添加滚动条

Auto:根据需要自动生成滚动条

5.6文档流

文档流指的是文档中可现实的对象在排列时所占用的位置。

•将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排

放元素，即为文档流。

•也就是说在文档流中元素默认会紧贴到上一个元素的右边，如

果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。

•这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）

块元素

1.块元素在文档流中自上向下排列

2.块元素在文档流中宽度默认是父元素的100%

3.块元素在文档流中高度默认被内容撑开

内联元素

1.内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列

2.内联元素在文档流中宽度和高度默认都被内容撑开

5.7浮动

所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

•浮动使用float属性。

•可选值：

– none：不浮动

– left：向左浮动

– right：向右浮动

•块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。

•当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕

在元素的周围。

•浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。

•元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。

•元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。

•浮动元素默认会变为块元素，即使设置display:inline以后其依然是个块元素。

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

浮动的元素不会超过他上边的兄弟元素，最多最多一边齐

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果

内联元素脱离文档流以后会变成块元素

5.8布局

/*清除默认样式*/

*{

margin:;

padding:;

}

/*设置头部div*/

.header{

/*设置一个宽度*/

width:1000px;

/*设置一个高度*/

height:120px;

/*设置一个背景颜色*/

background-color:yellowgreen;

/*设置居中*/

margin:auto;

}

/*设置一个content*/

.content{

/*设置一个宽度*/

width:1000px;

/*设置一个高度*/

height:400px;

/*设置一个背景颜色*/

background-color:orange;

/*居中*/

margin:10pxauto;

}

/*设置content中小div的样式*/

.left{

width:200px;

height:100%;

background-color:skyblue;

/*向左浮动*/

float:left;

}

.center{

width:580px;

height:100%;

background-color:yellow;

/*向左浮动*/

float:left;

/*设置水平外边距*/

margin:010px;

}

.right{

width:200px;

height:100%;

background-color:pink;

/*向左浮动*/

float:left;

}

/*设置一个footer*/

.footer{

/*设置一个宽度*/

width:1000px;

/*设置一个高度*/

height:120px;

/*设置一个背景颜色*/

background-color:silver;

/*居中*/

margin:auto;

}

5.9高度塌陷

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷

父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱

解决方法：

方法一

开启父元素的BFC或hasLayout

BFC

BlockFormatting Context

块级格式化环境

BFC是元素的隐含属性，默认是在关闭状态的

可以通过一些特殊的样式，来开启BFC

开启BFC以后元素将会具有如下特性

1、父元素的垂直外边距不会与子元素重叠

2、开启BFC的元素不会被浮动元素所覆盖

3、开启BFC的元素可以包含浮动子元素

开启BFC的方式

1.设置元素浮动(使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且这种方式也会导致下边的元素上移，不能解决问题)

2.设置元素绝对定位

3.设置元素的类型为inline-block(可以解决问题，但是会导致宽度丢失，不推荐使用这种方式)

4.设置overflow为一个非默认值

一般都是使用overflow:hidden来开启BFC

hasLayout

在IE6中没有BFC，但是有一个和BFC类似的hasLayout

在IE6中可以通过开启hasLayout来解决高度塌陷的问题

副作用最小的开启方式

zoom:1

当为元素设置宽度非默认值时，会自动开启hasLayout

方法二

在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动

使用这种方式会在页面中添加多余的结构

方法三

使用after伪类，向父元素后添加一个块元素，并对其清除浮动

该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构

5.10清除浮动

clear属性可以用于清除元素周围的浮动对元素的影响。

•也就是元素不会因为上方出现了浮动元素而改变位置。

•可选值：

– left：忽略左侧浮动

– right：忽略右侧浮动

– both：忽略全部浮动

– none：不忽略浮动，默认值

5.11定位

通过定位可以将页面中的元素，摆放到页面的任意位置

使用position来设置元素的定位

可选值

static:默认值，元素没有开启定位

relative:开启元素的相对定位

absolute:开启元素的绝对定位

fixed:开启元素的固定定位

1)相对定位

1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化

2.相对定位元素相对于其自身在文档流中的位置来定位

3.相对定位的元素不会脱离文档流

4.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素

5.相对定位的元素会提升一个层级

2)绝对定位

当将position属性设置为absolute时，则开启了元素的绝对定位。

•当开启了绝对定位以后，可以使用top、 right、bottom、 left四个属性对元素进行定位。

1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化

2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。

3.绝对定位的元素会完全脱离文档流

4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行

5.绝对定位会使元素提升一个层级

•绝对定位的块元素的宽度会被其内容撑开。

•绝对定位会使行内元素变成块元素。

•一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。

3)固定定位

固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样

不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动

当将position属性设置为fixed时，则开启了元素的固定定位。

•当开启了固定定位以后，可以使用top、 right、bottom、 left四个属性对元素进行定位。

IE6不支持固定定位

4)层级

z-index

•当元素开启定位以后就可以设置z-index这个属性。

•这个属性可以提升定位元素所在的层级。

•z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素会显示在网页的最上层

定位元素 > 浮动元素 > 文档流中的元素

当元素开启了定位以后，可以通过z-index来设置元素的层级

z-index值越高元素越优先显示

如果z-index值一样，或者都没有z-index则优先显示下边的元素

父元素永远不会盖住子元素

5)偏移量

当元素开启了定位以后，可以通过偏移量来设置元素的位置

left

元素距离定位位置的左侧距离

top

元素距离定位位置的上边距离

right

元素距离定位位置的右侧距离

bottom

元素距离定位位置的底部距离

一般情况下，只使用两个值即可定义一个元素的位置。