31. 什么是外边距重叠? 重叠的结果是什么?
首先,外边距重叠就是 margin-collapse。相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠,结合而成的外边距称为折叠外边距。
折叠结果遵循下列计算原则:
- 两个相邻的外面边距是正数时,折叠结果就是它们之中的较大值;
- 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值;
- 两个外边距一正一负时,折叠结果是两者的相加的和;
* 这两个属性的值都可以让元素变得不可见;
区别:
- 从占据空间角度看:display: none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见;
- 从继承方面角度看:display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility:hidden;是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式;
- 从重绘和重排角度看:修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘 读屏器不会读取display: none;元素内容;会读取visibility: hidden元素内容;
原理: 利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器的样式。
常见的hack有: 属性hack、选择器hack、IE条件注释。
34.link 与 @import 的区别?- link 是HTML方式, @import 是CSS方式;
- link最大限度支持并行下载,@import 过多嵌套导致串行下载,出现FOUC;
- link 可以通过 rel="alternate stylesheet"指定候选样式;
- 浏览器对 link 支持早于@import,可以使用 @import对老浏览器隐藏样式;
- @import必须在样式规则之前,可以在css文件中引用其他文件;
总的来说: link优于@import。
35.什么是 FOUC(Flash of Unstyled Content)? 如何来避免 FOUC?当使用@import导入CSS时,会导致某些页面在IE出现奇怪的现象: 没有样式的页面内容显示瞬间闪烁,这种现象被称为“文档样式暂时失效”,简称FOUC。
产生原因: 当样式表晚于结构性html加载时,加载到此样式表时,页面将会停止之前的渲染。等待此样式表被下载和解析后,再重新渲染页面,期间导致短暂的花屏现象。
解决办法: 只要在<head>之间加入一个<link>或者<script>``</script>元素即可。
36.display,float,position有什么关系?- 如果 display 为none,那么position和float都不起作用,元素不显示;
- 如果position值为absolute或者fixed,元素绝对定位,float的计算值为none,display根据下面的表格进行调整;
- 如果float不是none,框是浮动的,display根据下表进行调整;
- 其他情况下display的值为指定值 总结起来:绝对定位、浮动、根元素都需要调整 display;
毗邻的两个或多个margin会合并成一个margin,叫做外边距折叠。规则如下:
- 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠;
- 浮动元素或linline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠;
- 创建了会计格式化上下文的元素,不会和它的子元素发生margin折叠;
- 元素自身的margin-bottom和margin-top相邻时也会折叠;
- visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间仍然存在;
- opacity: 0;``CSS3属性,设置0可以使一个元素完全透明;
- position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外;
- display: none; 元素会变得不可见,并且不会再占用文档的空间;
- transform: scale(0); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留;
- <div hidden="hidden"> HTML5属性,效果和display:none;相同,当这个属性用于记录一个元素的状态;
- height: 0; 将元素高度设为 0 ,并消除边框;
- filter: blur(0); CSS3属性,将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中;
li排列受到中间空白(回车/空格)等的影响,因为空白也属于字符,会被应用样式占据空间,产生间隔。解决办法:
- 在ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px;
- 设置float:left;
浏览器解析CSS是从上到下,从左到右解析的,这样会提高查找选择器所对应的元素的效率(至于原因,有兴趣的童鞋可以自行去了解)。
41.全屏滚动的原理是什么?用到了CSS的哪些属性?
全屏滚动有点类似于轮播,整体的元素一直排列下去,假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%。也可以理解为超出隐藏部分,滚动时显示。
可能用到的CSS是: overflow:hidden; transform:translate(100%, 100%); display:none;
42.对浏览器内核的理解?浏览器内核主要分为两个部分: 渲染引擎和js引擎;
- 渲染引擎: 负责取得页面的内容(html,xml, 图像等)、整理讯息(加入css等)、以及计算网页的显示方式,然后对输出至显示器或者打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不同。所有网页浏览器、电子邮件客户以及其他所需要编辑、显示网络的应用程序都需要内核。
- JS引擎: 解析和执行Javascript来实现网页的动态效果。
最开始渲染引擎和js引擎没有明确的区分,后来js引擎越来越独立,内核就倾向于只渲染引擎。
43.对WEB标准以及W3C的理解与认识对于结构的要求:(规范的标签可以提高搜索引擎对页面的抓取效率,对SEO很有帮助)
- 标签要闭合
- 标签字母小写
- 标签不允许随意嵌套
对于CSS和JS来说:
- 尽量使用外链CSS样式表和JS脚本。同时结构,表现和行为分为三块,符合规范。此外,还得提高页面渲染速度,提高用户体验。
- 尽量少用行内样式,保证结构和表现分离。标签的id和class等的属性命名要做到见文知意,标签越少,加载越快,用户体验就会越高。同时代码方面也会更易于维护,便于改版。
- 不需要变动内容,便可一同打印版本而不需要复制内容,提高网站易用性。
从人手,分工和同步方面回答:
- 前期团队必须确认好全局样式,编码模式;
- 代码风格,编写习惯保持一致;
- 标注样式编写人,各模块都要及时标注(标注关键样式调用的地方);
- 对自己负责的页面进行标注;
- CSS和JS分文件夹存并行存放,命名都要统一;
- JS分文件夹存放,命名以该JS功能为准的英文翻译;
- 图片采用整合的.png格式存放,尽量整合在一起,方便将来管理;
视差滚动(Parallax Scrolling)指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术(3D效果)。
实现方式:
- CSS3实现: 优点是开发时间相对较短,性能和开发效率比较好。缺点是不能兼容到低版本的浏览器;
- JQuery实现:(通过控制不同层滚动速度,计算每一层的时间)优点是能兼容到各个版本,效果可控性好,缺点是开发起来对制作者的要求较高;
- 插件实现方式: 例如使用parallax-scrolling,兼容性十分好;
BFC规定了内部的Block Box如何布局。一个页面是由很多个Box组成的,元素的类型和display属性,决定了这个Box的类型。不同类型的box,会参与不同的Formatting Context(决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染,也是就是说BFC内部的元素和外部的元素不会相互影响。
定位方案:
- 内部的box会在垂直方向上一个接一个的放置;
- box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠;
- 每个元素margin box的左边,与包含块border box的左边相接触;
- BFC的区域不会与float box重叠;
- BFC是页面上的一个隔离的独立容器,容器里面的元素不会影响到外面的元素;
- 计算BFC的高度时,浮动元素也会参与计算。
满足下列条件之一就可以出发BFC:
- 根元素变化,即html;
- float的值不为none(默认);
- overflow的值不为visible(默认);
- display的值为inline-block, tabke-cell,table-caption;
- position的值为absolute或fixed;
一般来说,子元素的百分比单位都是以父元素为依据。但是margin和padding例外。元素的height是相对于容器的高度,但是元素的margin和padding是相对于容器的宽度。
48.一个满屏'品字'布局如何设计?方法有很多种,但是比较简单的方式就是: 上面的div宽度设置为100%,底下两个div设置成50%,并使用float或者inline使其保持在同一行即可(具体的样式可以自己微调)。如下:
css:
.content {
width: 50%;
height: 150px;
margin: 0 auto;
}
.top {
width: 40%;
height: 50px;
background-color: pink;
margin-bottom: 50px;
margin-left: 30%;
}
.left {
width: 45%;
height: 50px;
background-color: pink;
float: left;
}
.right {
width: 45%;
height: 50px;
background-color: pink;
float: right;
}
html:
<div class="content">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</div>>
复制代码
(1)、问题:png24位的图片在ie浏览器上出现背景。解决: 做成png8;
(2)、问题:浏览器默认的margin和padding不同。 解决: 添加一个全局的*{ margin: 0; padding: 0;};
(3)、问题:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性,而Firefox下,只能使用getAttribute()获取自定义属性。 解决: 统一通过getAttribute()获取自定义属性;
(4)、问题: IE下,event对象有x,y属性,但是没有pageX,pageY属性,而Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。 解决: 使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。
50.box-sizing 常用的属性有哪些?分别有什么作用?- box-sizing: content-box; // 默认的标准(W3C)和模型元素效果;
- box-sizing: border-box; // 触发怪异(IE)和模型元素的效果;
- box-sizing: inherit; // 继承父元素 box-sizing 属性的值;
本篇未完结,请见下一篇
推荐CSS学习相关文章
作者:hh_phoebe
转发链接:https://juejin.im/post/5ee0cf335188254ec9505381