前端面试知识(CSS篇)

原创 青春正当时 随笔 面试知识 355阅读 2018-09-26 17:39:09 举报

介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

(1)有两种, IE 盒子模型、W3C 盒子模型;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);
(3)区 别: IE的content部分把 border 和 padding计算了进去;

在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式.
共包括两个选项:
content-box:标准盒模型,CSS定义的宽高只包含content的宽高
border-box:IE盒模型,CSS定义的宽高包括了content,padding和border

什么是盒子模型?

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

简述一下src与href的区别

href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

几种获得宽高的方式

dom.style.width/height   这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话,通过这种方法是获取不到dom的宽高的。
dom.currentStyle.width/height   这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到。但这种方式只有IE浏览器支持。
window.getComputedStyle(dom).width/height   这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些。
dom.getBoundingClientRect().width/height   这种方式是根据元素在视窗中的绝对位置来获取宽高的
dom.offsetWidth/offsetHeight   这个就没什么好说的了,最常用的,也是兼容最好的。

拓展 各种获得宽高的方式

获取屏幕的高度和宽度(屏幕分辨率): window.screen.height/width
获取屏幕工作区域的高度和宽度(去掉状态栏): window.screen.availHeight/availWidth
网页全文的高度和宽度: document.body.scrollHeight/Width
滚动条卷上去的高度和向右卷的宽度: document.body.scrollTop/scrollLeft
网页可见区域的高度和宽度(不加边线): document.body.clientHeight/clientWidth
网页可见区域的高度和宽度(加边线): document.body.offsetHeight/offsetWidth

CSS选择符有哪些?哪些属性可以继承?

1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a:hover, li:nth-child)
可继承的样式: font-size font-family color, UL LI DL DD DT;
不可继承的样式:border padding margin width height ;

CSS优先级算法如何计算?

优先级就近原则,同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
同权重: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
!important > id > class > tag
important 比 内联优先级高

CSS3新增伪类有那些?

display有哪些值?说明他们的作用。

block 块类型。默认宽度为父元素宽度,可设置宽高,换行显示。
none 元素不显示,并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。

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

absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。

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

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

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

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

CSS3有哪些新特性?

新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)
圆角 (border-radius:8px)
多列布局 (multi-column layout)
阴影和反射 (ShadowReflect)
文字渲染 (Text-decoration)
线性渐变 (gradient)
旋转 (transform)
缩放,定位,倾斜,动画,多背景
例如:transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation;

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap(对长的不可分割单词换行)word-wrap:break-word
文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
font-face属性:定义自己的字体
圆角(边框半径):border-radius 属性用于创建圆角
边框图片:border-image: url(border.png) 30 30 round
盒阴影:box-shadow: 10px 10px 5px #888888
媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?

一个用于页面布局的全新CSS3功能,Flexbox可以把列表放在同一个方向(从上到下排列,从左到右),并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器(flex container)来实现。
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。
它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
常规布局是基于块和内联流方向,而Flex布局是基于flex-flow流可以很方便的用来做局中,能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间。

具体请参考:flex布局

用纯CSS创建一个三角形的原理是什么?

把上、左、右三条边隐藏掉(颜色设为 transparent)

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

第一种真正的品字:
三块高宽是确定的;
上面那块用margin: 0 auto;居中;
下面两块用float或者inline-block不换行;
用margin调整位置使他们居中。

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

css多列等高如何实现?

利用padding-bottom|margin-bottom正负值相抵;
设置父容器设置超出隐藏(overflow:hidden),这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,
当它里面的任 一列高度增加了,则父容器的高度被撑到里面最高那列的高度,
其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?

  • png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.
  • 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
  • IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。
    • 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
    • 这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 _display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式,从总体中逐渐排除局部。

  • 首先,巧妙的使用“9”这一标记,将IE游览器从所有情况中分离出来。
  • 接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
  • IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。
    解决方法:统一通过getAttribute()获取自定义属性。
  • IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
    解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
    可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
  • 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。 IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:

简述同步和异步的区别

同步是阻塞模式,异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去; 异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

px和em的区别

px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

什么叫优雅降级和渐进增强?

渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation: 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别: a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要 c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

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

行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。

CSS实现垂直水平居中

水平方向上

(1)针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素 text-align:center;
(2)不定宽块状元素居中
margin:0 auto;
(3)通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

垂直居中

(1)单行内联(inline-)元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。
(2)利用表布局

(3)flex布局

(4)绝对布局方式
已知高度

未知高度

垂直水平居中

(1)flex方式

(2)grid方式

常见的布局方式

常见的布局: 单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽中间自适应三列布局。

一列定宽一列自适应

(1)定位布局
左边的宽度写死,右边盒子使用定位拉伸法实现,left等于左边盒子的宽度,right等于0

或者左边的定位写死宽度,右边的写padding-left等于左边的宽度(常用一点)

(2)浮动布局
左边的宽度写死并且浮动,右边盒子写overflow:hidden;利用的是创建一个新的BFC(块级格式化上下文)来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响

两列定宽一列自适应上面的布局方式同样适用

常见的三列布局一般使用圣杯布局和双飞翼布局。

圣杯布局和双飞翼布局
两者都属于三列布局,是一种很常见的页面布局方式,
三列一般分别是子列、主列和附加列,其中子列一般是居左的导航,且宽度固定;主列是居中的主要内容,宽度自适应;附加列一般是广告等额外信息,居右且宽度固定。
(1)圣杯布局

(2)双飞翼布局

两种布局方式都是把主列放在文档流最前面,使主列优先加载。
两种布局方式在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置:圣杯布局是利用父容器的左、右内边距定位;双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位。

其他

(1)flex布局
Flexbox又叫弹性盒模型。它可以简单使用一个元素居中(包括水平垂直居中),可以让扩大和收缩元素来填充容器的可利用空间,可以改变源码顺序独立布局,以及还有其他的一些功能。
Flex布局是我最喜欢的布局,合理使用它能够大大减少布局方面的工作, 例如以上列举的三列布局也可以使用flex轻松实现。此外在移动端使用flex也比较常见。
(2)响应式布局
网页可以自动识别设备屏幕宽度,根据不同的宽度采用不同的CSS的样式,从而达到兼容各种设备的效果。
响应式布局使用媒体查询(CSS3 Media Queries), 根据不同屏幕分辨率采用不同CSS规则
(3)流式布局
流式布常见的就是bootstrap了它提供了一套响应式,移动优先的流式栅格系统(grid system),将屏幕分成12列来实现响应式的。它的实现原理非常简单,Media Query加上float布局

说一下居中

水平垂直居中问题,在css中margin: 0 auto;可以实现水平居中,但是在垂直居中方面一直没有特定的属性,直到css3的出现,有了弹性盒,可以通过设置弹性盒直接设置居中位置,做浏览器兼容的话可以通过使用一些hack处理 负margin方法, table-cell方法,位移方法

(1)负margin方法
我们首先用top:50%和left:50%让inner的坐标原点(左上角)移动到container的中心,然后再利用负margin让它往左偏移自身宽的一半,再往上偏移自身高的一半,这样inner的中心点就跟container的中心点对齐了。

(2)table-cell方法
通过将盒子转换为table元素,table元素本身是可以通过属性来控制位置,div上面的vertical-align: middle是控制垂直方向上的居中的,而text-align: center是控制水平方向的

(3)弹性盒子法
align-items控制垂直方向的居中,justify-content控制水平方向的居中。这是CSS3的新方法

(4)位移方法
位移方法和margin定位方法一样,只不过吧margin改成了位移不需要计算一半是多少,直接 transform:translate(-50%,--50%)

为什么要初始化CSS样式

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

css reset 和 normalize.css 有什么区别

两者都是通过重置样式,保持浏览器样式的一致性
前者几乎为所有标签添加了样式,后者保持了许多浏览器样式,保持尽可能的一致
后者修复了常见的桌面端和移动端浏览器的bug:包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
前者中含有大段的继承链
后者模块化,文档较前者来说丰富

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),根元素也是initial containing block

display:none和visibility:hidden的区别?

display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。

visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。

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

对于普通元素visibility:collapse;会将元素完全隐藏,不占据页面布局空间,与display:none;表现相同.
如果目标元素为table,visibility:collapse;将table隐藏,但是会占据页面布局空间.
仅在Firefox下起作用,IE会显示元素,Chrome会将元素隐藏,但是占据空间.

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

如果元素的display为none,那么元素不被渲染,position,float不起作用,如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用.如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.

对BFC规范(块级格式化上下文:block formatting context)的理解?

(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。

满足下列条件之一就可触发BFC

根元素,即html
float的值不为none(默认)
overflow的值不为visible(默认)
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

解释下 CSS sprites,以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是也有限制,一般浏览器都是6个。对于未来而言,就不需要这样做了,因为有了http2

什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。

请解释一下为什么需要清除浮动?清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们页面后面的布局不能正常显示。

解析原理:
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;
4)通过 content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙;
5)zoom:1 触发IE hasLayout。

通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0,line-height:0。

什么是外边距合并(margin塌陷)?

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

在重合元素外包裹一层容器,并触发该容器生成一个BFC。

w3school介绍网址:CSS 外边距合并

zoom:1的清除浮动原理?

清除浮动,触发hasLayout;
Zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。
譬如外边距(margin)的重叠,浮动清除,触发ie的haslayout属性等。

来龙去脉大概如下:
当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

Zoom属是IE浏览器的专有属性,火狐和老版本的webkit核心的浏览器都不支持这个属性。然而,zoom现在已经被逐步标准化,出现在 CSS 3.0 规范草案中。

目前非ie由于不支持这个属性,它们又是通过什么属性来实现元素的缩放呢?
可以通过css3里面的动画属性scale进行缩放。

移动端的布局用过媒体查询吗?

假设你现在正用一台显示设备来阅读这篇文章,同时你也想把它投影到屏幕上,或者打印出来,
而显示设备、屏幕投影和打印等这些媒介都有自己的特点,CSS就是为文档提供在不同媒介上展示的适配方法

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

关键选择器(key selector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分);
如果规则拥有 ID 选择器作为其关键选择器,则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了);
提取项目的通用公有样式,增强可复用性,按模块编写组件;增强项目的协同开发性、可维护性和可扩展性;
使用预处理工具或构建工具(gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级);
将样式表放到页面顶部
不使用CSS表达式
不使用@import
不使用IE的Filter

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

样式系统从关键选择器开始匹配,然后左移查找规则选择器的祖先元素。
只要选择器的子树一直在工作,样式系统就会持续左移,直到和规则匹配,或者是因为不匹配而放弃该规则。

CSS选择器的解析是从右向左解析的。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。

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

偶数居多?
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和其他手持设备上,奇数偶数的渲染效果其实相差不大。

也可以使用奇数!!!
目前来说12,13,14,15,16px都是比较常用而且不错的字号,通过审查元素可以看到知乎的正文字号和豆瓣部分栏目(豆瓣电影)也是用了13px字号,效果都很不错。使用奇数号字体不好的地方是,文本段落无法对齐。
说到这里,有人会想起11px这个字号。那么关于这个这号,在谷歌中默认最小是12px字体,如果设置11px字体会渲染为12px字号,有人说通过设置css属性-webkit-text-size-adjust: none;来解决。本人实测失败,原因如下:
1.只对chrome27.0 版本以下有效,27.0以上版本无效;
2.只对英文才有效,对中文无效。

在新版的chrome中,已经禁止了改属性,建议使用CSS3中的方法:transform:scale(0.7);当使用transform:scale(0.7)时; 不仅是文字变小了,整个文字所在的容器也同时会变小,那么这时候可能就涉及到布局问题了,需要重新调整位置。

关于浏览器的支持的最小字体:
1.iphone6-plus、iphone5:     微信、QQ直接打开、safari中字体可以从最1px字体开始;
2.小米2s:微信、QQ浏览器最小显示字体8px;自带浏览器最小字体从1px开始;
3.小米4s:firefox可以从最小字体1px开始;chrome中最小显示字体为12px;
4. pc:     360安全浏览器7:最小最示12px;firefox与ie10最小显示字体为1px。

详情可以参考:http://www.cnblogs.com/he-lian/p/4512276.html

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

margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干;
padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段

抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题]

说的抽离样式模块,应该指的是把模块中的样式单独抽离成文件。
抽离后的样式文件可使用@import '样式文件路径'引用。

但是呢,要是问的是项目中抽离样式模块的话,在webpack中可以使用:extract-text-webpack-plugin插件抽离。

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

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

相对于父元素宽度的:[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 系列函数等;

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

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

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

响应式设计就是为了实现根据不同设备环境自动响应及调整网页布局的一种设计方案
基本原理就是利用css的媒体查询功能更具不同屏幕的大小,向下兼容设备、移动优先,达到响应的效果

视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)

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

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)
双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,
比如:first-line、:first-letter、:before、:after等,
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

想让插入的内容出现在其它内容前,使用::before,否者,使用::after;
在代码顺序上,::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角,::after生成的内容会在::before生成的内容之上

如何修改chrome记住密码后自动填充表单的黄色背景 ?

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

行高line-height,两行文字基线之间的距离。
1、什么是基线?字符(x)下边缘
2、为什么是基线?基线是*线定义之根本。
3、需要两行么?不需要,两行的定义决定了一行的表现

  • line-height只影响行内元素,并不能直接应用于块级元素。
  • line-height 具有可继承性,块级元素的子元素会继承该特性,并且在行内元素上生效。

line-height与height相等,为什么会使文字居中?
原因是这样的。文本是属于textNode,它也是一个DOM元素。当外层元素设了line-height之后,它自然继承过来,就像我们上文中说过的一样,显示在中央,是因为文字自然的落在了textNode的基线上面。

CSS深入理解之line-height

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

自动变成了 display:block

怎么让Chrome支持小于12px 的文字?

1、用图片:如果是内容固定不变情况下,使用将小于12px文字内容切出做图片,这样不影响兼容也不影响美观。
2、使用12px及12px以上字体大小:为了兼容各大主流浏览器,建议设计美工图时候设置大于或等于12px的字体大小,如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。
3、继续使用小于12px字体大小样式设置:如果不考虑chrome可以不用考虑兼容,同时在设置小于12px对象设置-webkit-text-size-adjust:none,做到最大兼容考虑。
4、使用12px以上字体:为了兼容、为了代码更简单 从新考虑权重下兼容性。

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

-webkit-font-smoothing: antialiased;

font-style属性可以让它赋值为“oblique” oblique是什么意思?

倾斜的字体样式

position:fixed;在android下无效怎么处理?

fixed的元素是相对整个页面固定位置的,你在屏幕上滑动只是在移动这个所谓的viewport,
原来的网页还好好的在那,fixed的内容也没有变过位置,
所以说并不是iOS不支持fixed,只是fixed的元素不是相对手机屏幕固定的。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

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

display:inline-block 什么时候会显示间隙?(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

overflow: scroll时不能平滑滚动的问题怎么处理?

有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。

外层div使用position:relative;高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

视差滚动效果?

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

(1)CSS3实现
优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器
(2)jQuery实现
通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。
优点:能兼容到各个版本的,效果可控性好
缺点:开发起来对制作者要求高
(3)插件实现方式
例如:parallax-scrolling,兼容性十分好

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

png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是:压缩比高,色彩好。 大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果.

GIF: 8位像素,256色 无损压缩 支持简单动画 支持boolean透明 适合简单动画
JPEG:颜色限于256 有损压缩 可控制压缩质量 不支持透明 适合照片
PNG:有PNG8和truecolor PNG PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,无动画、适合图标、背景、按钮

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

什么是Cookie 隔离?(或者说:请求资源的时候不要让它带cookie怎么做)

如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量,
所以不如隔离开。

因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据,
这样可以降低请求头的大小,降低请求时间,从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server,也减少了Web Server对cookie的处理分析环节,
提高了webserver的http请求的解析速度。

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

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

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

参数是scroll时候,必会出现滚动条。
参数是auto时候,子元素内容大于父元素时出现滚动条。
参数是visible时候,溢出的内容出现在父元素之外。
参数是hidden时候,溢出隐藏。

你用过栅格系统吗?

现在大部分UI框架都内置有删格化系统,常用bootstrap中的,bootstap它提供了一套响应式,移动优先的流式栅格系统(grid system),将屏幕分成12列来实现响应式的。它的实现原理非常简单,Media Query加上float布局,也研究过bootstrap的源码,在这个过程中也对预处理器有了更深的体会,删格系统这块在bootstrap中sass源码使用的循环生成,less使用的递归生成

什么是CSS 预处理器 / 后处理器?

预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less,增强了css代码的复用性,
还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的
是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。

rem布局的优缺点

css书写规范

参考:网易前端规范

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复