什么是css盒模型

最新推荐文章于 2022-04-28 15:37:33 发布

原创最新推荐文章于 2022-04-28 15:37:33 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css盒模型 #盒模型

css 同时被 3 个专栏收录

11 篇文章

订阅专栏

html

10 篇文章

订阅专栏

html5

4 篇文章

订阅专栏

css盒模型指的是元素的margin padding border content属性

盒模型一般分为两种 ie和w3c

ie的盒模型元素的width = content + border + padding

w3c width = cotent

比如这里我们设置了width:200px,但是如果是ie渲染的话，那么content内容占的宽度就没有200px,可以通过box-sizing来切换盒模型的方式

<html>

<head>
  <meta charset="UTF-8">

  <title>Document</title>
</head>
<style>
  #box {
    width: 200px;
    height: 200px;
    padding: 50px;
    border: 3px solid deeppink;
    background: skyblue;
    /* ie */
    /* box-sizing: border-box;  */
    /* w3c标准 */
    /* box-sizing: content-box;  */
  }
</style>

<body>
  <div id="box">
    好无聊好无聊好无聊好无聊好
无聊好无聊好无聊好无聊好无聊好
无聊好无聊好无聊好无聊好无聊好
无聊好无聊好无聊好无聊好无聊好
无聊好无聊好无聊好无聊好无聊好
无聊好无聊好无聊好无聊好无聊好
无聊好无聊好无聊
  </div>
</body>

</html>