盒模型

最新推荐文章于 2024-08-03 09:43:52 发布

shjxa

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量316

点赞数 1

分类专栏： web前端面试题 CSS 文章标签：面试题前端 css 盒模型

本文链接：https://blog.csdn.net/shjxa/article/details/56280751

版权

web前端面试题同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。4个部分一起构成了css中元素的盒模型。其结构如下图所示：

下面介绍一下关于盒模型的常见知识点：

1.盒模型共有两种：W3C盒模型和IE盒模型。

两者的区别为W3C盒模型元素的宽度为content-box的宽度，而IE盒模型的元素宽度为content+padding+margin的宽度。

CSS3中新增属性box-sizing

：initial 默认值，即content-box

：inherit 继承父元素的值

：content-box 元素的宽度 = content（即CSS中设置的width）+padding+border

：border-box 元素的宽度 = width（CSS中设置的width）

calc（支持百分比和像素的混合计算）

如width：-webkit-calc(40% - 30px);

注：使用calc需加上前缀，运算符加减（+、-）与数值之间应有空格，否则会认为非法，乘除（*、/）不需要。

2.对于行内元素与块元素

块元素

可以设置盒模型的各个属性值。块元素border和padding取负值非法，而margin可以。

块元素之间的距离根据margin-top和margin-bottom的取值分为如下几种：

a.都是正数：距离取margin-top和margin-bottom的最大值

b.都是负数：取最小值

c.一正一负：正负相加

行内元素

不可以设置宽（width），高（height），对于margin和padding在水平方向设置有效而垂直方向无效，即margin-left与margin-right有效，margin-top和margin-bottom无效，padding也如此。

3.对于块级元素的盒模型

元素的宽度

使用js获取盒模型各属性值。若CSS样式为内联样式，可通过element.style.marginLeft获取到；若不是行内元素，style无法获取，IE浏览器和Opera可以使用currentStyle属性获取定义在外部的样式，其他浏览器可通过window.getComputedStyle来获取。

function getCurrentStyle(element){     
   var currentStyle = null;    
   if(element.currentStyle){        
        currentStyle = element.currentStyle; 
}
else{       
    currentStyle = window.getComputedStyle(element); 
}   
return element.currentStyle; 
}