扫码关注公众号

前端CSS/CSS3之盒模型、弹性盒布局
04-25
792观看
01

使用CSS的flexbox布局,不能实现以下哪一个效果:

正确答案是DFlexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中

来自:CSS、CSS3-盒模型、弹性盒布局
02

介绍一下标准的CSS的盒子模型?

(1)有两种,IE盒子模型、W3C盒子模型;(2)盒模型:内容(content)、填充(padding)、边界(margin)、边框(bor

来自:CSS、CSS3-盒模型、弹性盒布局
03

box-sizing属性有哪些,他们的作用是什么?

用来控制元素的盒子模型的解析模式,默认为content-boxcontext-box:W3C的标准盒子模型,设置元素的height/widt

来自:CSS、CSS3-盒模型、弹性盒布局
04

解释一下你对盒模型的理解,以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。

说到IE的bug,在IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将border与padding都包含在width之内。而另外一些浏览器则与它相反,是不包括border和padding的。在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:box-sizing,它具有“content-box”和”border-box“两个值。1box-sizing:content-box当我们设置box-sizing:content-box;时,浏览器对盒模型的解释遵从我们之前认识到的W3C标准,当它定义width和height时,它的宽度不包括border和padding。1box-sizing:border-box当我们设置box-sizing:border-box;时,浏览器对盒模型的解释与IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素borderbox的尺寸以使其内容的宽或高最小为0。

来自:CSS、CSS3-盒模型、弹性盒布局
课程
专栏
js语言和框架-CSS、CSS3-盒模型、弹性盒布局
2专栏
1课程
5 试题
热门专题