前端面试题集锦——HTML+CSS篇

前端面试题集锦——HTML篇

1. 你是怎么理解 HTML 语义化

1、HTML的语义化就是从代码层次表达人的想法、思路,同时描绘出网站页面的结构,因为页面不止是给人看的,机器也要看。
2、网页结构清晰更方便开发维护,html语义化就是规定一些html的标签、属性有着特定的作用。
3、语义化的HTML,不关心内容的显示效果。 说的简单一点就是: 标题脱了CSS这层外衣渲染,它还是一个标题。例如

/
/
.aspectration { height: 0; width: 100%; } .aspectration[data-ratio="16:9"] { padding-top: 56.25%; } /*结合伪元素*/ .aspectration:after { content: ""; display: block; width: 1px; margin-left: -1px; } .aspectration[data-ratio="16:9"]:after { padding-top: 56.25%; } /*使用 padding 方式结合 calc 实现 */ .aspectration[data-ratio="16:9"] { padding-top:calc(100% * 9 / 16); } .aspectraion[data-ratio="4:3"] { padding-top:calc(100% * 3 / 4 ); } 长宽一项设置百分比另一项 aspect-ratio 实现(需借助插件实现) /* CSS新特性中提供了一种新的单位vw 浏览器100vw表示的是浏览器的视窗宽度(ViewPort) 视窗(ViewPort)是你的浏览器实际显示内容的区域——也就是不包括工具栏和按钮的网页浏览器 比如你的浏览器是1334px,那么对应的100vw = 1334px 这时1vw = 13.34px 这里的100vw对应前面方案的100%,把前面的%单位换成vw单位 16 : 9 对应的是 100vw * 9 / 16 = 56.25vw 4 : 3 对应的是 100vw * 4 / 3 = 75vw */ .aspectration[data-ratio="16:9"] { width: 100vw; height: 56.25vw } /*css新特性 CSS Grid Layout*/ .aspectration { display: grid; grid-template-columns: repeat(16, 6.25vw); grid-auto-rows: 6.25vw; } .aspectration[data-ratio="16:9"] .content { grid-column: span 16; grid-row: span 9; }

12.display 相关:

定义: display规定元素应该生成的框的类型

display使用不谨慎,可能会违反HTML中定义的显示层次结构

display的取值

常用的取值:

none:表示隐藏对象,与visibility属性的hidden值不同,display:none不为被隐藏的对象保留物理空间 ,然visibility:hidden就保留

block:显示为块级元素,元素前后会带有换行符
inline:默认,元素会被显示为内联元素
inline-block:行内块元素
list-litem:作为列表显示 指定对象为列表项目
flex:弹性盒子布局
grid:网格布局

不常用的取值

run-in:会根据上下文作为块级元素或内联元素显示
table:块级表格 指定对象作为块元素级的表格。
inline-table:内联表格 指定对象作为内联元素级的表格。
table-row:此元素会作为一个表格行显示(类似tr)。
table-row-group:元素作为一行或多行的分组,类似tbody
table-header-group 此元素会作为一个或多个行的分组来显示,类似thead。
table-footer-group 此元素会作为一个或多个行的分组来显示,类似tfooter。
table-column 此元素会作为一个单元格列显示(类似col)
table-column-group: 指定对象作为表格列组显示。类同于html标签colgroup(CSS2)
table-cell 此元素会作为一个表格单元格显示(类似 td 和th)
table-caption 此元素会作为一个表格标题显示(类似 caption)
inherit:规定应该从父元素继承 display 属性的值。
box: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
inline-box: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
flexbox: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
inline-flexbox: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
flex: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
inline-flex: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)

13.CSS 优化、提高性能的方法有哪些?

  • 层级扁平,避免过于多层级的选择器嵌套;

  • 减少使用通配符与属性选择器;有选择地使用选择器

  • 减少不必要的多余属性;

  • 使用 link 替 代原生 @import;

  • 不要在ID选择器前面进行嵌套,ID本来就是唯一的而且权限值大,嵌套完全是浪费性能。

  • 建立公共样式类,把相同样式提取出来作为公共类使用。

  • 避免过分重排

  • 使用 动画属性 实现动画,动画时脱离文档流,开启硬件加速,优先使用 css 动画;

  • 硬件加速的好坏

  • 避免过度约束

  • 避免后代选择符

  • 避免链式选择符使用紧凑的语法

  • 避免不必要的命名空间

  • 避免不必要的重复

  • 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

  • 避免!important,可以选择其他选择器

  • 尽可能的精简规则,你可以合并不同类里的重复规则

14.CSS开启 GPU加速

为 动 画 DOM 元 素 添 加 CSS3 样 式 -webkit-transform:transition3d(0,0,0) 或 -webkit- transform:translateZ(0);,这两个属性都会开启 GPU 硬件加速模式,从而让浏览器在渲染动画时从CPU转 向GPU ,其 实 说 白 了 这 是 一 个 小 伎 俩 , 也 可 以 算 是 一 个 Hack ,-webkit-transform:transition3d 和-webkit- transform:translateZ 其实是为了渲染 3D 样式,但我们设置值为 0 后,并没有真正使用 3D 效果,但浏览器却因此开启了 GPU 硬件加速模式。

-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

开启 GPU 硬件加速可能触发的问题:

通过-webkit-transform:transition3d/translateZ 开启 GPU 硬件加速之后,有些时候可能会导致 浏览器频繁闪烁或抖动,可以尝试以下办法解决之:

-webkit-backface-visibility:hidden; 

-webkit-perspective:1000;

总结:

通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题,但使用仍需谨慎,使用前一定要进行严谨的测试,否则它反而会大量占用浏览网页用户的系统资源,尤其是在移动端,肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量,降低电池寿命等问题。

15.display:none 和 visibility:hidden 的区别:

display:none : 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占据的空间消失。

visibility:hidden : 隐藏对应的元素,但是在文档布局中仍保留原来的空间。给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。

1、visibility具有继承性,给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数,visibility: hidden虽然让一个元素不见了,但是其计数器仍在运行。这和display: none完全不一样

3、CSS3的transition支持visibility属性,但是并不支持display,由于transition可以延迟执行,因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

16.position 的 absolute 与 fixed 共同点与不同点:

共同点:

1.改变行内元素的呈现方式,display 被置为 block;

2.都是用来给元素定位的属性,具有定位元素的一切特点(例如脱离文本流、不占据空间等等);

3.默认会覆盖到非定位元素上

不同点:
1、fixed的父元素永远是浏览器窗口,不会根据页面滚动而改变位置;absolute的父元素是可以设置的,他会永远跟随父元素的位置的改变而改变。

2.absolute 的”根元素“是可以设置的,而 fixed 的”根元素“固定为浏览器窗口。当你滚动网页,fixed 元素与浏览器窗口之间的距离是不变的。

17.CSS 选择符有哪些?

  • id 选择器( # myid)

  • 类选择器(.myclassname)

  • 标签选择器(div, h1, p)

  • 相邻选择器(h1 + p)

  • 子选择器(ul > li)(相邻后代选择器)

  • 后代选择器(li a)

  • 通配符选择器( * )

  • 属性选择器(a[rel = “external”])

  • 伪类选择器(a: hover, li:nth-child)

  • 伪元素选择器(::before, ::after)

  • 兄弟选择器(li ~ a)

  • 相邻兄弟选择器(li + a)

18.哪些属性可以继承?

对于一些可以继承的属性,可以只设置上级的CSS样式表树形,子级(下级)不用设置,会自动继承此CSS属性,可以减少CSS代码,便于维护。

有继承性的属性:
字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:允许你使文字变宽或变窄。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,字体的小写字母 "x"的高度与"font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。
文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
text-shadow:设置文本阴影
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
元素可见性:visibility
表格布局属性:caption-side	border-collapse	empty-cells
列表属性:list-style-type
list-style-image	list-style-position、list-style
设置嵌套引用的引号类型:quotes
光标属性:cursor
还有一些不常用的;speak,page等属性,

无继承的属性
1、display
2、文本属性:vertical-align	text-decoration
3、盒子模型的属性:宽度、高度、内外边距、边框等
4、背景属性:背景图片、颜色、位置等
5、定位属性:浮动、清除浮动、定位position等
6、生成内容属性:content、counter-reset、counter-increment
7、轮廓样式属性:outline-style、outline-width、outline-color、outline
8、页面样式属性:size、page-break-before、page-break-after

继承中比较特殊的几点
a 标签的字体颜色不能被继承

-

标签字体的大下也是不能被继承的 因为它们都有一个默认值

19.CSS3 新增伪类有哪些:

CSS3 新增伪类举例:

E:first-child匹配父元素的第一个子元素E
E:last-child匹配父元素的最后一个子元素E
elem:last-child选中最后一个子元素。
elem:nth-child(n)选中父元素下的第n个子元素,并且在这个子元素的标签名为
	elem,n可以接受具体的数值,也可以接受函数。
elem:nth-last-child(n)作用同上,不过是从后开始查找。
elem:only-child如果elem是父元素下唯一的子元素,则选中之。

elem:nth-of-type(n):查找第n个elem标签的元素。可以为一个函数。
elem:first-of-type:选中父元素下第一个elem类型的元素。
elem:last-of-type:选中父元素下最后一个elem类型的元素。
elem:only-of-type:如果父元素下的子元素只有一个elem类型的元素,则选中该元素。
elem:empty:选中不包含子元素和内容的elem类型的元素。
elem:target:选中当前活动的elem元素。
:not(elem):选择非elem元素的每一个元素。
:enabled:控制表单控件的禁用状态。
:disabled:控制表单的禁用状态。
:checked单选框和复选框被选中。

20.position 的值,relative 和 absolute分别是相对于谁进行定位的:

  • static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。

  • absolute 生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位。

  • fixed (老 IE 不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。

  • relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。

  • sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出

inherit 规定从父元素继承 position 属性的值。

21.CSS3 有哪些新特性:

边框:

    border-radius	用于指定边框的圆角属性,
    box-shadow	该属性用于添加阴影
    border-image	该属性可以使用图片来创建一个边框

文字效果
text-shadow	用于给文字添加阴影
box-shadow(即边框的box-shadow)
text-overflow	该属性指定当文本溢出时,内部内容应该有啥效果
word-wrap	该属性用于是否自动换行
word-break	该属性规定非中日韩文本的换行规则
text-justify	该属性指定应怎样对齐文本以及对齐间距
text-outline	该属性设置文本的轮廓,但是这个样式现在所有浏览器都不支持

2D/3D转换
在CSS3中2D转换增加transform属性,并添加了下列方法:
    translate()—设置元素的位置,可以设置上或下移动,可分为translateX()translateY()两个方法
    rotate(angle)—规定元素的旋转角度,角度可为负,顺时针为正,逆时针为负
    scale()—缩放或放大元素,有scaleX()scaleY()两个方法
    skew()—规定元素在X轴和Y轴的倾斜角度,有skewX(angle)skewY(angle)两个方法
    matrix()—定义2D变换,有六个参数,包含了旋转、缩放、平移和倾斜功能
在3D变换中,transform属性主要有下列方法:
        rotateX()— 绕其在一个给定度数X轴旋转的元素
        rotateY()—绕其在一个给定度数Y轴旋转的元素
        rotateZ()—绕其在一个给定度数Z轴旋转的元素

新增 RGBA,HSLA 模式  使用RGBA实现透明效果;

盒子模型:box-sizing
用于定于盒模型,主要有标准盒模型(content-box)和怪异盒模型(border-box)

过渡:transition,可实现动画
    CSS3过渡是指元素从一种样式逐渐变换为另一种样式
   必须要指定两项内容
        指定要添加效果的CSS属性
        指定效果的持续时间

自定义动画  animate @keyfrom
    该规则用于创建动画
    规则内指定一个CSS样式和动画将逐步从目前的样式改为新的样式
如果遇到浏览器可能不兼容的情况,需要添加前缀:-webkit-、-ms-、-moz-,其他的属性也是如此

渐变效果;
    渐变(gradients)可以让两个或多个颜色之间平稳的过渡
    CSS3定义了两种类型的渐变:
        线性渐变(linear gradients):向上/向下/向左/向右/对角线方向
        径向渐变(radial gradients):从中心向外扩散

使用“@Font-Face”实现定制字体;@font-face
允许使用任何字体,只是需要将字体的网址添加进来,用户使用时就会自动下载

背景;
    background-image可以添加背景图片,并且可以添加多张,不同的图片用逗号隔开,显示在最顶端的是第一张图片可以添加背景图片,并且可以添加多张,不同的图片用逗号隔开,显示在最顶端的是第一张图片
    background-size	可用于指定背景图片的大小
    background-origin	该属性用于指定背景图像的位置区域
content-box、padding-box、border-box值表示放置的背景图像区域
    background-clip	用于背景裁剪属性是从指定位置开始绘制
content-box、padding-box、border-box值表示裁剪的区域


文字或图像的变形处理;

多栏布局;
CSS3可以将文本 内容设计成像报纸一样多列布局。关于多列布局有以下属性:
    column-count	指定将元素分割的列数
    column-gap	属性指定了列与列间的间隙
    column-rule-style属性指定了列与列间的边框样式
    column-rule-width属性指定了两列的边框厚度
    column-rule-color属性指定了两列的边框颜色
    column-rule
    column-span
    column-width	属性指定了列的宽度

媒体查询
使用@media查询,可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询
@media mediatype and|not|only (media feature){
      css-code;
}   
/*  用@media开通 注意@符号       
mediatype:媒体类型,包含(all,print,screen,speech)
1.all–所有设备
2.print–打印机和打印预览
3.screen–电脑屏幕,平板电脑,智能手机等
4.屏幕阅读器等发声设备   
关键字 将媒体类型或多个特性连接到一起做为媒体查询的条件
    and:可以将多个媒体特性连接到一起,相当"且"于的意思
    not:排除某个媒体类型,相当于"非"的意思,可以省略
    only:指定某个特定的媒体类型,可省略
media feature 媒体特性,必须有小括号包含	每种媒体类型都具备各自不同的特性,根据不同媒体类型特性设置不同的展示风格,
如:width:屏幕可见宽度;max-height:页面最大可见区域高度

22.为什么要初始化 CSS 样式

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

当然,初始化样式会对 SEO 有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)

弊端

初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

23.canvas 在标签上设置宽高和在 style 中设置宽高有什么区别:

canvas相当与我们电脑中自带的“画图”工具,有画布,画板,绘图工具构成。当我在canvas中设置宽高,相当于使用鼠标拖动了画布的边框使画布变大,但是里面的内容不会变化。当我在style中设置了宽高,相当于点击放大镜对整个图像进行方法,使得里面的内容也会跟着变化。 如果 canvas 的 width 和 height 没指定或值不正确,就被设置成默认值 。

24. 什么是 css HACK?

CSS hack 是通过在 CSS 样式中加入一些特殊的符号,让不同的浏览器识别不同的符号,以达到应用不同的 CSS 样式的目的

什么是CSS hack?

由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

hack:本意:修改,引申为对软件的二次修改 css hack的意思是浏览器兼容

25. Less/Sass/Scss 的区别

Scss 其实是 Sass 的改进版本 Scss 是 Sass 的缩排语法,对于写惯 css 前端的 web 开发者来说很不直观,也不能将 css 代码加入到 Sass 里面,因此 Sass 语法进行了改良,Sass 3 就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。

Less 环境较 Sass 简单 Sass 的安装需要安装 Ruby 环境,Less 基于 JavaScript,需要引入 Less.js 来处理代码

输出 css 变量符不一样,Less 是@,而 Sass 是$,而且变量的作用域也不一样。

Sass 没有局部变量,满足就近原则。Less 中{}内定义的变量为局部变量。

Less 没有输出设置,Sass 提供 4 中输出选项:

输出样式的风格可以有四种选择,默认为 nested

  • nested:嵌套缩进的 css 代码
  • expanded:展开的多行 css 代码
  • compact:简洁格式的 css 代码
  • compressed:压缩后的 css 代码

Sass 支持条件语句,可以使用 if{}else{},for{}循环等等。而 Less 不支持。

Less 与 Sass 处理机制不一样 Less 是通过客户端处理的,Sass 是通过服务端处理,相比较之下 Less 解析会比 Sass 慢一点

Sass 和 Less 的工具库不同 Sass 有工具库 Compass, 简单说,Sass 和 Compass 的关系有点像 Javascript 和 jQuery 的关系,Compass 是 Sass 的工具库。在 它的基础上,封装了一系列有用的模块和模板,补充强化了 Sass 的功 能。

Less 有 UI 组件库 Bootstrap, Bootstrap 是 web 前端开发中一个比较有名的前端 UI 组件库, Bootstrap 的样式文件部分源码就是采用 Less 语法编写,不过 Bootstrap4 也开始用 Sass 编写了。

总结

sass/scss或是less,都可以看作为一种基于css之上的高级语言,其目的是使得css开发更灵活和更强大,sass的功能比less强大,基本可以说是一种真正的编程语言了,less则相对清晰明了,易于上手,对编译环境要求比较宽松,在实际开发中更倾向于选择less。但如果认真深入scss之后还是建议切换到scss,因为更加强大,更好用。

26. css 与 js 动画差异:

css 性能好 css 代码逻辑相对简单

js 动画控制好 js 兼容性好 js 可实现的动画多 js 可以添加事件

JS动画(逐帧动画)

首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以其可操作性很高,几乎可以完成任何想要的动画形式。但是由于逐帧动画的帧序列内容不一样,会增加制作负担,且资源占有比较大。

但它的优势也很明显:因为它相似与电影播放模式,很适合于表演很细腻的动画,如3D效果、人物或动物急剧转身等等效果。正是由于js对动画的操作复杂度比较高,能对动画有一个比较好的控制,如开始、暂定、回放、终止、取帧等,可以很精确的做到。因此可以js可以通过操作DOM和BOM来做一些酷炫的动态效果,以及爆炸特效,且兼容性比较好。

但是,如果帧率过低的话,会导致帧与帧之间的过渡很可能会不自然、不连贯。

缺点:

js是单线程的脚本语言,当js在浏览器主线程运行时,主线程还有其他需要运行的js脚本、样式、计算、布局、交互等一系列任务,对其干扰线程可能出现阻塞,造成丢帧的情况。
其次,js在做动画的时候,其复杂度是高于css3的,需要考虑一些计算,操作等方便问题。

优点:

JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。
动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有JavaScript动画才能完成
CSS3有兼容性问题,而JS大多时候没有兼容性问题

css3(补间动画)

css3动画的制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可,两个关键帧之间帧的内容由Composite线程自动生成,不需要人为处理。当然也可以多次添加关键帧的位置。

因为只设置几个关键帧的位置,所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画,或者在动画过程中不能对其进行一些操作等。

css3在实现一些简单的滑动,翻转等特效的时候会很方便,但是想要做到一些酷炫的效果的时候,其操作往往可能会比js操作有更多的冗余。

css3在做动画的时候,浏览器可以对其进行一些优化,会比js使用更少的占用cpu资源,但是效果足够流畅。

缺点:

运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点,不能在半路反转动画,不能变换时间尺度,不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
代码冗长。如果想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

优点:

浏览器可以对动画进行优化。
代码相对简单,性能调优方向固定
对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码

总结

如果动画只是一些简单的状态切换,滑动等效果,不需要中间的控制过程,css3是比较好的选择,它直接在css文件中就可以实现,并不需要引入太多的js库。

而想做一些复杂的客户端界面,开发一个复杂ui的app,实现一个复杂纹理动画等,需要对页面进行精准的控制计算,应该使用js动画,这样动画可以保持高效,并且工作流也更可控。

因此,在实现一些小的交互动效的时候,就多考虑考虑CSS动画。对于一些复杂控制的动画,使用javascript比较可靠。

27.CSS 预处理器(Sass/Less/Postcss):

CSS 预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。

在这层编译之上,便可以赋予 CSS 更多更强大的功能,常用功能:

  • 嵌套

  • 变量

  • 循环语句

  • 条件语句

  • 自动前缀

  • 单位转换

  • mixin 复用

28.CSS 动画:

过渡 (transition)的作用
1.通过过渡可以指定一个属性发生变化时的切换方式
2.通过过渡可以创建一些非常好的效果,提升用户的体验
常用属性
1.transition-property:指定要执行过渡的属性
多个属性间使用,隔开( transition-property: width,height;)
如果所有属性都需要过渡,则使用all关键字
大部分属性都支持过渡效果,注意过渡时必须是有效数值向另外一个有效数值进行过渡,比如auto向0过渡就不是一个有效值
2.transition-duration:指定过渡效果的持续时间
时间单位:s 和 ms 1s=1000ms
可以分别指定时间(transition-duration: 100ms,2s;)
3.transition-timing-function:过渡的时序函数
指定过渡的执行的方式
可选值:
ease 默认值 ,慢速开始,先加速,再减速
4. transition-delay:过渡效果的延迟,等待一段时间后在执行过渡
5.transition:可以同时设置过度相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟。
动画
    动画的简介
    1.动画和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果
    2.设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤
 设置关键帧
/*@keyframes后跟的是关键帧的名字(可以随便起)*/
  @keyframes text {
            /*from表示动画的开始位置 也可以使用0%*/
            from{
                margin-left: 0;
            }
            /*to动画的结束位置 也可以使用100%*/
            to{
                margin-left: 700px;
            }
        }
动画常用属性
1.animation-name:指定要对当前元素生效的关键帧的名字
2.animation-duration:指定动画的执行时间
3.animation-timing-function:跟transition-timing-function用法一样
4. animation-iteration-count:指定动画执行的次数 animation-iteration-count:infinite;(无限执行)
5.animation-direction:指定动画运行的方向
normal 默认值 从from向to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to 运行 重复执行动画时反向执行
alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行
6. animation-play-state:设置动画的执行状态
可选值:
running 默认值 动画执行
paused 动画暂停
7.animation-fill-mode:指定动画的填充模式
可选值:
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时,元素就会处于开始位置
both 结合了 forwards 和 backwards
8.animation-delay:设置动画的延时
8.transition:可以同时设置动画相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟。
变形

    变形(transform)的简介

    1.变形就是指通过css来改变元素的形状或位置
    2.变形不会影响到页面的布局(不会脱离文档流)
    3.平移元素,百分比是相对于自身计算的
    常用属性(transform)

    1.transform: translateX():沿着x轴平移;
    2.transform: translateY():沿着Y轴平移;
    3.transform: translateX():沿着Z轴平移;
    1.Z轴平移,调整元素在Z轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近
    2.Z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果必须要设置网页的视距

旋转
    旋转(transform)的简介
    1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度
    (transform)常用属性
1.rotateX()沿着x轴旋转;
2.rotateY()沿着Y轴旋转;
3.rotateZ()沿着Z轴旋转; 

缩放
    (transform)常用属性
    transform-origin: 0 0;设置变形的原点 默认值(center)
1.scaleX(2)沿着X轴放大两倍;
2.scaleX(.2)沿着X轴缩小两倍;
3.scaleY(2)沿着Y轴放大两倍;
4.	scaleY(.2)沿着Y轴缩小两倍;
	scale(2)沿着Y轴和X轴放大两倍;
	scale(.2)沿着Y轴和X轴缩小两倍;

29.层叠上下文:

一、什么是层叠式上下文

层叠上下文即元素的z轴,层级越高越接近阅读者

层叠上下文,是HTML中的一个三维概念

如果元素具备以下任何一个条件,则该元素会创建一个新的层叠上下文。

  • 根元素(元素)
  • z-index不为auto的定位元素

什么是层叠水平?

决定同一层叠上下文中元素在z轴的显示顺序。

普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。

需要注意的是,诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。
什么是层叠顺序?

表示元素发生层叠时有着特定的垂直显示顺序,,

注意,这里跟上面两个不一样,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则。

二、什么是层叠级别

同一个层叠上下文的背景色以及内部元素,谁在上谁在下,这些都是由层叠级别来决定的。层叠级别是针对同一个层叠上下文而言的。

在同一个曾得上下文中,层叠级别从低到高排列如下:

  • 边框和背景:也就是当前层叠上下文的边框和背景
  • 负z-index:z-index为负值的“内部元素”
  • 块元素:普通文档流下的块盒子(block-levelbox)
  • 浮动盒子:非定位的浮动元素
  • 行内盒子:普通文档流下的行内盒子
  • z-index:0:z-index为0的“内部元素”
  • 正z-index:x-index为正值的“内部元素”

三、层叠上下文的特点

在同一层叠上下文中,我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上,层叠级别小的元素显示在下
在同一层叠上下文中,如果两个元素的层叠级别相同,则后面的元素在前面的元素的上面,遵循后来者居上的原则
在不同的层叠上下文中,我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定显示的先后顺序,与自身的层叠级别无关

  • 层叠上下文的层叠水平要比普通元素高。
  • 层叠上下文可以阻断元素的混合模式。
  • 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
  • 每个层叠上下文和兄弟元素独立,也就是说,当进行层叠变化或渲染的时候,只需要考虑后代元素。
  • 每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。

30.媒体查询:

定义两套 css,当浏览器的尺寸变化时会采用不同的属性

基本定义

1.使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

//语法

mediatype:媒体类型,包含(all,print,screen,speech)
1.all–所有设备
2.print–打印机和打印预览
3.screen–电脑屏幕,平板电脑,智能手机等
4.屏幕阅读器等发声设备
广泛使用的是all和screen

    
media feature:媒体功能,如:width:屏幕可见宽度;max-height:页面最大可见区域高度等
详见 css媒体查询–媒体功能


and | not | only :逻辑操作符,可以用来构建复杂的媒体查询
1.all–用来把多个媒体属性组合起来,合并到同一条媒体查询中。只有当每个属性都为真时,这条查询的结果才为真。在不使用not或only操作符的情况下,媒体类型是可选的,默认为all。
2.not–用来对一条媒体查询的结果进行取反
3.only–表示仅在媒体查询匹配成功时应用指定样式

	//使用and逻辑操作符。横屏和最小宽度为700px时生效。
    

	 //使用not逻辑操作符,只有在大于300px时生效
    
     
     //使用only逻辑操作符,只有在小于等于300px时生效
    

2.@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。


通过获取页面宽度,从而改变页面样式及布局,来达到响应式效果。

3.重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。使用方法

1.引入cs文件

//通过mdeia指定媒体类型来实现区别引入css文件
"stylesheet" href="./css/index.css" media="screen">

//通过mdeia指定媒体类型及条件来区别引入css文件
"stylesheet" href="./css/index.css" media="screen and (min-width:300px)">

2.style内联样式media指定媒体类型

//通过mdeia指定媒体类型来实现区别当前style是否生效


//通过mdeia指定媒体类型及条件来实现区别当前style是否生效
    

3.style内通过@media实现

    //指定媒体类型下的{}内样式生效
    
    
	//只在IE8下生效
	
此方法多用于浏览器兼容时使用

31. flexbox(弹性盒布局模型)

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。

使用场景:弹性布局适合于移动前端开发,在 Android 和 ios 上也完美支持。

32.一个满屏品字布局如何设计?

第一种真正的品字:

\1. 三块高宽是确定的;

\2. 上面那块用 margin: 0 auto;居中;

\3. 下面两块用 float 或者 inline-block 不换行;

\4. 用 margin 调整位置使他们居中。

第二种全屏的品字布局: 上面的 div 设置成 100%,下面的 div 分别宽 50%,然后使用 float 或者 inline 使其不换行。

33.absolute 的 containing block 计算方式跟正常流有什么 不同?

无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:

\1. 若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第一个和最后 一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形;

\2. 否则,则由这个祖先元素的 padding box 构成。如果都找不到,则为 initial containing block。

补充:

\1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉 padding 的部分)

\2. absolute: 向上找最近的定位为 absolute/relative 的元素

\3. fixed: 它的 containing block 一律为根元素(html/body)

34.解释 css sprites ,如何使用?

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS 的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position 可以用数字能精确的定位出背景图片的位置。

CSS Sprites 为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要加载更多的图片.

在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,所以,访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。

所以,CSS Sprites技术加速的关键,并不是降低质量,而是减少个数,当然随之而来的增加内存消耗,CSS Sprites图片繁琐的合成等缺点在网站性能的提升前,也就不足为道了。

35.CSS 属性 overflow 属性定义溢出元素内容区的内容会如何处理?

在CSS中,如果给一个盒子设置了固定的宽度与高度,但内容过多就会溢出盒子本身的宽度或高度。此时,就可以使用 overflow 属性来控制内容溢出时的处理方式。

参数是 scroll 时候,必会出现滚动条。元素的内容会在元素框的边界处剪裁,但浏览器会显示滚动条以便查看其余的内容

参数是 auto 时候,子元素内容大于父元素时出现滚动条。如果内容被剪裁,则浏览器会显示滚动条以便查看其余的内容

参数是 visible 时候,溢出的内容,出现在父元素之外。 不剪切形式也不添加转动条,也就是元素的内容在元素框之外也可见

参数是 hidden 时候,溢出隐藏。元素的内容会在元素框的边界处剪裁,并且超出元素框之外的内容不可见

overflow 属性的延伸:overflow-X | overflow-y

属性 含义
overflow-x 主要用来定义对水平方向内容溢出的剪切
overflow-y 主要用来定义对垂直方向内容溢出的剪切

36.style 标签写在 body 后与 body 前有什么区别

页面加载自上而下 当然是先加载样式。 写在 body 标签后由于浏览器以逐行方式对 HTML文档进行解析,当解析到写在尾部的样式表(外联或写在 style 标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在 windows 的 IE 下可能会出现 FOUC 现象(即样式失效导致的页面闪烁问题)

渲染机制的区别,在body前是已经把样式浏览一遍,到了对应标签直接,渲染样式。显示块。
在body后,是浏览器已经把标签浏览了,但基于没有样式,显示的不完全,再把body后的样式表,扫描后,在成为真正的样式。会慢,遇到大型网站,效果更差,这都基于浏览器从上而小的浏览机制导致的。

37.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp

png 是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点 是:压缩比高,色彩好。 大多数地方都可以用。

jpg 是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在 www 上,被用来储存和传输照片的格式。

gif 是一种位图文件格式,以 8 位色重现真色彩的图像。可以实现动画效果.

webp 格式是谷歌在 2010 年推出的图片格式,压缩率只有 jpg 的 2/3,大小比 png 小了 45%。 缺点是压缩的时间更久了,兼容性不好,目前谷歌和 opera 支持

JPEG

JPEG是有损的、采用直接色的、位图。JPEG也是一种针对照片影像而广泛使用的有损压缩标准方法。JPEG图片格式的设计目标,是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息,也即是进行了有损压缩。JPEG的图片的优点,是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来存储照片,用来表达更生动的图像效果,比如颜色渐变。

特性:适用于存储色彩丰富、层次分明的图片,不适合于线条绘图(drawing)和其他文字或图标(iconic)的图形,因为它的压缩方法用在这些类型的图形上,得到的结果并不好(PNG和GIF通常是用来存储这类的图形)

PNG

便携式网络图形是一种无损压缩的位图图形格式,支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性

特性:如果保存文本,线条或类似的边缘清晰,有大块相同颜色区域的图像,PNG格式的压缩效果就要比JPEG好很多,并且不会出现JPEG那样的高对比度区域的图像有损。如果图像既有清晰边缘,又有照片图像的特点,就需要在这两种格式之间权衡一下了。JPEG不支持透明度。
PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同 的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位 PNG 在24位基础上增加了8位透明通道(32-24===8),因此可展现256级透明程度。

GIF

GIF是一种无损、使用于索引色的、位图。由于采用了无损压缩,相比古老的bmp格式,尺寸较小,而且支持透明和动画。缺点是由于gif只存储8位索引(也就是最多能表达2^8=256种颜色),色彩复杂、细节丰富的图片不适合保存为gif格式。色彩简单的logo、icon、线框图适合采用gif格式。

静态GIF完全可用PNG8取代

WEBP

WebP图片是一种同时提供了有损压缩与无损压缩、使用直接色的、位图,由Google开发。与png、jpg相比,相同的视觉体验下,WebP图像的尺寸缩小了大约30%。另外,WebP图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代png、jpg、gif等图片格式,当然目前webp的还没有得到全面的支持。

38.display:inline-block 什么时候会显示间隙?

在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block,但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙,这就是“换行符/空格间隙问题”。

有空格时候会有间隙 解决:移除空格

margin 正值的时候 解决:margin 使用负值

使用 font-size 时候 解决:font-size:0、

letter-spacing(字符间距)、

word-spacing (单词间距)

39. li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

浏览器的默认行为是把inline元素间的空白字符(空格换行tab)渲染成一个空格,也就是我们上面的代码换行后会产生换行字符,而它会变成一个空格,当然空格就占用一个字符的宽度。

方法一:既然是因为
  • 换行导致的,那就可以将
  • 代码全部写在一排, 方法二:我们为了代码美观以及方便修改,很多时候我们不可能将
  • 全部写在一排,那怎么办?既然是空格占一个字符的宽度,那我们索性就将
      内的字符尺寸直接设为0,将下面样式放入样式表,问题解决。但随着而来的就是
        中的其他文字就不见了,因为其尺寸被设为0px了,我们只好将他们重新设定字符尺寸。 .wrap ul{font-size:0px;} 方法三: 本来以为方法二能够完全解决问题,但经测试,将li父级标签字符设置为0在Safari浏览器依然出现间隔空白;既然设置字符大小为0不行,那咱就将间隔消除了,将下面代码替换方法二的代码,目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了,我们需要将li内的字符间隔设为默认。 .wrap ul{letter-spacing: -5px;} 之后记得设置li内字符间隔 .wrap ul li{letter-spacing: normal;}
  • 40.如果需要手动写动画,你认为最小时间间隔是多久,为什么?

    多数显示器默认频率是 60Hz,即 1 秒刷新 60 次,所以理论上最小间隔为 1/60*1000ms = 16.7ms。

    一般浏览器的刷新频率为每秒60次,所以最小事件间隔为 1/60*1000ms 约 16.7ms

    41.让页面里的字体变清晰,变细用 CSS 怎么做?

    -webkit-font-smoothing 在 window 系 统 下 没 有 起 作 用 , 但 是 在 IOS 设 备 上 起 作 用 
    -webkit-font-smoothing:antialiased 是最佳的,灰度平滑。
    全家桶:
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    text-shadow: 1px 1px 1px 1px rgba(0,0,0,0.005)
    text-rendering: optimizeLegibility
    

    42.你对 line-height 是如何理解的?

    行高是指一行文字的高度,具体说是两行文字间基线的距离。行高是指文本行基线间的垂直距离。 基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。上行的底线和下一行顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size的大小,行距的一半是半行距。

    当font-size等于line-height时,行距 = line-height - font-size = 0;而当font-size大于line-height时,则会出现行距为负值,则两行重叠。

    CSS 中起高度作用的是 height 和 line-height,没有定义 height 属性,最终其表现作用一定是 line-height。height是用来设置元素的高度,比如img的高度、div的高度等。在没有设置div的height属性时,div的高度根据line-height的大小而变化,且文字垂直居中。

    单行文本垂直居中:把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中,其实也可以把 height 删除。 多行文本垂直居中:需要设置 display 属性为 inline-block。

    43.::before 和 :after 中双冒号和单冒号有什么区别?解释 一下这 2 个伪元素的作用

    单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。

    ::before 就是以一个子元素的存在,定义在元素主体内容之前的一个伪元素。并不存在于 dom 之中,只存在在页面之中。

    :before 和 :after 这两个伪元素,是在 CSS2.1 里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着 Web 的进化,在 CSS3 的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after

    ::before选择器在被选元素的内容前面插入内容

    ::after选择器在被选元素的内容后面插入内容。

    44.视差滚动效果?

    视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的 3D 效果。

    CSS3 实现 优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器

    jQuery 实现 通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。 优点:能兼容到各个版本的,效果可控性好 缺点:开发起来对制作者要求高

    插件实现方式 例如:parallax-scrolling,兼容性十分好

    45.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?

    页面的设计和开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

    具体的实践方式由多方面组成,包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。

    响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。

    基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

    页面头部必须有meta 声明的viewport。

    , initial-scale=1. maximum-scale=1,user-scalable=no”>
    

    46.全屏滚动的原理是什么?用到了 CSS 的哪些属性?

    原理:有点类似于轮播,整体的元素一直排列下去,假设有 5 个需要展示的全屏页面,那么高度是 500%,只是展示 100%,剩下的可以通过 transform 进行 y 轴定位,也可以通过 margin-top 实现

    overflow:hidden;

    transition:all 1000ms ease;

    全屏滚动和轮播图类似,都是通过改变元素位置或者显示与隐藏来实现,配合JS的一些交互距离判断,实现类似原生滚动捕获的效果。这里全屏的话就需要将宽高都设置为窗口的大小,可以通过百分百实现。
    关键CSS属性是父容器 overflow: hidden; 。
    实现全屏滚动还可以简单的通过插件来实现,比如fullpage,很多大公司的页面都是用这个实现的,比如小米一些产品的官网。

    47.元素竖向的百分比设定是相对于容器的高度吗?

    当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。 如果是height的话,是相对于容器高度

    相对于父元素宽度的:
    [max/min-]width、left、right、padding、margin 等;
    相对于父元素高度的:
    [max/min-]height、top、bottom 等;
    相对于继承字号的:
    font-size 等;
    相对于自身字号的:
    line-height 等;
    相对于自身宽高的:
    border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等;
    特殊算法的:
    background-position(方向长度 / 该方向除背景图之外部分总长度 * 100)、
    filter 系列函数等; 
    

    48.margin 和 padding 分别适合什么场景使用?

    margin是盒子的外边距,即盒子与盒子之间的距离,而padding是内边距,是盒子的边与盒子内部元素的距离。

    何时使用 margin:

    • 需要在 border 外侧添加空白

    • 空白处不需要背景色时

    • 上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白 。

    何时使用 padding:

    • 需要在 border 内侧添加空白

    • 空白处需要背景颜色时

    • 上下相连的两个盒子的空白,希望为两者之和。如15px + 20px的padding,将得到35px的空白。

    兼容性的问题:在 IE5 IE6 中,为 float 的盒子指定 margin 时,左侧的 margin 可能会变成两倍的宽度。通过改变 padding 或者指定盒子的 display:inline 解决。

    49.在网页中的应该使用奇数还是偶数的字体?为什么呢?

    使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。

    为何偶数居多?

    1.比例关系

    相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。如我使用14px的字体作为正文字号,那么其他部分的字体(如标题)就可以使用14×1.5 =21px的字体,或者在一些地方使用到了14×0.5=7px的padding或者margin,如果你是在用sass或者less编写css,这时候用处就凸显出来了。

    2.UI设计师的缘故

    大多数设计师用的软件如ps提供的字号是偶数,自然到了 前端那边也是用的是偶数。

    3.浏览器缘故

    其一是低版本的浏览器ie6会把奇数字体强制转化为偶数,即13px渲染为14px。

    其二是为了平分字体。偶数宽的汉字,如12px的汉子,去掉1像素的字体间距,填充了的字体像素宽度其实就是11px,这样的汉字中竖线左右是平分的,如“中”子,左右就是5px了。

    4.系统差别

    Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px 时用的是小一号的点阵(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。

    而在Linux和其他手持设备上,奇数偶数的渲染效果其实相差不大。

    50.浏览器是怎样解析 CSS 选择器的?

    CSS 选择器的解析是从右向左解析的。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。

    若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根 元素或满足条件的 匹配规则,则结束这个分支的遍历。

    两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。

    而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。

    在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中 的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。

    51.设置元素浮动后,该元素的 display 值是多少?

    1.为什么关注此问题?

    行内元素设置为浮动后,可以设置宽高了,为什么?

    我们知道Html元素分三种

    块级元素(display:block)–> 可以设置元素的宽高

    行内元素(display:inline)–> 默认不换行,设置width/height无效(可以设置line-height),margin/padding上下无效

    行内块级元素(display:inline-block )–> 可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性

    设置元素为浮动后,display的值是block

    2.有什么意义?

    以后在项目中如果需要设置行内元素的宽高,则设置为浮动后,就可以设置了

    52.position 跟 display、overflow、float这些特性相互叠加后会怎么样?

    display 属性规定元素应该生成的框的类型。 block 象块类型元素一样显示,none 缺省值。象行内元素类型一样显示, inline-block 象行内元素一样显示,但其内容象块类型元素一样显示,list-item 象块类型元素一样显示,并添加样式列表标记(display 还有很多其他值设置,读者自行查找)。

    position 属性规定元素的定位类型。 absolute表示生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位;fixed(老IE不支持)生成绝对定位的元素,相对于浏览器窗口进行定位;relative生成相对定位的元素,相对于其正常位置进行定位;static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。

    Float也是是一种布局方式,它定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 在布局过程中也经常会使用它来达到左右并排布局的效果。

    类似于优先级机制:position:absolute/fixed 优先级最高,有他们在时,float 不起作用,display 值需要调整。float 或者 absolute 定位的元素,只能是块元素或表格。

    1. ‘display’ 的值为 ‘none’

    如果 ‘display’ 的值为 ‘none’,那么 ‘position’ 和 ‘float’ 不起作用。在这种情况下,元素不产生框。因此浮动和定位无效。

    1. ‘position’ 的值是 ‘absolute’ 或 ‘fixed’

    否则,如果 ‘position’ 的值是 ‘absolute’ 或 ‘fixed’,框就是绝对定位的,‘float’ 计算后的值应该是 ‘none’,并且,‘display’ 会被按照上表设置。 框的位置将由 ‘top’,‘right’,‘bottom’ 和 ‘left’ 属性和该框的包含块确定。

    也就是说,当元素是绝对定位时,浮动失效,‘display’ 会被按规则重置。

    1. ‘float’ 的值不是 “none”

    如果 ‘float’ 的值不是 “none”,该框浮动并且 ‘display’ 会被按照转换对应表设置。

    1. 元素是根元素

    如果元素是根元素,‘display’ 的值按照转换对应表设置。

    1. 否则,应用指定的 ‘display’ 特性值。

    53.CSS 里的 visibility 属性有个 collapse 属性值?在不同 浏览器下以后什么区别?

    当一个元素的 visibility 属性被设置成 collapse 值后,

    • 对于一般的元素,它的表现跟display:hidden是一样的。
    • 但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟display: none一样,也就是说,它们占用的空间也会释放。

    在不同浏览器下的区别:

    chrome 中,使用 collapse 值和使用 hidden 没有区别。

    firefox,opera 和 IE,使用 collapse 值和使用 display:none 没有什么区别。就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。

    54.常见的兼容性问题?

    不同浏览器的标签默认的 margin 和 padding 不一样。 
    *{margin:0;padding:0;} 
    
    IE6 双边距 bug:块属性标签 float 后,又有横行的 margin 情况下,在 IE6 显示 margin 比设置的大。hack:display:inline;将其转化为行内属性。 
    
    渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将 IE 浏览器从所有情况中分离出来。接着,再次使用“+”将 IE8 和 IE7、IE6 分离开来,这样 IE8 已经独立识别。 
    
    {background-color:#f1ee18; 
    /*所有识别*/ 
    .background-color:#00deff\9; /*IE6、7、8 识别*/ +background-color:#a200ff; /*IE6、7 识别*/ 
    _background-color:#1e0bd1; /*IE6 识别*/} 
    12345678 
    
    设置较小高度标签(一般小于 10px),在 IE6,IE7 中高度超出自己设置高度。hack:给超出高度的标签设置 overflow:hidden;或者设置行高 line-height 小于你设置的高度。 
    
    IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性;Firefox 下, 只能使用 getAttribute()获取自定义属性。解决方法:统一通过 getAttribute()获取自定义属性。 
    
    Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size- adjust: none; 解决。 
    
    超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不再具有 hover 和 active 了。
    解决方法是改变 CSS 属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} 
    a:active {} 
    

    55.一个页面从输入 URL 到页面加载显示完成,这个过程都发生了什么:

    当发送一个 URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个DNS域名解析 查询。这能使浏览器获得请求对应的 IP 地址。

    浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。

    一旦 TCP/IP 连接建立,浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。

    此时,Web 服务器提供资源服务,客户端开始下载资源。请求返回后,便进入了我们关注的前端模块 简单来说,浏览器会解析 HTML 生成 DOM Tree,其次会根据 CSS 生成 CSS Rule Tree,而 javascript 又可以根据 DOM API 操作 DOM js引擎解析js,将解析后DOM树和CSS规则树关联起来构建Renden渲染树树,然后计算布局,绘制页面。

    渲染完毕,四次挥手,关闭tcp连接

    56.哪些地方会出现 CSS 堵塞,哪些地方会出现 JS 堵塞:

    js 的阻塞特性:所有浏览器在下载 JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续 并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载 JS,但是 JS 下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。

    由于浏览器为了防止出现 JS 修改 DOM 树,需要重新构建 DOM 树的情况,所以就会阻塞其他的下载和呈现。

    嵌入 JS 会阻塞所有内容的呈现,而外部 JS 只会阻塞其后内容的显示,2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

    CSS 怎么会阻塞加载了?CSS 本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6 下 CSS 都是阻塞加载)

    当 CSS 后面跟着嵌入的 JS 的时候,该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面,就不会出现阻塞的情况了。

    根本原因:因为浏览器会维持 html 中 css 和 js 的顺序,样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载,所以就会出现上面 CSS 阻塞下载的情况。

    嵌入JS应该放在什么位置?

    1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。

    2、如果嵌入 JS 放在 head 中,请把嵌入 JS 放在 CSS 头部。

    3、使用 defer(只支持 IE)

    4、不要在嵌入的 JS 中调用运行时间较长的函数,如果一定要用,可以用setTimeout 来调用

    Javascript无阻塞加载具体方式:

    1. 将脚本放在底部。还是放在head中,用以保证在js加载前,能加载出正常显示的页面。

    代码如下:

    <script>
        var script=document.createElement("script");
        script.type="text/javascript";
        script.src="file.js";
        document.getElementsByTagName("head")[0].appendChild(script);
    </script>
    

    你可能感兴趣的:(前端,html,css,前端,html5,学习)