盒模型
2016-08-02 本文已影响0人
饥人谷_沈梦圆
1.盒模型包括哪些属性
盒模型本质是一个盒子，封装周围的 HTML 元素，盒子内部包括了四部分：边界（间隔），边框，填充（间隙），内容。
- 边界（Margin）：清除边框区域。Margin 没有背景颜色，它是完全透明的，也就是在边距外面自动留出的一段空白
- 边框（Border）：边框周围的填充和内容，边框是受到盒子的背景颜色影响
- 填充（Padding）：清楚内容周围的区域，会受到框中填充的背景颜色影响，也就是盒子内装的东西和边框的距离。padding 的顺序是上、右、下、左（顺时针记忆）
- 内容（Content）：盒子的内容，显示文本和图像
盒模型总共有两种模式：标准模式与怪异模式
我举了一个例子来演示标准模式与怪异模式的差别，下面是演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- 标准模式下盒模型如下图，总宽度和高度=width/height+padding+border+margin
标准模式.png
- 怪异模式下盒模型如下图，盒子总宽度与高度包含了内边距（padding）和边框（border）在内，所以盒子总宽度/高度 = width/height+margin = 内容区宽度/高度+padding+border+margin
怪异模式.png
<strong>PS:更改模式就需用到 css3 属性 box-sizing，它有两个值，分别是 content-box（默认模式，即标准模式）与 border-box（怪异模式）。
2. text-align: center 的作用是什么，作用在什么元素上？能让什么元素水平居中
规定元素中的文本水平居中，作用在行内元素上，能让元素中的副容器水平居中，不针对元素本身
3.如果遇到一个属性想知道兼容性，在哪查看?
可以通过 can i use 中来查询
4.IE 盒模型和 W3C 盒模型有什么区别?
- IE 盒模型就等于一个怪异模式的盒子模型，也就是说总宽度/高度 = width/height+margin = 内容区宽度/高度+padding+border+margin
- W3C 盒模型就是标准模式的盒子模型，总宽度和高度=width/height+padding+border+margin
- ie678怪异模式（不添加 doctype）使用 ie 盒模型；chrome，ie9+, ie678(添加 doctype) 使用标准盒模型
5.以下代码的作用？兼容性？
*{
box-sizing: border-box;
}
- 作用：让该 html 文件下的代码盒子模型均使用怪异模式，即宽度= 内容宽度
兼容性.png
<strong>本文版权归作者和饥人谷所有，转载请注明出处
