1.盒模型包括哪些属性
盒模型的构成主要有内容，内边距 padding，边框 border，外边距margin
2.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
-
text-align: center的作用是使块级元素内的行内元素相对该块级元素水品居中，有继承性，该样式添加在该块级元素（即例子中的.ct）上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
.ct {
text-align:center;
width:300px;
background-color:#bbb;
}
.div2 {
background-color:red;
width:200px;
}
</style>
</head>
<body>
<div class="ct">
<p class="item1">包括路易威登（LVHM）、开云（Kering）和爱马仕（Hermes）等著名品牌在内的“制造商联盟”（Unifab）星期四（6月16日）发表声明说，马云的谈话是误导性的，甚至是诽谤性的，与打击假货的有效行动背道而驰。</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
<div class="div2">
<h2>dddd</h2>
</div>
</div>
</body>
</html>
###3.如果遇到一个属性想知道兼容性，在哪查看？
在[caniuse](http://caniuse.com/)中查看。
###4.IE 盒模型和W3C盒模型有什么区别？
W3C盒模型中width不包括内边距和边框宽度，而IE盒模型的width包含了内边距和边框宽度。如图：
###5.以下代码的作用？兼容性？
- ```
* {
box-sizing: border-box;
}
兼容性：
Paste_Image.png
编写如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
.div1 {
width:200px;
height:200px;
padding:20px;
border:20px solid #0000ff;
margin:20px;
}
.div2 {
box-sizing: border-box;
width:200px;
height:200px;
padding:20px;
border:20px solid #0000ff;
margin:20px 20px 20px 60px;
}
.content {
width:100%;
height:100%;
background-color:#bbb;
}
</style>
</head>
<body>
<div class="div1">
<div class="content">content</div>
</div>
<div class="div2">
<div class="content">content</div>
</div>
</body>
</html>
结果如图：
及当给块级元素添加```box-sizing: border-box;```属性时，该盒模型的宽度```width```即包含了边框```border```和内边距```padding```的宽度.、
***
本教程版权归本人和饥人谷所有。
网友评论