css盒模型

傷城~ 2022-01-20 07:35 284阅读 0赞

首先提个问题，在写HTML文件时第一行为什么要写<!DOCTYPE html>呢？

### 什么是盒模型 ###

盒模型分为标准盒模型和IE盒模型，下图是Google开发者工具的截图：

*  标准盒模型：width = contentWidth + padding + border 、height = contentHeight +                               padding + border
 *  IE盒模型：width = contentWidth、height = contentHeight

效果如图所示：

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>盒模型</title>
        <style>
          body {
            background: #ff000;
          }
          .model {
            width:100px;
            height:50px;
            padding: 10px;
            border: 1px solid green;
            margin: 20px;
          }
          .model2 {
            box-sizing:border-box;
            width: 100px;
            height:50px;
            padding:10px;
            border: 1px solid green;
            margin:20px
          }
        </style>
      </head>
      <body>
        <div class="model">
          标准盒模型
        </div>
        <div class="model2">
          IE盒模型
        </div>
      </body>
    </html>复制代码

标准盒模型的占地大小在width固定的情况下，会在加上padding和border的值，但是IE盒模型width固定占地大小就是width的值，如果有padding和border的值就会挤占width的位置。

在样式model2中比model多了个box-sizing:border-box;那这个属性值又是什么呢？

### box-sizing属性 ###

box-sizing是css3属性，定义了user-agent应该如何计算一个元素的总宽度和总高度，可更改用于计算元素宽度和高度的默认css盒模型，默认值是content-box。可以使用这个属性模拟IE盒模型。

box-sizing : content-box || border-box || inherit

*  content-box：标准模式
 *  border-box：IE模式
 *  inherit：从父元素继承box-sizing的值

浏览器兼容性：

### 问题解答 ###

现在想想开头提到的问题，<!DOCTYPE html>是什么？

它是HTML标准网页声明，全称为Document Type HyperText Markup Language，超文本标记性语言，支持HTML5的主流浏览器都认识这个声明，表示网页采用HTML5，这句话一定要放在文本的最前面，告知浏览器使用哪种HTML规范。

在编写页面的时候，如果不声明<!DOCTYPE html>，那Chrome浏览器会将盒子模型解释为w3c标准盒子模型，IE会解释为IE盒子模型，也就是不同的浏览器会以自己的方式去解释盒模型，页面的样式的效果也就不一样，为了避免这种“怪异模式”，我们尽量都使用标准w3c模型，这样可以避免不同浏览器的不兼容。