盒模型包括哪些属性
- Margin - 清除边框区域。Margin没有背景颜色，它是完全透明
- Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
-
Content - 盒子的内容，显示文本和图像
边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 行内元素宽高由其自身决定
- 行内的左右margin与padding有效，上下的margin与padding无效，但是加border可以显示，可以用line-height将其撑开
- display:inline-block 将行内元素拥有块级元素属性,但可以在同一行排列，但IE8一下不支持。设置了display:inline-block的元素，垂直margin不会被合并。
- 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。上下合并
- 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。父子合并
- 尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- 作用于块级元素，使块级元素内的行内元素水平居中。此居中是针对其父容器的居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box1{
border:2px solid black;
background:rgba(0,255,0,0.5);
width:100px;
height: 100px;
text-align:center;
}
.box2{
text-align:center;
border:1px solid black;
margin:10px 15px 10px 5px;
padding:5px;
background:red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<a href="#">居中</a>
</div>
</div>
</body>
</html>
效果
如果遇到一个属性想知道兼容性，在哪查看?
IE 盒模型和W3C盒模型有什么区别?
- W3C标准中padding、border所占的空间不在width、height范围内，
- 俗称的IE的盒模型width包括content尺寸＋padding＋border
- 早期IE6、IE7使用“IE盒模型”，后来更新了一次，更新后的IE6、IE7使用 标准盒模型IE8及以上版本使用标准盒模型
- 没有DOCTYPE的情况下使用怪异模式，IE也使用“IE盒模型”
以下代码的作用？兼容性？
*{
box-sizing: border-box;
}
-
使得所有盒模型均按照IE盒子模型处理。即为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
-
box-sizing:content-box即为标准的盒子模型。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
兼容性
本文版权归饥人谷_Nick和饥人谷所有，转载请注明来源。
网友评论