CSS总结篇(二)

本篇内容包括CSS盒模型，

盒模型

在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性 — 像它的颜色，背景，边框方面 — 和位置是渲染引擎的目标。

在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边（margin）, 边框边(border), 内填充边(padding) 与 **内容边(content)**。

CSS 盒模型简解

通常CSS盒模型中常见的盒模型有块级元素(block Box)和行内元素(line Box)：

在正常流中：

块级元素的水平格式化：有七大属性，元素包含块的宽度通常是父元素的width值，当margin和width属性为auto，宽度会自动去适配。

块级元素的垂直格式化： 设置margin：auto ；设置宽度值为0，垂直方向会出现外边距合并 （bottom-top合并和top-top合并）

width/height:百分比依赖于父元素的content-box的宽高

overflow:用于当content中的信息太多，并超出内容区所占的位置时，通过该属性来指定溢出内容的处理方式。

​ 1、visible：溢出的内容不会被修剪，呈现在元素框外。

​ 2、hidden：溢出的内容将隐藏起来，不可见。

​ 3、scroll：溢出的内容会被修剪，但可以通过滚动条查看隐藏的内容。

​ 4、auto：由浏览器决定如何处理溢出部分，如果溢出部分被修剪，则可以通过滚动条查看隐藏的内容。

​ 5、inherit：规定应该从父元素集成overflow属性的值。

oveflow-x和overflow-y

视觉格式化模型(visual formatting model)

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。

页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。

视觉格式化模型中，文档树中的每一个元素根据盒模型Box Model产生零个或多个盒。这些盒的布局由以下内容控制：

1. 盒的尺寸和类型
2. 定位体系Positioning Scheme（常规流，浮动和绝对定位）
3. 文档树中元素之间的关系
4. 外部信息（如：视口大小，图片的固有尺寸等）

视口(Viewport)

• 浏览器的可视区域
• 用户通过视口查看网页内容(透过窗户看风景)

块级元素(Block-level Elements)

• 会被格式化成块状的元素
• 例如 p div section 等
• 将display 设置block list-item table 使元素变为块级

行级元素(inlime-level Elemnets)

• 不会为其内容生成块级元素
• 让其内容分布在多行中
• display 设置为 inline inline-block inline-table 是的元素变为行级

盒子的生成

• 每个块级元素生成一个主块级盒(principal block-level box）用来包含子级盒
• 每个行级元素生成一个行级盒，行级盒子分布于多行
• 同时包含块级和行级的会生成匿名块级盒子
• 文字全部被行级盒子包裹会生成匿名行级盒子

块级盒子中的子盒子的生成

• 块级盒子中可以包含多个子块级盒子，也可以包含多个行级盒子
• 不在行级元素里面的文字，会生成匿名行级盒比如<p>Some <em> Text</em></p>
• 块级盒子中不能同时包含块级和行级盒子，遇到这种情况时候，会生成匿名块级盒来包含行级盒。比如<div><h1>标题</h1><span>2016-12-12</span><div>

行级盒子内的子盒子的生成

• 行级盒子内可以包含行级盒子
• 行级盒子包含块级盒子时，会被块级盒子拆成两个行级盒子，这两个盒子有被匿名盒子包含

display 属性

• block 生成块级盒
• inline 生成行级盒
• inline-block 生成行级盒， 为其内容生成块级盒
• none 在排版时将元素忽略

visibility

• 控制元素展示
• 取值 visible | hidden | collapse
• 初始值visible

Generated Content

• 控制元素
• ::before 和 ::after
• content

CSS盒模型类别

大家都知道css盒模型有两种标准，一个标准盒模型，一个是IE盒模型；两种盒模型的宽高的计算方式不一样。

IE盒模型的宽度或者高度计算方式为：width/height = content + padding + border，W3C盒模型的宽度或者高度计算方式为：width/height = content。

例：一个容器的 margin 为 10px，border 为 1px，padding 为 10px，content 的宽为 100px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个容器需要占据的位置为：宽10*2+1*2+10*2+100=142px、高 10*2+1*2+10*2+50=92px，盒子的实际大小为：宽1*2+10*2+100=122px、高1*2+10*2+50=72px；假如用ie 盒子模型，那么容器需要占据的位置为：宽10*2+100=120px,高10*2+50=70px,盒子的实际大小为：宽 100px、高 50px。

CSS3属性 box-sizing

box-sizing 默认为 content-box ，即采用W3C标准盒模型，若取值 border-box 则采用怪异模式盒模型；

目前使用此属性需要前缀如下:

1
2
3

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box|border-box|inherit;

1.盒模型为标准模型（content-box）

1
2
3
4
5
6
7
8

.content-box{
    width: 100px;
    height: 100px;
    margin: 30px;
    padding: 10px;
    border: 5px solid blue;
    box-sizing:content-box;
}

.content-box设置为标准模型，它的元素宽度width=100px;

2.盒模型为IE模型（border-box）

1
2
3
4
5
6
7
8

.border-box{
    width: 100px;
    height: 100px;
    margin: 30px;
    padding: 10px;
    border: 5px solid blue;
    box-sizing:border-box;
}

.content-box设置为IE模型，它的元素宽度width=content + 2 padding + 2 border = 70px + 2 10px + 2 5px = 100px。

浏览器兼容问题

一旦为页面设置了恰当的 DTD声明，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

**<!DOCTYPE>**后面一般有DTD的声明，如果有DTD的声明，浏览器就是处于标准模式；如果没有DTD声明或者HTML4一下的DTD声明，那浏览器按照自己的方式解析代码，处于怪异模式。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。