盒模型

2016-07-02 本文已影响154人婷楼沐熙

一.盒模型包括哪些属性？

盒模型包括的属性有：

margin：外边距。它包括margin-top、margin-right、margin-buttom、margin-left。margin的最基本用途就是控制元素周围空间的间隔,它永远是透明的。
border：边框。它包括border-top、border-right、border-buttom、border-left。
padding：内边距。它包括padding-top、padding-right、padding-buttom、padding-left。padding是用来使元素与内容有一定的间隔。
content。
在网页中，每个元素都被认为是一个矩形的盒子。
盒模型
如果要它显示你设计的宽高大小，使用命令 box-sizing: border-box;，这样有的时候会便于计算。
这里需要强调一下：
1.对于行内元素，手动设置宽高是无效的，它本身的宽高是由自身决定的。
2.行内元素可以设置margin、padding，但是只有水平方向，也就是左右方向的margin和padding是有效的，垂直方向，也就是上下方向的margin和padding是无效的。而如果上下padding如果设置边框或者背景色，会把边框和背景色撑开。但是它本身并不会挤占空间，这样的话可能会出现一个覆盖的问题。

二.边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会合并。设置了display:inline-block的元素，垂直margin不会被合并
一般来说，垂直外边距合并有三种情况：

元素自身合并。当元素没有内容（即空元素）、内边距、边框时，它的上下边距就会相遇了，即会产生合并（垂直方向）。如果为元素添加内容、内边距、边框其中的任何一项，都会取消合并。
元素合并相邻元素（兄弟合并），如果它们的上下边距相遇，即会产生合并。
包含元素合并（父子合并）。包含元素的外边距隔着父元素的内边距和边框，当这两项都不存在的时候，父子元素垂直外边距相邻，产生合并。添加任何一项即会取消叠加。

三.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中。

text-align: center的用于块级元素，比如说一个div或者段落上，使块级元素内部的行内元素水平居中。这个所谓的居中是针对自己的父容器,可以参考下面的示例。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>盒模型</title>
<style>
    .box1{
    width: 100px;
    height: 100px;
    border: 3px solid;
    margin: 20px;
    padding: 20px;
}
    .box2{
        width: 50px;
        height: 50px;
        border: 3px solid;
        margin: 5px;
        padding: 5px;
        background: red;
        text-align: center;
   }
</style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <a href="#">Link</a>
        </div>
    </div>
</body>
</html>

针对父容器居中

四.如果遇到一个属性想知道兼容性，在哪查看?

想要知道一个属性的兼容性，可以在Can I Use上面查看。
比如说输入text-align，就可以知道它的兼容性。

Can I Use

五.IE 盒模型和W3C盒模型有什么区别?

IE盒模型并不只是设置的内容宽高大小，还要包括border和padding；W3C盒模型只是内容宽高的大小。

ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度。

IE 盒模型
chrome， ie9+, ie678(添加 doctype) 使用标准盒模型，宽度= 内容宽度。

标准盒模型

六.以下代码的作用？兼容性？

*{ box-sizing: border-box;
}

box-sizing是定义元素盒尺寸大小的方式。它的属性值可以为content-box、padding-box、border-box、inherit。

box-sizing: content-box;这是盒模型默认值，也就是上面提到的标准盒模型。计算方法为width/height=content，表示指定的宽度和高度仅限内容区域，边框和内边距的宽度不包含在内。
box-sizing: padding-box;计算方法为width/height=content+padding，表示指定的宽度和高度包含内边距和内容区域，边框宽度不包含在内。
box-sizing: border-box;计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。这就是上面提到的IE盒模型。
box-sizing: inherit;继承父元素中box-sizing属性的值。

为了说明，来举个例子。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>盒子尺寸的计算方法</title> 
<style type="text/css"> 
div {  
    margin:5px;  
    width:200px;                   
    height:80px;                      
    background-color: red;  
    border:10px solid;       
    padding:10px;                    
    font-weight:bold;  
    font-size:18px;  
    line-height:40px;  
}  
.s1 {  
    box-sizing:border-box;  
.s2 {  
    box-sizing:padding-box;   
}  
.s3 {  
    box-sizing:content-box;   
}  
</style> 
</head> 
<body> 
<div class="s1">border-box</div> 
<div class="s2">padding-box</div> 
<div class="s3">content-box</div> 
</body> 
</html>

但是由于webkit内核的浏览器不支持属性值padding-box，故表现出默认的content-box效果。

效果图

再来回到题目当中，“*”表示选中所有的元素，box-sizing使用的计算方法为border-box，它使页面所有元素使用content里包括border、padding的盒模型，也就是采用IE盒模型。
举个例子。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>盒模型</title>
<style>
    .box{
    width: 100px;
    height: 100px;
    border: 3px solid;
    margin: 20px auto;
    padding: 20px;
    background: yellow;
    }
    *{
        box-sizing: border-box;
    }
</style>
</head>
<body>
    <div class="box">       
    </div>
</body>
</html>

盒模型大小

盒模型大小
经过审查元素，就可以看到它显示的总尺寸就是设置content的宽高。
它的兼容性可以在Can I Use上面查看。

box-sizing兼容性

七.代码

写一个 btn 的class，任何 a，span，div，button添加此class后后变成如下按钮的样式（鼠标hover背景色#c14d21，鼠标按下背景色#e25f31）。

<a class="btn" href="#">确定</a>
<span class="btn" >取消</span>
<div class="btn">提交</div>
<button class="btn"> 发送</button>

效果
代码的github地址：Github
预览效果

盒模型