CSS基础知识2-盒模型解释及标签兼容性查询

A、问答题

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

有content（盒子内容）、padding（清除内容周围的区域---内边距）、border（边框周围的填充和内容）、margin（清除边框区域--外边距）四大属性；
具体可详见本人所编写的如下代码及运行结果截图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
.know-box{
width: 150px;
height: 100px;
background-color: red;
border: 5px solid blue;
padding: 5px 10px;
margin: 50px auto;
text-align: center;
}

</style>
</head>
<body>
<div class="know-box">
    我是一个div
</div>
</body>
</html>

上述代码运行后得到如下结果：

盒模型介绍.png

由此可见

设置width及height数值，其实是设置content的width及height的数值；
padding的颜色会受到框内填充颜色的影响，但margin不会，其为透明色；

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

作用是使得文本或img标签等内联元素（或与之相似元素）水平居中，其可作用在块级元素中的文本或img标签等行内元素中，使其在其父元素中居中；例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
h1{
    text-align: center;
}
div{
    text-align: center;
}
</style>
</head>
<body>

<h1> <a href="#">这是块级元素h1中的a链接</a></h1>
<div> ![no](http://upload-images.jianshu.io/upload_images/2166980-ca29bf328967a027.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)这是块级元素div 
</div>

</body>
</html>

上述代码运行后（可见http://jsbin.com/royeba/edit?html,output） h1中的a链接实现居中了，div中的图片和文章也实现了居中；

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

可进入caniuse.com、MDN或w3school.com.cn等网站进行查询；
如下图为在caniuse.com中查询box-sizing的兼容性结果：

box-sizing兼容性.png

四、IE 盒模型和W3C盒模型有什么区别?

IE6、7、8在不添加doctype的情况下（怪异模式）使用IE盒模型；
IE6、7、8在添加doctype的情况下，IE9及以上和chrome 使用W3C盒模型；

区别是：IE盒模型中width及height的数值并不是指content的width及height的数值而是指padding+border+content的width和height的数值（这个时候内边距和边框将会包括在盒子中），但w3c则是指content的数值；

五、以下代码的作用？兼容性？

*{
  box-sizing: border-box;
}

作用是为元素设定的任何内边距及边框均在设定的宽度和高度中进行绘制，也就是所有元素输入的height及width数值即为content+padding+border的height及width的数值），这样可方便计算；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

    div{
        background-color: red;
        width: 100px;
        height: 50px;
        border: 5px solid blue;
        margin: 50px auto;
        padding: 10px;
    }
    /*
          *{
        box-sizing:border-box;
    } 
       */
      
    </style> 
</head>
<body>
    <div class="outside1"> 这是div1 </div>
    <div class="inside1"> 这是div2 </div>
    
</body>
</html>

上述代码运行如下：

未加box-sizing.png

此时height及width数值与content的height及width的数值是相符合的；

若去掉注释后，则运行结果如下：

加了box-sizing.png

此时height及width数值与content的height及width的数值是不相符合的，其为content的宽（高）数值加上padding及border宽（高）之和的两倍；

兼容性在caniuse.com查询结果如下：

box-sizing兼容性.png

兼容性在MDN查询情况（老资料）见下图：

桌面端：

电脑端兼容性.png
手机端：

手机端兼容性.png

兼容性情况说明引自MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

另：1、firefox支持替代的-moz-box-sizing属性；
2、box-sizing 默认值为content-box；

B、代码题

1、写一个 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>

自己写的代码详见：猛戳此处~ 哈哈

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *