CSS盒子模型

邢走在云端

一、基本概念:

  • 标准模型

    标准模型

    height = content(height)
    width = content(width)
    标准模型的宽高就等于他们content的宽高

    这是之前写的标准盒模型,可以去看看

  • IE模型

    IE模型

    width = content(width) + padding-left + padding-right + border-left+ border-right;
    height = content(height) + padding-top + padding-bottom + border-top + border-bottom;
    IE盒模型的宽高包括border和padding

二、CSS设置盒模型

box-sizing:content-box; // 标准模型
box-sizing:border-box; // IE模型
默认是标准模型

看下面代码,这是一个div的css样式。(默认是标准模型)

width: 100px;
height: 100px;
background: #0f0;
border: 5px solid #f00;
padding: 10px;

标准模型

这时候的width和height就是content的宽和高

下面我们改一下盒子模型

    width: 100px;
    height: 100px;
    background: #0f0;
    border: 5px solid #f00;
    padding: 10px;
    box-sizing: border-box;

IE模型

这时候

width = content(width) + padding-left + padding-right + border-left+ border-right;
height = content(height) + padding-top + padding-bottom + border-top + border-bottom;

也就是【一】中的两个图

阅读 737

前端学习
个人学习专栏,记录自己的前端学习

每天跑步五公里

281 声望
24 粉丝
0 条评论

每天跑步五公里

281 声望
24 粉丝
文章目录
宣传栏