盒模型
2016-07-14 本文已影响1701人
进击的阿群
1. 盒模型包括哪些属性？
盒模型是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性。盒模型属性有：
- margin：外边距
- padding：内边距
- border：边框
- content：内容
boxmodel.png
内容区content-area：包含元素内容的区域，元素本身有一定的大小，占用的就是该空间大小，
width和height属性可以调节内容区域的宽和高。盒模型的宽和高：margin+padding+border+width/height，
如果
box-sizing:设置为border-box，则元素的width和height决定了盒模型宽高。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。即：content-width=padding+border+content-width.应用范围：适用于块级元素和inline-block元素，而行内元素虽然在水平方向可以设置margin和padding，且垂直方向能用padding，但是不属于盒模型的概念，如果要应用，则需要借助CSS的display属性。
外边距合并：当相邻的两个盒模型上下紧邻的时候，会选择margin值较大的作为外边距，即合并两个外边距取大值。而左右外边距不合并。如图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
box-sizing: border-box; /* 以边框作为界限，方便计算 */
}
.container1 {
border: 5px solid black;
width: 100px;
height: 100px;
padding: 10px;
background-color: red;
text-align: center;
vertical-align: middle;
margin: 30px;
}
.container2 {
border: 5px solid black;
width: 100px;
height: 100px;
padding: 10px;
background-color: red;
margin:40px;
}
.child {
border: 1px solid white;
width: 60px;
height: 60px;
background-color: #eee;
text-align: center;
vertical-align: middle;
margin: 0 auto;
display: table-cell;
}
</style>
</head>
<body>
<div class="container1">
<div class="child">
<a href="#">link</a>
</div>
</div>
<div class="container2">
</div>
</body>
</html>
效果图：
margin上下合并.png
注意：当我给container1加一个
display: inline-block属性，则由于两者显示类型的不同，虽然和盒模型类似，但是margin外边距不会合并。如图所述：
.container1 {
border: 5px solid black;
width: 100px;
height: 100px;
padding: 10px;
background-color: red;
text-align: center;
vertical-align: middle;
margin: 30px;
display: inline-block; /* 加上这个属性，margin不合并 */
}
Paste_Image.png
2. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中?
text-align: center作用于块级元素，使块级元素内部的文本或者图片等行内元素水平居中显示。
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
.div1 {
text-align: center;
}
div,p {
border: 1px solid silver;
}
</style>
</head>
<body>
<div class="div1">
啦啦啦啦啦啦啦啦
<p>
这是一段测试文本。
</p>
<div class="div2">
<p>
测试文本2。
</p>
</div>
</div>
</body>
</html>
效果图：
text-align.png
3. 如果遇到一个属性想知道兼容性，在哪查看?
在can i use网站上查看。
caniuse.png
4. IE 盒模型和W3C盒模型有什么区别?
W3C盒模型&IE盒模型.gif
如图所示，W3C盒模型的width指的是content区，而IE盒模型width指的是content+padding+border。
早期的IE（5.5版本）用的是IE盒模型，而从IE6开始，只要在文档中声明（添加doctype）则，兼容使用W3C盒模型。
如果IE678未添加doctype，即怪异模式，那么也是用IE模型。
从IE9以后，则不用填写声名也用的是W3C模型。
补充：
所有的盒模型，只要没有添加doctype，都处于怪异模式，但此时，只有ie678使用ie盒模型，其他的虽然处于怪异模式，但仍旧使用标准模型，其实与普通模式效果相同,怪异模式是在ie6时代为了兼容ie5以及以前版本的浏览器保留的 现在实际使用中都使用标准模式添加doctype。
5. 以下代码的作用？兼容性？
*{
box-sizing: border-box;
}
box-sizing:设置为border-box，则元素的width和height决定了盒模型宽高。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。即：width=padding+border+content。
如图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
box-sizing: border-box;
}
.container1 {
border: 5px solid black;
width: 100px;
height: 100px;
padding: 10px;
background-color: red;
text-align: center;
vertical-align: middle;
margin: 60px;
}
</style>
</head>
<body>
<div class="container1">
</div>
</body>
</html>
效果图：
box-sizing: border-box
