CSS Box model 盒模型
2018-02-28 16:49
183 查看
盒子模型
最简单的就是四个属性:内容(content)、内边距(padding)、边界(border)、外边距(margin),我们可以抽象转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。![](https://user-images.githubusercontent.com/26264225/36648902-d150d148-1ad3-11e8-8ca2-cbaeeb42731d.png)
当然,我们从最基本的谈起:
内容(content)
内容(content)由2个属性 width 与 hight 组成的,width 和 height 设置内容框(content box)的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容,以及表示嵌套子元素的其它框。内边距(padding)
padding 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。该层的大小可以通过简写属性padding 一次设置所有四个边,或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。边界(border)
CSS 框的边界(border)是一个分隔层,位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边,例如 border: 1px solid black;外边距(margin)
外边距(margin)代表 CSS 框周围的外部区域,称为外边距,它在布局中推开其它 CSS 框。其表现与 padding 很相似;简写属性为 margin,单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。(w3c)标准盒子和IE(怪异)盒子也有不同
![](https://user-images.githubusercontent.com/26264225/36649071-3bc7f29e-1ad5-11e8-89fe-73476f4b466b.jpg)
由上面看标准盒子的content是不包括其他内容,而IE盒子是包括border,以及padding
CSS3的box-sizing
box-sizing语法box-sizing : content-box || border-box || inherit;
当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
当设置为box-sizing:border-box时,将采用IE(怪异)模式解析计算;
标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)
![](https://user-images.githubusercontent.com/26264225/36650045-0e31cca4-1adc-11e8-85bd-627198100d86.png)
![](https://user-images.githubusercontent.com/26264225/36650142-c0b9bbe8-1adc-11e8-8d76-f1a7ba12b650.png)
css 盒子模型的面试题:
1、请你谈谈对css盒子模型的认识?
四个属性:内容(content)、内边距(padding)、边界(border)、外边距(margin),上面有详细解释。2、标准模型与IE模型的区别?
标准模型与IE模型的区别就是宽和高的计算方式不同,标准的宽度就是content,不包括padding和border,ie的高是content + padding + border的,上面有详细介绍。3、css是如何设置盒子模型的?
box-sizing : content-box || border-box || inherit;4、js如何设置获取盒模型对应的宽和高?
方法一:dom.style.width/height // 只能获取到内嵌样式的宽高,而对于其他的形式是获取不到的,也就是js直接.style.width 取到空白的bug方法二:dom.currentStyle.width/hight // 渲染以后的宽高 只能IE支持
方法三:dom.getComputedStyle(dom).width/height // 计算一个元素的绝对高度
方法四:dom.getBoundingClientRect().width/height // 这个方法能获取当前元素css的最终属性值
box.getBoundingClientRect().width;获得元素的宽高,说一点在标准盒子模型下,他获取到的盒子的宽度是content-width+border+padding 而在IE盒子模型下他获取到的是你设置的宽度,因为在IE盒子模型下padding和border是算在width里的
var box=document.getElementById('box'); // 这个属性有四个值top、right、left、bottom // 它是代表和页面上边和左边的距离 box.getBoundingClientRect().top; // 元素上边到视窗上边的距离 box.getBoundingClientRect().right // 元素右边到视窗左边的距离 box.getBoundingClientRect().bottom; // 元素下边到视窗上边的距离 box.getBoundingClientRect().left; // 元素左边到视窗左边的距离
5、BFC是什么
Block Formatting Context,中文直译为块级格式上下文。BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,也有人说:可以把BFC理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。5.1、如何创建BFC?
一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个:float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible
5.2、BFC的作用
清除内部浮动我们在布局时经常会遇到这个问题:对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为0。解决这个问题,只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden
5.3、垂直margin合并
<!-- margin 边距 --> <div class="parent"> <div class="children"></div> </div>
<style> html, body{ margin: 0; padding: 0; } .parent{ background: #f00; } .children{ height: 100px; width: 100px; background: #0f0; margin-top: 10px; } </style>
![](https://user-images.githubusercontent.com/26264225/36658913-9532d58c-1b0d-11e8-8359-db36f456e49f.png)
![](https://user-images.githubusercontent.com/26264225/36658947-b356ae62-1b0d-11e8-8048-5e2f7481e2b6.png)
在CSS当中,相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。折叠的结果:
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。
这个同样可以利用BFC解决。关于原理在前文已经讲过了
5.4、创建自适应两栏布局
原理就是利用BFC拥有自己的块级相关文章推荐
- CSS中的框模型(box model)/margin、padding、border介绍/ 外边距层叠collapsing计算
- CSS核心:盒子模型(box model)
- CSS属性之盒子模型(Box Model)
- CSS盒模型(Box Model)
- CSS Box Model 盒模型
- HTML和CSS的盒子模型(Box model)
- 【CSS学习】CSS 框模型(Box Model)
- CSS盒模型(Box Model)问题详解
- CSS 盒子模型(Box Model)和轮廓(outline)
- css核心-盒子模型(Box Model)整理
- css核心-盒子模型(Box Model)整理
- CSS教程:盒模型(BOX Model)
- HTML和CSS的关键—盒子模型(Box model)(转载)
- CSS之盒子模型(Box Model)
- CSS 框模型(Box Model)
- CSS 盒子模型(Box model)中的 padding 与 margin
- CSS的盒子模型(Box Model)
- HTML和CSS的关键:盒子模型(Box model)
- CSS教程 CSS盒模型(Box Model)问题详解