盒模型
2016-07-11 本文已影响0人
墨月千楼
1.盒模型包括哪些属性
盒模型是css中元素大小的呈现方式，每一个元素都有盒模型。
盒模型包括4个属性：content,padding,border,margin.
content是盒模型的内容区。有width和height两个属性。
padding是盒模型的内边距。有padding-top,padding-bottom,padding-left，padding-right属性，即上下左右内边。
border是盒模型的边框。也有border-top,border-bottom,border-left，border-right,即上下左右边框。
margin是盒模型的外边距。有margin-top，margin-bottom,margin-left,margin-right,即上下左右外边距。
注意点:
- margin属性，
margin: 10px 11px 12px 13px;这四个值分别是上、右、下、左，按顺时针方向书写。
margin: 0 0 0 0;,可简写成margin: 0;，表示上下左右外边距都是0px。
margin: 0 10px 0 10px;,可简写成margin: 0 10px;,表示上下外边距是0px，左右外边距是10px。
padding、border属性用法同上。 - 外边距叠加。当两个或更多个垂直边距相遇时， 它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。 行内框、 浮动框或绝对定位框之间的外边距不会叠加。
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距叠加</title>
<style>
.item1 {
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.item2 {
width: 100px;
height: 100px;
background: red;
margin: 30px;
}
</style>
</head>
<body>
<div class="item1"></div>
<div class="item2"></div>
</body>
</html>
效果：
- 关于行内元素的margin、padding问题。width，height对行内元素无效。行内元素上下margin无效，上下padding撑开空间，但不占用空间。左右margin、padding有效。
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素</title>
<style>
span {
width: 1000px;
height: 1000px;
padding: 30px 10px;
margin: 1000px 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">
<p>段落1段落1段落1段落1段落1段落1</p>
文本<span>行内元素行内元素</span>文本
<p>段落2段落1段落1段落1段落1段落1段落1</p>
</div>
</body>
</html>
效果：
- 设置背景色时，margin外边距没有颜色。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
margin: 10px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
如图所示，背景色设为红色时，
参考盒模型
2.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align:center的作用是使文本和行内元素中。它作用在块元素上，使块元素内部的图片，文本等水平居中。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.nav {
text-align: center;
}
div,p {
border: 1px solid red;
}
p{
width:300px;
}
</style>
</head>
<body>
<div class="nav">
写一段话。
<p>段落一</p>
<img src="eg_submit.jpg" alt="图片1">
<div class="content">
<p>内容区域</p>
<form action="a.php">
<input type="submit" name="submit"value="提交">
</form>
</div>
</div>
</body>
</html>
效果：
可以看出，class属性是nav的div元素包围的区域内，文本，图片和提交框都水平居中。文本是相对于包围它的最近的元素水平居中，<img>和<input>是相对于它的直接父级元素水平居中。
3.如果遇到一个属性想知道兼容性，在哪查看?
在can i use这个网站查看。
4.IE 盒模型和W3C盒模型有什么区别?
ie678怪异模式（不添加 doctype）使用 ie 盒模型。chrome， ie9+, ie678(添加 doctype) 使用标准盒模型。两者区别可以用下图表示。
如上图所示，区别在于：
- W3C盒模型总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE盒模型总宽度=margin-left+width+margin-right - W3C盒模型总高度 = margin-top+ border-top + padding-top + height + padding-bottom+ border-bottom+ margin-bottom
IE盒模型总高度=margin-top+height+margin-bottom
5.以下代码的作用？兼容性？
*{
box-sizing: border-box;
}
*是通配符，匹配页面中所有元素。box-sizing: border-box;为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
使设置的元素的宽度=border-right+padding-right+实际内容的宽度+padding-left+border-left。
设置的元素的高度=border-top+padding-top+实际内容的高度+padding-bottom+border-bottom。
兼容性：
支持IE8以上浏览器。
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。
box-sizing:border-box;/*Internet Explorer、Opera、Chrome*/
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
没有box-sizing: border-box;时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
.simple {
width: 500px;
height: 100px;
margin: 20px;
background: #ccc;
}
.fancy {
width: 500px;
height: 100px;
margin: 20px;
padding: 20px;
border: 20px solid red;
background: #ccc;
}
</style>
</head>
<body>
<div class="simple">
</div>
<div class="fancy">
</div>
</body>
</html>
效果：
加上
*{
box-sizing: border-box;
}
后的效果;
本文版权归作者和饥人谷所有，转载请注明出处
