CSS盒子模型

盒子模型

介绍

---

盒子模型又叫框模型（box-modlecss），css处理网页时，它认为每个元素都包含在一个不可见的盒子里。我们对网页的布局就等于是在摆放盒子。一个盒子我们分为：内容区content、内边距padding、边框border、外边距margin。

1. 内容区content大小设置：通过width、heigth来设置宽度以及高度。
2. 边框border的样式设置：需要指定三个种类样式，缺一不可。

• border-width:边框宽度，可以分别指定不同的边的粗细，从上面开始顺时针顺序设置，用空格隔开。还有其他的设置方式参考W3School离线手册。
• border-color:边框颜色，也可以分别设置不同边的颜色；
• border-style:边框样式，也可以分别设置不同边的颜色；
• border：简写样式，直接设置多个属性，没有顺序要求，border只能同时指定4个边的样式。可以用border-xxx分别设置每条边。

3. 内边距padding：可以通过四个属性设置距离.元素的背景颜色会延伸到内边距中。

• padding-top:
• padding-right:
• padding-bottom:
• padding-left:
  注意：盒子的大小由盒子的内容区、内边距、外框共同决定的。

4. 外边距margin：

• 外边距会影响到盒子的位置。有四个方向的边距:margin-top…由于页面中的元素都是靠左靠上摆放，当我们设置上和左边外边距会导致盒子位置发生改变，而设置右边与下外边距会改变其他盒子的位置。
• 外边距也可以指定负数。就是会往反方向移动。
• margin的值还可以设置为auto，一般只设置给水平方向的。左外边距设置为auto时会将外边距设置为最大值。垂直方向的话默认就是0.
• 外边距也可以使用简写属性margin。
• 垂直外边距的重叠：在网页中垂直方向的相邻外边距会发生外边距重叠。也就是兄弟元素之间的相邻外边距会取最大值而不是取和。
• 取出浏览器默认的margin与padding样式。*{margin:0;padding:0}

内联元素盒模型

---

1. 内联元素不能设置width和heigth。
2. 内联元素可以设置水平方向的内边距，也支持垂直方向的内边距设置，但是垂直方向不会影响页面的布局。（就是不会把其他元素挤掉，而是覆盖）
3. 内联元素可以设置边框，但是垂直边框还是不会影响布局，水平的会。
4. 内联元素支持水平方向外边距，但是不会重叠，而是取和。不支持垂直方向的外边距。

display和visiblity

---

1. display:修改元素的类型 ，可选值：

• inline–将一个元素作为内联元素显示；
• block–将一个元素设置为块元素显示；
• inline-block-将一个元素设置为行内块元素（既有行内元素特点又有块元素特点，既可以设置宽高又不会独占一行）；
• none–不显示元素，并且元素不会再页面中继续占有位置。

2. visiblity:用来设置元素的隐藏和显示的状态。可选值：

• visible(默认值)：元素会默认在页面显示。
• hidden：元素会隐藏（不可见），但还是占据页面的位置。

overflow

---

1. 子元素默认存在在父元素的内容区中的，理论上子元素的大小可以等于父元素内容区的大小，但是如果子元素大小超过了的话会在父元素以外位置显示，超出的内容称为溢出的内容。父元素默认将溢出内容显示出来。
2. 通过overflow可以设置子元素溢出的内容。可选值：

• visible：默认值，子元素不会对溢出内容做任何处理。
• hidden：溢出的内容会被修剪掉，不会显示出来。
• scorll：溢出内容会修剪，但是会有一个滚动条可以滚动以查看完整内容。该属性不论内容是否溢出，都会在水平和竖直方向添加滚动条。
• auto：根据需求自动添加滚动条。比scoll更智能。

文档流

---

1. 一个网页就是一个文档。文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。
2. 元素在文档流的特点：

• 块元素：独占一行，自上向下排列。块元素在文档流中默认宽度是父元素的100%，高度默认被内容撑开，它的高度由它的内容决定。
• 内联元素：只占自身大小，默认自左向右排列。文档六中内联元素的宽度和高度默认都被内容撑开。

3. float：使元素浮动，从而脱离文档流，可选值：

• none:默认值，元素默认在文档流中排列。
• left:元素会立即脱离文档流，向页面左侧浮动。
• right：元素会立即脱离文档流，向页面右侧浮动。

4. 当为一个元素设置浮动以后，元素会立即脱离文档流，它下面的元素会立即占据它之前的位置。
5. 元素浮动以后，会尽量向元素的坐上或右上漂浮。直到遇到父元素的边框或者其他浮动元素。如果浮动元素上面是一个没有浮动的块元素，则浮动不会超过该块元素。
6. 浮动元素不会超过它的兄弟元素，最多平齐。
7. 浮动的元素不会遮盖文字，文字会自动环绕浮动元素周围。
8. 文档流中，子元素的宽度默认占父元素的全部，脱离文档流之后，块元素的高度和宽度都会被内容撑开（在没有设置宽高的前提下）。而内联元素脱离文档流之后会变成块元素。这时候可以设置宽高了。且宽高会被内容撑开（一旦脱离文档流之后就都是块元素了）。
9. 在文档流中，父元素的高度默认是被子元素撑开的。但是当子元素设置为浮动之后，子元素脱离文档流后导致父元素没有子元素的高度支撑，导致高度坍塌，并且父元素下面的所有元素都会向上移动，导致整个页面布局错乱。**所以开发中一定要避免出现高度塌陷。**解决问题的方法有下：

• 将父元素高度固定，但是这样高度就不能自适应子元素的高度，所以一般我们不建议用这种方法。
• 根据W3C标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性默认关闭的。当开启元素BFC之后，元素将会有如下特性：

1.父元素的垂直外边距不会和子元素重叠；
2.开启BFC的元素不会被浮动元素所覆盖；
3.开启BFC的元素可以包含浮动的子元素；

• 开启BFC的方法有：1.设置元素浮动（但是会导致父元素宽度丢失，而且也会导致下面的元素上移，不能解决高度塌陷问题）；2.设置元素绝对定位（效果同1）；3.设置元素为inline-block（可以解决问题，但是宽度还是会丢失，也是不推荐使用）；4.将元素的overflow设置为一个非visible的值（这样副作用最小，推荐使用这种）。
• IE6是没有BFC的，关于IE6的解决方法请参阅其他资料，关键字haslayout。

10. 清除浮动：有时候我们希望清除掉其他元素浮动对当前元素产生的影响，这是可以使用clear属性来完成此功能，clear可以用来清除其他浮动元素对当前元素的影响。可选值：

• none：默认值，不清除浮动的影响
• left：
• right:
• both:清除对他影响最大的那个浮动带来的影响。

11. 我们还可以通过清除浮动的效果来解决高度塌陷的问题。直接在高度塌陷的父元素的最后添加一个空白的块元素（div就行），由于这个div并没有浮动，他是可以撑开父元素的高度，我们再为其添加clear属性。就可以通过这个空白div撑开父元素的高度。不完美的是这样会在页面中添加多余的结构。（这是W3C推荐的方式，IE6支持）
12. 我们还可以通过after伪类向元素的最后添加一个空白的元素，然后对其进行清除浮动，这样做和添加一个div的原理一样，可以达到同一个效果，而不会在页面中添加多余的div。（最推荐使用，IE6不支持after伪类）。