-
第七问:当元素设置成inline-block会出现什么问题?怎么消除?
-
第八问:行内元素可以设置padding,margin吗?
-
第九问:padding:1px2px3px;则等效于什么?
-
第十问:内边距的百分数值是这么计算的
-
第十一问:那为什么不根据自己的宽度呢?而要根据父元素
-
第十二问:什么是边距重叠?什么情况下会发生边距重叠?如何解决边距重叠?
-
第十三问:第二种哪里算是外边距重叠???
-
第十四问:为什么回出现margin重叠的问题?粗俗点就是问设计者的脑子有问题吗?
-
第十五问:什么是BFC?
-
第十六问:那么BFC的原理是什么呢?
-
第十七问:BFC由什么条件创立?
-
第十八问:BFC的使用场景有哪些呢
-
第十九问:清除浮动的方法(最常用的4种)
本篇文章主要探讨盒模型,以及内边距、边框、外边距的面试题与思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章中
第一问:什么是盒模型?
可以说,页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:外边距(margin)、边框(border)、填充(亦称内边距)(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。
但是,盒模型有标准盒模型和IE的盒模型。
第二问:两者的区别是什么?
我们先来看两张图:
标准的(W3C)盒模型:
IE盒模型:
第三问:怎么设置这两种模型呢?
很简单,通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。
第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法
- 第一种:
dom.style.width/height
这种方法只能获取使用内联样式的元素的宽和高。
- 第二种:
dom.currentStyle.width/height
这种方法获取的是浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。
- 第三种:
window.getComputedStyle(dom).width/height
这种方法获取的也是浏览器渲染以后的元素的宽和高,但这种写法兼容性更好一些。
- 第四种:
dom.getBoundingClientRect().width/height
这种方法经常使用的场所是,计算一个元素的绝对位置(相对于视窗左上角),它能拿到元素的left、top、width、height 4个属性。
第五问:描述一下下面盒子的大小,颜色什么的(content-box模型)
有一说一,当时被字节面试官问到这个问题,我是挺蒙蔽的,因为他这里不指考了一点,问题列一下:
-
整个盒子的大小
-
padding的颜色
-
border的颜色
-
height为0了,看得见盒子吗?
答案:如图所示
-
整个盒子的大小 = 0 (因为height为0)
-
padding的颜色 = pink(继承content的颜色)
-
border的颜色 = blue(继承color字体的颜色,默认为black)
-
height为0了,看得见盒子吗?(虽然height为0,但是看得见盒子,因为有border和padding)
这里需要注意:
-
如果没有写border-style,那么边框的宽度不管设置成多少,都是无效的。
-
border-color的颜色默认跟字体颜色相同
-
padding颜色跟背景颜色相同
第六问:当small盒子设置成圆形时,内容会超出圆形吗?为什么
ddddddddddddddddddddddddddddddddddddddddddd
会超出圆形。原因如图所示,是因为border-radius只是改变视觉上的效果,实际上盒子占据的空间还是不变的。
第七问:当元素设置成inline-block会出现什么问题?怎么消除?
这是网易有道的小姐姐面试官的问题,我承认我确实不知道这个问题!
真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:
.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}
去除inline-block元素间间距的N种方法
- 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:
热血
或者是:
或者是借助HTML注释:
惆怅<!–
–>淡定<!–
–>热血
-
使用margin负值
-
让闭合标签吃胶囊
-
使用font-size:0
详细的可以看看这篇文章去除inline-block元素间间距的N种方法
第八问:行内元素可以设置padding,margin吗?
- 第一:行内元素与宽度宽度不起作用
span {
width:200px;
}
没有变化
- 第二:行内元素与高度高度不起作用
span{
height:200px;
}
没用变化
- 第三:行内元素与padding,margin
span{
padding:200px;
}
影响左右,不影响上下 ,span包裹的文字左右位置改变,上下位置不变,但背景色会覆盖上面元素的内容。如图所示:
行内元素(inline-block)的padding左右有效 ,但是由于设置padding上下不占页面空间,无法显示效果,所以无效。
第九问:padding:1px2px3px;则等效于什么?
对于我们来说,我们经常写的简写是两个值或者一个值或者四个值,而三个值的,会比较少写,所以当时,我确实有点蒙了,因为我对于这个三个值各代表什么是死记硬背的!后来才发现,原来遵循一条非常简单的规则:
简单来说就是 这四个值,分别代表上、右、下、左。如果没有写下的话,那就下复制上的,同理左复制右的值。
因此, 你应该明白了
-
当padding的值只有一个时,就是后面三个都复制了第一个
-
当写两个时,就是写了top和right,因此bottom复制top,left复制right
-
当写了三个时,就是写了top,right,bottom,因此left复制right。
这么简单的规则,再也不会忘记了吧。
第十问:内边距的百分数值是这么计算的
我们知道,padding可以这么设置
padding:100px
也可以
padding:20%
那当是百分比时是怎么计算的呢?
这不是很简单的问题吗?
就是根据父元素的宽度计算的
第十一问:那为什么不根据自己的宽度呢?而要根据父元素
好家伙,我说怎么问那么简单的问题,原来是为了这个问题做铺垫
这个问题可以这么思考,如果不根据父元素,而是根据本身的宽度的话。那么当padding生效后,本身的宽度不就变大了吗?那么padding不是也要变大吗?这就陷入了死循环(哇塞!)。
或者要是本身没有宽度,那岂不是怎么设置padding都是无效的!!!
第十二问:什么是边距重叠?什么情况下会发生边距重叠?如何解决边距重叠?
边距重叠:两个box如果都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。
边距重叠分为两种:
- 同级关系的重叠:
同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个**
- 父子关系的边距重叠:
父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距。
给父元素添加overflow:hidden
这样父元素就变为 BFC,不会随子元素产生外边距,但是父元素的高会变化
第十三问:第二种哪里算是外边距重叠???
实际上,这也是第一种的变形。
header {
background: goldenrod;
}
h1 {
margin: 1em;
}
Welcome to ConHugeCo
可以看到其实是header的margin为0,然后h1的margin为1em,因此header和h1的margin发生了重叠,然后header的margin就取1em和0两个值中最大的值了,所以当然取1em啦。
(网上有说是因为margin的传递性,但我并不同意,因为我实践了一下,发现不管父盒子有没有margin-top,父盒子只会选择两者值中的最大值,跟传递性似乎没啥关系)
第十四问:为什么回出现margin重叠的问题?粗俗点就是问设计者的脑子有问题吗?
这个就是问设计了margin重叠的巧妙用处。
这个曾经有位面试官问过我,我不知道,我请教了他,他说,在flex布局前,要实justify-content:space-evenly
的效果,利用浮动布局,然后给每个盒子设置margin-right,margin-left
就可以实现了,这样就不用去单独地再去设置第一个盒子的margin-left和最后一个盒子的margin-right,那时候我信了。
后来越想越不对,不是说margin水平方向不会发生重叠问题吗????
但是根据面试官的思路来的话,在垂直方向似乎就讲的通了。
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
结尾
正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。
CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-HLIJNp38-1711901510621)]
[外链图片转存中…(img-hfTzXTym-1711901510622)]
[外链图片转存中…(img-ucS48oSI-1711901510623)]
[外链图片转存中…(img-nsiQwEG6-1711901510623)]
[外链图片转存中…(img-9vZ281Ud-1711901510624)]
[外链图片转存中…(img-M6WGRNt9-1711901510625)]既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-6aUufhB5-1711901510625)]结尾
正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。