任务九~盒模型
2016-07-20 本文已影响32人
dengpan
一、盒模型包括哪些属性？
- CSS盒模型~即定义了Web页面中的元素是如何看做盒子来解析CSS盒模型属性有：
- content~内容
- 盒模型的内容区，由width和height组成
- padding~内边距
- 内边距是内容区和边框之间的空间，这个空间是透明的，没有颜色，没有装饰
- 单边内边距分别是：padding-top、padding-right、padding-bottom、padding-left
- 当padding的数值为百分数值时，其百分数值要相对于其父元素的width计算，而这里的padding包括了上下padding，即上下pading的百分数也会相对于元素宽度计算
- border~边框
- border:[<border-width>] || [border-style] || [border-color] || inherit
- 单边边框简写分别是：border-top、border-right、border-bottom、border-left
- margin~外边距
-
外边距是两个元素之间的距离，外边距也是透明的，没有颜色，没有装饰
-
单边外边距分别是：margin-top、margin-right、margin-bottom、margin-left
-
外边距可以使负值，如果垂直外边距都设置为负值，浏览器会取两个外边距绝对值的最大值；如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值
-
当margin的值设置为百分数时，其值相对于父元素的width；同时，这里的margin包括了上下margin
-
垂直外边距的合并（整理自CSS权威指南）：
- 两个外边距中较小的一个会被较大的一个合并；
- 如果相邻有多个外边距，也会出现合并，比如
ul{margin-bottom:20px;} li{margin-bottom:25px;} p{margin-top:30px;}
外边距合并
此时，列表的下外边距是20px;列表项的上外边距是25px；段落的上外边距是30px;那么当这些外边距合并时，最终段落的外边距能胜出，则li结尾到p开始之间的距离为30px
- 如果在包含块上设置边框或内边距时，会使其子元素的外边距包含在包含块内，比如
ul{margin-bottom:20px;border:1px solid red;} li{margin-bottom:25px;} p{margin-top:30px;}
外边距合并
此时，当在ul中设置了边框之后，li的下外边距放在了其父元素ul内部，这里外边距的合并只有ul和p之间的外边距发生合并
-
-
CSS盒模型图
CSS盒模型
二、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
-
text-align:center的作用是让元素中文本水平居中对齐；它作用在块级元素上，会使块级元素的行内元素水平居中对齐
三、如果遇到一个属性想知道兼容性，在哪查看?
- 可以去Can I use···查询！！！
Can I use ··截图
四、IE 盒模型和W3C盒模型有什么区别?
-
IE盒模型width=border+padding+content（IE678的怪异模式，现在可以通过box-sizing:border-box来实现）
IE盒模型
-
W3C盒模型width=content（chrome， IE9+, IE678添加 doctype 使用标准盒模型）
W3C盒模型
五、以下代码的作用？兼容性？
*{ box-sizing: border-box;}
- box-sizing是css3新增加的一个盒模型属性，能够事先定义盒模型的尺寸解析方式
- 语法为~box-sizing:content-box | border-box | inherit
- content-box：默认值，让元素维持W3C的标准盒模型，即width=content
- border-box：让元素维持IE传统的盒模型，即width=border+padding+content
- 比如
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
*{
box-sizing: border-box;
}
.box{
width: 100px;
height: 100px;
background: red;
border: 20px solid green;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
-
效果图
border-box效果图
此时这里的100px(width)=20px(border-left)+20px(padding-left)+20px(content的width)+0px(padding-right)+20px(border-right)
-
兼容性如下图
box-sizing兼容性
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
