CSS盒模型面试题的示例分析

  • 时间:
  • 浏览:46
  • 来源:恰卡网

导读这篇文章主要介绍了CSS盒模型面试题的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 1、谈谈你对CS...

这篇文章主要介绍了CSS盒模型面试题的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

1、谈谈你对CSS盒模型的认识?

问题简答

所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。CSS 框模型实质上是一个包围每个 HTML 元素的框。

它包括:

  • 外边距 → margin

  • 边框 → border

  • 内边距 → padding

  • 实际的内容 → content

它有标准模型和IE模型两种;

知识解析

盒模型,英文box model。

  • 无论是div、span、还是a都是盒子。

  • 图片、表单元素一律看作是文本,它们并不是盒子,因为一张图片里面并不能放东西,它自己就是自己的内容。

盒模型各部分说明:

  • Margin(外边距) :清除边框外的区域,外边距是透明的(可以为负值)。

  • Border(边框) :围绕在内边距和内容外的边框。

  • Padding(内边距) :清除内容周围的区域,内边距是透明的(不允许负值)。

  • Content(内容) :盒子的内容,显示文本和图像。

2、标准模型和IE模型的区别?

问题简答

标准模型和ie模型的区别是计算宽width高height的不同。

  • 标准模型width不计算padding和border;

  • ie模型width计算padding 和border;

知识解析

标准盒模型(W3C盒子模型)

设置的宽高是对实际内容content宽高进行设置,内容周围的border和padding另外设置;

即元素实际占位的宽高为:

width【height】= 设置的content的宽【高】 + padding + border + margin

可以通过实例来理解:写一个div,同时设置了宽、高、边框、内边距、外边距;

//注:如果下面示例未写html和css,说明与此处相同
.box{
width:100px;
height:100px;
border:10pxsolid#CC9966;
padding:30px;
margin:40px;
background:#66FFFF;
}
Axjy

效果及Chrome的开发者工具中显示的盒模型如下:

IE盒子模型(怪异盒模型)

设置的宽高是对实际内容content + 内边距(padding)+边框(border)之和的width和height进行设置的;

即元素实际占位的宽高为:

width(height)= 设置的width(height)+外边距margin

和上面使用同样的例子,但是通过设置box-sizing:border-box;,把它变为IE盒模型;

.box{
width:100px;
height:100px;
border:10pxsolid#CC9966;
padding:30px;
margin:40px;
background:#66FFFF;
box-sizing:border-box;//注意
}
Axjy

效果及Chrome的开发者工具中显示的盒模型如下:

3、CSS如何设置这两种模型?

问题简答

上面的示例其实已经用到了这个设置

4、JS如何设置/获取盒模型对应的宽和高?

问题简答

1)dom.style.width/height【只能取到内联元素】
2)dom.currentStyle.width/height【只有IE支持】
3)document.getComputedStyle(dom,null).width/height
4)dom.getBoundingClientRect().width/height
5)dom.offsetWidth/offsetHeight【常用】

知识解析

1、dom.style.width/height

通过dom节点的style样式获取,只能取到行内样式的宽和高,style 标签中和 link 外链的样式取不到

.box{...}
----------------------------

lettargetDom=document.querySelector('.box');
letwidth=targetDom.style.width;
letheight=targetDom.style.height;

console.log("width",width)
console.log("height",height)

使用类设置宽高时

获取的宽高为空

element.style.xxx 这种只能取得内嵌样式的属性,获取样式能读能写

2、dom.currentStyle.width/height

取到的是最终渲染后的宽和高,如果有设置宽高,则不论哪种盒模型获取到的都是设置的宽高,只有IE兼容

.box{...同上}
----------------------------

lettargetDom=document.querySelector('.box');
letwidth=targetDom.currentStyle.width;
letheight=targetDom.currentStyle.height;

element.currentStyle[xxx] 可以取得内部和外部样式,但是只兼容ie浏览器,获取的样式只能读

3、document.getComputedStyle(dom,null).width/height

取到的是最终渲染后的宽和高,如果有设置宽高,则不论哪种盒模型获取到的都是设置的宽高,和currentStyle相同,但是兼容性更好,IE9 以上支持。

getComputedStyle()方法,

『小扩展』

如果box类不设置宽高,而是由内容自动撑开;

标准盒模型通过getComputedStyle获取到的宽高是content的值;

IE盒模型通过getComputedStyle获取到的宽高 = border + padding + content,不包括外边距;

4、dom.getBoundingClientRect().width/height

得到渲染后的宽和高,大多浏览器支持。IE9以上支持。

.box{...同上}
----------------------------
lettargetDom=document.querySelector('.box');
letwidth=targetDom.getBoundingClientRect().width;
letheight=targetDom.getBoundingClientRect().height
console.log('width',width)
console.log('height',height)

标准模型,宽高设置为100的结果,额外包括了padding和border的值;

『小扩展』

如果box类不设置宽高,而是由内容自动撑开;

不论是哪种模型,获取到的都是(border + padding + content),不包括外边距;

5、dom.offsetWidth/offsetHeight(常用)

包括高度(宽度)、内边距和边框,不包括外边距。最常用,兼容性最好。

.box{...同上}
----------------------------
lettargetDom=document.querySelector('.box');
letwidth=targetDom.offsetWidth;
letheight=targetDom.offsetHeight;
console.log('width',width)
console.log('height',height)

标准模型,宽高设置为100的结果;

小扩展

如果box类不设置宽高,而是由内容自动撑开;

不论是哪种模型,获取到的都是(border + padding + content),不包括margin;

『解决办法』

『示例』

在页面放两个正方形



父元素margin-top设为0,子元素设置20px;

.parent-box{
width:100px;
height:100px;
margin-top:0;
background:#99CCFF;
}
.child-box{
width:50px;
height:50px;
margin-top:20px;
background:#FF9933;
}

预期效果:应该是父级元素没有边距,子元素顶部和父元素顶部之间的距离为20

实际效果:父子盒子重叠,父级与外面的间隔变成了20(会取较大的值,因为父级为0,所以取的是子级的margin)

方法四

.parent-box::before{
content:"";
display:table;
}

2、相邻块(兄弟)元素垂直外边距的合并(外边距塌陷)

当上下相邻的两个块元素相遇时,如果

则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者

利用overflow: hidden给父级创建BFC之后

brother-box有部分被浮动元素所覆盖(文本信息不回被浮动元素覆盖),如果想避免元素被覆盖,可利用创建BFC的方法,如给brother-box加overflow: hidden,则可得到以下效果

新建了BFC之后

上面的例子中,为了使两个正方形的外边距不重叠,就给其中一个div包裹一层container,触发BFC。

注意: 边距折叠的问题可以用 BFC 来解决,但触发 BFC 并不是解决边距折叠的充分条件,还要得到合理的运用

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS盒模型面试题的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持恰卡网,关注恰卡网行业资讯频道,更多相关知识等着你来学习!

猜你喜欢

30个上古神话传说(有哪些神话故事)

有哪些神话故事(30个上古神话传说) 神话传说和民间传说,是一个民族和国家的宝贵精神财富,有多少是你没有听说过的,又或是耳熟能详的? 1.盘古开天 传说太古时候,天地不分,整个宇

2021-08-05

布达拉宫简介(布达拉宫资料大全)

布达拉宫资料大全(布达拉宫简介) 布达拉宫坐落于西藏拉萨中心的红山之上,海拔3700余米,建筑总面积13万余平方米,主楼高115.703米,共13层,是西藏地区现存规模最大,样式最全,保存最

2021-08-05

小额投资理财项目有哪些?(小额投资理财有哪几种)

小额投资理财有哪几种?(小额投资理财项目有哪些?) 投资成为了人们比较热衷的事情,普通人也都参与进来,但是普通的人投资跟真正的投资人投资又是有很大的区别的。对于普通人而言

2021-08-05

世界上最美十座桥梁都有哪些?(世界十大最美大桥排行榜)

世界十大最美大桥排行榜(世界上最美十座桥梁都有哪些?) 桥梁是人类所建造的最古老、最壮观、最美丽的建筑工程之一。历史上著名的桥梁,都以鲜明的形象、强烈的艺术感染力,反映了

2021-08-05