我理解的css盒模型

时间 2019-11-21

标签理解 css 模型栏目 CSS 繁體版

原文原文链接

什么是盒模型

网页渲染的时候，全部的元素都会被浏览器引擎根据CSS-Box模型描述为一个盒子,CSS会决定这些盒子的大小, 位置, 属性(颜色, 边框...)。盒子模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。但盒子的大小由content+padding+border这几部分决定，把margin算进去的那是盒子占据的位置，而不是盒子的大小。浏览器

盒模型的分类

盒模型分为两类: IE盒模型(或怪异模型)和标准盒模型。
二者的区别在于:bash

IE盒模型：width/height = content + border + padding
W3C标准盒模型：width/height = content

1. 标准盒模型

从图中能够看出我设置的宽高为150，内边距为10,边框为5，下边距10，而元素真正呈现的是180。即width(150) + padding(2 * 10) + border(5 * 2) = 180

2. IE盒模型

从图中能够看出我设置的宽高为150，内边距为10,边框为5，下边距10，而元素真正呈现的依然是150，内容的宽度（content）变为了120，可是盒子的大小并未发生改变。

两种盒模型的优缺点

举个栗子 ui

<style>
  .content-box {
    width: 150px;
    height: 150px;
    background: #fff;
    margin-bottom: 200px;
  }

  .child1 {
    float: left;
    width: 50%;
    height: 100px;
    padding: 10px;
    border: 5px solid red;
    background: #ccc;
  }

  .border-box {
    width: 150px;
    height: 150px;
    background: #fff;
  }

  .child2 {
    float: left;
    width: 50%;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    border: 5px solid red;
    background: #ccc;
  }
</style>

<body>
  <div class="content-box">
    <div class="child1">子元素1</div>
    <div class="child1">子元素1</div>
  </div>
  <div class="border-box">
    <div class="child2">子元素1</div>
    <div class="child2">子元素1</div>
  </div>
</body>
复制代码

我同时设置了两个子元素宽度都是父元素的50%；当想在子元素内加padding或者border时，标准模型盒子的实际宽度就会超过50%，致使换行。若是强行想让子元素在同一行内，就不能设置宽度为50%，而应该经过计算width:cacl(50% - 2 * padding - 2 * border);而对于IE盒模型，内容的宽度会根据padding和border进行调整，元素的真实宽度始终是50%，因此不会致使换行。spa

改变盒模型

目前在ie8+以及其余浏览器中盒模型默认值为content-box，即标准盒模型。能够经过box-sizing进行切换。code

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

content-box (标准盒模型)
border-box（IE盒模型）
inherit (规定应从父元素继承 box-sizing 属性的值)

结语

你们能够根据本身的须要，经过box-sizing来愉快地改变盒子模型啦~cdn

1. css盒模型的理解
2. css—盒子模型理解
3. css 盒子模型理解
4. css盒模型理解
5. CSS盒子模型理解
6. css 理解盒子模型
7. CSS 理解盒子模型
8. css盒子模型理解
9. 04-css盒子模型-彻底理解css盒子模型
10. css盒模型的讲解
更多相关文章...
• ASP.NET MVC - 模型 - ASP.NET 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 委托模式
• Kotlin学习（二）基本类型