盒子模型

1.内容区

width 盒子内容区宽度

height 盒子内容区高度

background-color 背景颜色

盒子可见大小由内容区，内边距和边框共同决定

为元素设置边框，必须指定3个样式(宽度，颜色，样式)

border-width 宽度

可以同时指定四个边框大小

4个值 上 右 下 左

3个值 上 左右 下

2个值 上下 左右

一个值 4边

除了border-width，CSS还提供了border-XXX-width

XXX可选值 top right bottom left

专门设置指定边框的宽度

border-color 颜色

设置边框颜色 和上者有同样的功能

border-style 样式

设置边框样式 和上者有同样的功能

可选值：

none 默认值，没有solid 实线dotted 点状边框dashed 虚线double 双线

2.边框

border

为元素设置边框，必须指定3个样式(宽度，颜色，样式)

边宽的简写，同时设置四个边的样式，宽度，颜色

而且无顺序要求

border一指定就是同时指定四个边，不能分别指定

单独一条边border-top border-right border-bottom border-left

3.内边距

内边距：padding 指的是盒子内容到盒子边框之间的距离

一共有四个内边框：

padding-top

padding-right

padding-bottom

padding-left

设置边框内边距

内边框会影响盒子可见框大小，元素的背景会延伸到内边框

盒子大小，由内容区，内边框和边框共同决定

盒子可见框宽度 border-left-width + padding-left + width + padding-right + border-right-width

盒子可见框高度 border-top-width + padding-top + width + padding-bottom + border-bottom-width

4.外边距

外边距指的是当前盒子与其他盒子之间的距离

他不会影响可见框的大小，可是会影响到盒子的位置

margin-top

margin-right

margin-bottom

margin-left

由于页面中的元素都是靠上靠左的

所以设置上 左外边距时会导致原盒子位置发生变化

如果设置下 右外边距时会导致其他盒子位置发生变化

外边距可以是正值和负值

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

如果只指定，在左外边距或右外边距的margin为auto则为将外边距设置为最大值

垂直方向设置为auto，默认为0

如果 left 和 right 同时设置为auto，则各一半 居中

所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中

5.垂直外边距的重叠问题

垂直外边距的重叠，在网页中 垂直 方向的 相邻 外边距会发生重叠，两者取其最大，如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。

6.水平方向的外边距求和

外边距水平方向不会重叠，而是求和

7.盒子模型的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多元素都设置了默认的margin和padding，而他的这些默认样式，正常情况下我们是不需要的。清除默认样式则需要用到下列代码

*{

margin: 0;

padding: 0; /* 清除浏览器的默认样式 */

}

8.盒子模型内联元素

不能设置width和height

设置水平内边距，内联元素可以设置水平方向内边距

垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局

内联元素支持水平方向的外边距

内联样式不支持垂直外边距

为元素设置边框，内联元素可以设置边框，但是垂直方向不会影响页面布局

总结：水平有效，垂直无效

9.display和visibility的功能和区别

通过display样式可以修改元素的类型

可选值：

inline:可以将一个元素作为内联元素显示

block:可以将元素设置为块元素显示

inline-block:将一个元素转换为行内块元素，既可以设置宽高，

且不会独占一行

none 不显示元素，并且元素不会在页面中继续占有位置

visibility

可以用来设置元素的隐藏和显示的状态

可选值：

visible 默认值，元素默认在页面中显示

hidden 元素会隐藏不显示

使用visibility: hidden;隐藏元素，不会在页面中显示，但是他的位置仍然保持

10.溢出处理overflow

子元素默认是存在父元素的内容区中，

理论上讲子元素最大可以等于父元素内容区大小

如果子元素大小超过父元素内容区，则超过的大小会在父元素以外的位置显示

超过父元素的内容，我们称为溢出的内容

父元素默认将溢出内容，在父元素外显示

通过overflow可以设置父元素如何处理溢出内容

可选值：

visible 默认值，不会对溢出内容处理

hidden 溢出的内容会被修剪，不会显示

scroll 会为父元素添加滚动条，通过拖动滚动条查看其余内容

该属性不论内容是否溢出，都会添加水平和垂直滚动条

auto 会根据需求自动添加滚动条，不需要就不加

11.文档流

文档流处在网页最底层，他表示的是一个页面中的位置

我们所创建的元素默认都是处在文档流中

元素在文档流中的特点：

块元素

1.块元素在文档流中会独占一行，块元素会自上向下排列

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

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

内联元素

1.内联元素在文档流中只占自身的大小，默认从左向右排列

如果一行中不足以容纳所有内联元素，则换到下一行，继续自左向右

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

当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，

而是自动调整宽度，已适应内边距

12.浮动

1.块元素在文档流里默认垂直排列，所以这三个div自上而下依次排开

如果希望块元素在页面中水平排列 即 浮动float

none 默认值

left 元素脱离文档流向左浮动

right 元素脱离文档流向右浮动

为一个元素设置浮动，元素脱离文档流，其下边的元素会向上移动

元素浮动后，会尽量向页面的左上或右上移动

直到遇到父元素的边框或者其他的浮动元素

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

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

2.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围

所以我们可以通过浮动元素来设置文字环绕图片的效果

3.当元素设置浮动后，会完全脱离文档流

块元素脱离文档流以后，高度和宽度都被内容撑开

内联元素脱离文档流以后，变成块元素，此时可以设置高宽

13.清除浮动

有时希望清除掉浮动带来的影响，则使用clear

clear 清除其他浮动元素带来的影响

none 默认值，不清除浮动

left 清除左侧浮动元素对当前元素的影响

right 清除右侧浮动元素对当前元素的影响

both 清除两侧浮动元素对当前元素的影响

清除对他影响最大的元素

14.什么是高度坍塌？

在文档流中，父元素的高度默认是被子元素撑开的

也就是子元素多高，父元素就多高

但是当为子元素设置浮动后，子元素会完全脱离文档流

此时将会导致父元素无法撑起子元素的高度，导致父元素高度坍塌

由于父元素的高度塌陷了，则父元素下的所有元素都向上移动，这样就导致布局混乱

所以在开发中一定要避免高度塌陷的问题

我们可以将父元素高度写死，避免出现坍塌问题

但是一旦高度写死，父元素将不再自动适应子元素，所以这种方法不推荐

15.解决方法(4)

第一种：

给父元素指定高度

第二种：

根据W3C标准，页面中元素都有一个隐含的属性叫做：Block Formatting Context

简称BFC，该属性可以设置打开或者关闭，默认关闭

当开启元素的BFC后，元素将会具有如下的特征：

1.父元素的垂直外边距不会和子元素重叠

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

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

如何开启BFC

1.设置元素浮动

虽然会撑开，会导致父元素宽度丢失，且下边元素会上移，不推荐使用

2.设置元素绝对浮动

3.设置元素为inline-block

可以解决问题，但是会导致宽度丢失，不推荐

4.将元素的overflow设置为一个非visible的值

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式

在IE6及其以下的浏览器中并不支持BFC，所以使用这个方式不兼容

但是IE6有另外一个隐含的属性：hasLayout

该属性和BFC类似

开启方式：直接将元素的zoom设置为1即可

zoom表示放大，后边跟一个数值，表示放大几倍

zoom:1 表示不放大元素，但是通过该样式可以开启hasLayout

只支持IE，其他不支持

BFC和zoom同开启即可解决高度坍塌问题

第三种：

可以直接在高度坍塌的父元素的最后，添加一个空白的div，

由于这个div并没有浮动，所以他是可以撑开父元素高度的

然后在进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度

基本没有副作用，虽然可以解决问题，但是会添加多余结构

第四种：

通过after伪类，选中box1的后边

可以通过after伪类向元素的最后添加一个块元素，然后对其清除浮动，

这样和添加一个div的原理一样，可以达到一个同样的效果

而且不会在页面中添加多余的div，这是我们推荐的方式