CSS面试题

前端全部面试题

 https://blog.csdn.net/qq_40055200/article/details/104637574

CSS面试题 

CSS(层叠样式表)

1.介绍一下标准的css的盒子模型?与低版本的IE盒子模型有什么不同?(重要)

标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin

低版本的IE盒子模型:宽度=内容宽度(content+border+padding)+ margin

标准表型指的是设置box-sizing为content-box的盒子模型,一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子,宽高的计算是content+padding+border;

box-sizing的css属性是用来改变默认的css框模型的,用来计算元素的宽度和高度,它可以使用这个属性来模拟浏览器的行为不正确支持css模型的规范

box-sizing属性

// 正常的
content-box(默认属性)
//IE:
border-box
// 从父元素继承 box-sizing 属性的值
inherit
  • css中box-sizing属性的值content-box的含义为:定义它的宽高的时候不包括border和padding
  • css中box-sizing属性的值border-box的含义为:定义它的宽高的时候包括border和padding,内容的宽高需要减去相应方向的border和padding。注意:内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

怎么避免盒模型是低版本的IE盒模型?

答:将box-sizing属性设置为content-box

为什么box-sizing:border-box没有被广泛应用?

答:因为IE兼容性问题

举例子(理解)

box-sizing:border-box 不是本来就是设置带边框的框吗...-慕课网

什么是css盒子模式(框模型)_百度知道

2.css框模型(box modal)

规定了元素框处理元素的内容(element),内边距(padding),边框(border)和外边距(margin)

注意margin:可以是负值,但是padding不可以,如果是负值就相当于把当前属性取消了

CSS面试题_第1张图片

3.获取屏幕的高度和宽度 (屏幕分辨率): window.screen.height/width

4.css选择器有哪些?哪些属性可以继承?(重要)

CSS选择符:(只需要说前5个即可)

  • id选择器(#myid)、
  • 类选择器(.myclassname)、
  • 标签选择器(div, h1, p)、
  • 相邻选择器(h1 + p)、
  • 子选择器(ul > li)、
  • 后代选择器(li a)、
  • 通配符选择器(*)、
  • 属性选择器(a[rel=”external”])、
  • 伪类选择器(a:hover, li:nth-child)

相邻选择器:








This is a heading.

This is paragraph.

This is paragraph.

This is paragraph.

This is paragraph.

This is paragraph.

子选择器:



子选择器



我是漂亮的

后代选择器:







This is a important heading

This is a important paragraph.

属性选择器:








可以应用样式:

Hello world

W3School

无法应用样式:

Hello world

W3School

伪类选择器:链接的状态不同显示方式就不同








这是一个链接。

注释:在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!

注释:在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!

可继承的属性:

1、字体系列属性

  • font-family:字体系列
  • font-weight:字体的粗细
  • font-size:字体的大小
  • font-style:字体的风格

2、文本系列属性

  • text-indent:文本缩进
  • text-align:文本水平对齐
  • line-height:行高
  • word-spacing:单词之间的间距
  • letter-spacing:中文或者字母之间的间距
  • text-transform:控制文本大小写(就是uppercase、lowercase、capitalize这三个)
  • color:文本颜色

3.元素可见性:

  • visibility:控制元素显示隐藏

4.列表布局属性

list-style:列表风格,包括list-style-type,list-style-image等

5.光标属性:cursor:光标显示为何种状态

不可继承的样式

盒模型的属性:padding, margin, width, height,border(只需要说前4个)

  • 1.display:规定元素应该生成的框的类型

2.文本属性:

vertical-align:垂直文本对齐

text-decoration:规定添加到文本的装饰

text-shadow:文本阴影效果

white-space:空白符的处理

3.背景属性:

background,background-color,background-image,background-repeat,background-position,

background-attachment

4.定位属性

float,clear,position,top,right,bottom,left,min-width,max-width,min-height,max-height,overflow,clip,z-index

5.生成内容属性

content,counter-reset,counter-increment

6.轮廓样式属性

outline-style,outline-width,outline-color,outline

7.页面样式属性:size,page-break-before,page-break-after

8.声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

优先级(就近原则):!important >style >[ id > class > tag ]
注意:!important 比内联优先级高

!import>内联>ID选择器>类选择器=伪类选择器=属性选择器

!import的使用




    
    测试!Important



    
这一行末使用important
这一行使用了important

CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,

不同的是,第二行未使用!important,而第三行使用了!

5.CSS3新增伪类举例:(重要)

  1.   p:first-of-type 选择属于其父元素的首个

    元素的每个

    元素。

  2.   p:last-of-type 选择属于其父元素的最后

    元素的每个

    元素。

  3.   p:only-of-type 选择属于其父元素唯一的

    元素的每个

    元素。

  4.   p:only-child 选择属于其父元素的唯一子元素的每个

    元素。

  5.   p:nth-child(2) 选择属于其父元素的第二个子元素的每个

    元素。

  6.   :enabled :disabled 控制表单控件的禁用状态。
  7.   :checked 单选框或复选框被选中。

li:first-child{}
li:last-child{}
li:nth-child(){}
li:nth-last-child(){}
 
li:first-of-type{}
li:last-of-type{}
li:nth-of-type(){}
li:nth-last-of-type(){}
 
ul li:only-child{选择属于其父元素的唯一子元素的每个  元素。} 

6.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?(重要)--居中这个还得在看,不是很懂

 div:固定宽度,margin: 0 auto; 上下边距为0,左右边距为auto,就是自动适应。

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

浮动元素的上下左右居中:固定宽高,position: absolute;float: left;left: 50%;top: 50%;margin: -50px 0 0 -100px; --不用看

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px; 

绝对定位的左右居中固定宽高,position: absolute;margin: 0 auto;left: 0;right: 0;--加上absolute脱离文档流,所以只写margin:0 auto;不好用

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0; 

利用绝对定位元素的自动伸缩特性水平垂直居中 

.father{
    position: relative;
    width: 500px;
    height: 500px;
}
.son{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

利用flex布局水平垂直居中(回答这个显得更高端) 

#box{
    display: flex;
    display: -webkit-flex;
    border: 1px solid #0000FF;
    height: 200px;
    width: 400px;
    align-items:center;
    justify-content:center;
}
.item{
    width: 50px;
    height: 40px;
    border: 1px solid #00C1B3;
}
1、margin: 0 auto;
2、position: absolute;left: 50%;transform: translateX(-50%);
3、position: absolute;left: 50%;width: 200px;margin-left: -100px;
4、position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;
5、position: relative;left: 50%;width: 300px;margin-left: -150px;background-color: pink;

7. display有哪些值?说明他们的作用?(重要)

inline(默认)–此元素会被显示为内联元素,不换行



这两个段落生成内联盒子,和它的结果

这两个元素之间没有距离。

none–隐藏


这是一个可见标题

这是一个隐藏标题

注意, 实例中的隐藏标题不占用空间。

block–块显示

inline-block-块级元素能够在同一行显示
CSS面试题_第2张图片

inherit:规定应该从父元素继承display属性的值 

table–此元素会作为块级表格来显示。

list-item–像块类型元素一样显示,并添加样式列表标记。

8.position的值?(重要)

  • static(默认):按照正常文档流进行排列;
  • relative(相对定位):不脱离文档流,相对于自己 的父级
  • absolute(绝对定位):外面的父级,若没有父级,就是以左上角为准
  • fixed(固定定位):参照对象是浏览器窗口,出现滚动条的时候,不会随之滚动。

9. CSS3有哪些新特性?

  1. 文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
  2. 圆角(边框半径):border-radius 属性用于创建圆角
  3. 盒阴影:box-shadow: 10px 10px 5px #888888
  4. 边框图片:border-image: url(border.png) 30 30 round
  5. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
    word-wrap(对长的不可分割单词换行)word-wrap:break-word
  6. 文字渲染(text-decoration)
  7. 旋转(transform)
  8. 增加了旋转,缩放,定位,倾斜,动画,多背景

10.请解释一下CSS3的flexbox(弹性盒布局模型)

以更加高效的方式来对容器进行布局,对其和分配空间.

11.用纯CSS创建一个三角形的原理是什么?(重要)

首先,需要把元素的宽度、高度设为0。然后设置边框样式(上,左,右边框设置为透明,边框下面为设置为border-bottom: 40px soild #ffffff)。---不明白,为什么是border-top

// tansparent  --背景透明

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12.常见浏览器的兼容性问题?移动端兼容问题?

  1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
  2. 标准表型指的是设置box-sizing为content-box的盒子模型,一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子。宽高的计算是content+padding+border;
  3. IE下在使用margin:0 auto;无法使其居中 。解决办法:为其父容器设置text-align:center;
    ========移动端=========
  4. 上下拉动滚动条时卡,慢:移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住 - Hrone - 博客园
  5. body {
    // -webkit-overflow-scrolling:控制元素在移动设备上是否使用滚动回弹效果
    // touch:手指从触摸屏上移开,内容会继续保持一段时间的滚动效果
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }
  6. 圆角bug,有些安卓手机圆角失效
    background-clip: padding-box;

    长时间按住页面闪退

  7. element {
      -webkit-touch-callout: none;
    }

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

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

14. 隐藏元素的方法有哪些?

display:none 隐藏某个元素,且隐藏的元素不会占用任何空间

  • 隐藏的元素不占文档流
  • 引发回流和重绘
  • 其内部的标签全部隐藏,无论如何挣扎都无济于事

visibility:hidden 隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间

  •  隐藏的元素存在空间
  • 无回流和重绘
  • 其元素若添加visibility:visibility;则会显示出来

opacity:0.将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。

position: absolute:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。

z-index: 负值:来使其他元素遮盖住该元素,以此来实现隐藏。

clip/clip-path :使用元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

transform: scale(0,0):将元素缩放为 0,来实现元素的隐藏。这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。

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

这两个属性都是让元素隐藏,不可见。两者区别如下:

(1)在渲染树中

  • display:none会让元素完全从渲染树中消失,渲染时不会占据任何空间;
  • visibility:hidden不会让元素从渲染树中消失,渲染的元素还会占据相应的空间,只是内容不可见。

(2)是否是继承属性

  • display:none是非继承属性,子孙节点会随着父节点从渲染树消失,通过修改子孙节点的属性也无法显示;
  • visibility:hidden是继承属性,子孙节点消失是由于继承了hidden,通过设置visibility:visible可以让子孙节点显示; (3)修改常规文档流中元素的 display 通常会造成文档的重排,但是修改visibility属性只会造成本元素的重绘;

(4)如果使用读屏器,设置为display:none的内容不会被读取,设置为visibility:hidden的内容会被读取

16.为什么会出现浮动和使用Float进行布局容易产生什么问题?什么时候需要清除浮动?清除浮动的方式?(重要)

为什么会出现浮动?

  • 浮动定位将元素排除在普通流之外,即元素将脱离文档流,不占据空间。
  • 浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动带来的问题:

  1. 父元素的高度无法被撑开,影响与父元素同级的元素掘金CSS面试题_第3张图片https://juejin.cn/post/6844903447376953357
  2. 与浮动元素同级的非浮动元素(内联元素)会跟随其后
  3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
  4. 子元素在设置 float 后会脱离文档流,造成父元素高度塌陷

清除浮动的方式:

  1. 给浮动元素父级div定义height
  2. 最后一个浮动元素后加空div标签 并添加样式clear:both。
  3. 包含浮动元素的父标签添加样式overflow为hidden或auto。
  4. 父级div定义伪类:after和zoom

适合场景

文字环绕效果FL 

 掘金

必会:为什么会出现浮动?浮动元素会引起什么问题?如何清 除浮动?_帅帅程序猿的博客-CSDN博客_为什么会出现浮动

// test.css .outter { width:200px; background:#3FF; border:1px solid #000;} .inner { float:left; width:120px; height:80px; background:#FF3; }

17.设置元素浮动后,该元素的display值是多少?自动变成display:block

18.使用 CSS 预处理器吗?Less sass

19.Sass、LESS是什么?大家为什么要使用他们? 

是CSS预处理器
1、结构清晰(语法嵌套)
2、可以轻松实现多重继承。
3、定义变量、定义
4、声明@mixin 使用@include调用。一处书写多次调用
5、占位选择器$ 通过@extend调用
6、函数(px转换rem就使用的)
7、强大的运算符()
@function pxRem($px){
    @return $px / $baseFontSize * 1rem;
}

变量:

$blue:#187ec7;//变量声明
div{
    color:$blue;//变量引用
}

嵌套

.div {
    width:500px;
    .div_Children{
        height:50px;
    }
}

 嵌套代码引用父元素

a{
    &:hover{
        color:red;
    }
}

继承

.boderClass{
    border:1px solid #ddd;
}

 class2继承boderClass使用 @extend命令

class2{
    @extend .boderClass;//继承
    color:red;
}

代码重用

@minxin left{//声明
    float:left;
    margin-left:20px;
}


使用@include命令调用mixxin
div{
    @include left;
}

 引用文件

@import命令,用来插入外部文件。使用该命令会合并为一个文件
@import "path/filename.scss";

20. CSS优化、提高性能的方法有哪些?(css优化性能的方法.)

  1. 避免后代选择符
  2. 避免不必要的重复代码
  3. 少使用!important

21.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?(重要)

响应式网站设计是一个能够兼容多个终端而不是每一个终端做一个特定的版本

  • 优点:一套代码兼容web端、平板、以及手机端网页
  • 缺点:工作量大、UI设计也需要多个版本

场景:

  • 同时兼容多种不同设备
  • 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
  • 页面头部必须有meta声明的viewport。

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

          
          
          
          
        
    有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度(三种方案)        
            
          
  
    

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

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

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

overflow默认值visible

  • 参数是scroll时,会出现滚动条
  • 参数是hidden时,溢出隐藏

25.单行,多行文本溢出隐藏 

//  单行文本溢出
overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行


// 多行文本溢出
overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数


 注意:由于上面的三个属性都是 CSS3 的属性,没有浏览器可以兼容,所以要在前面加一个-webkit- 来兼容一部分浏览器。

26.对媒体查询的理解? 

@media的作用:媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

可以简单理解:告诉浏览器,当满足条件时,调用某样式。当满足条件A,调用A样式。当满足条件B时,调用B样式

检测:

1.viewport(视窗) 的宽度与高度
2.设备的宽度与高度
3.朝向 (智能手机横屏,竖屏) 
4.分辨率等等

语法和操作符

语法一:内联@media

@media查询条件表达式{css样式}

例:

@media not|only mediatype and (expression){...}

媒体查询由多媒体组成,可以包含一个或多个表达式,根据表达式条件判断是否成立,返回true或false

如果指定的多媒体类型匹配设备类型则返回查询结果为true,文档会在匹配的设备上显示指定样式效果

可以使用操作符‘not’或‘only’或‘and’或,限定

and表示并且,要求必须满足所有的表达式要求时,才能使用media定义样式。
not:不,表示除…外,即排除掉某些特定的设备的,如 @media not print(非打印设备)
注意:'not’针对的是一整条媒体查询语句,而非其中的某一个条件。

例:

@media not print and(max-width:1024px){...}
/* 或者 */
@media not(print and (max-width:1024px)){..}

only: 表示只有 仅仅,表示某一种的媒体类型设备。
注意:对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

,:多个条件设定使用逗号分隔,表手或者or,满足其中之一。

语法二:外链 media属性
例:


除了上述格式,也可以在不同的媒体上使用不同的样式文件,使用link外联引入:


媒体类型(mediatype)
1.print 打印机
2.screen 电脑屏幕,平板,智能手机等。
3.speech语音合成器等发声设备
4.all 用于所有多媒体类型设备(默认)

常见媒体特性(属性)
1.color颜色
2.color-index 颜色索引
3.aspect-ratio指定设备视口区域的宽高比

例:

@media only screen and (min-aspect-ratio:16/9){...}

4.device-aspect-ratio设备屏幕宽高比
5.device-height设备屏幕高度
6.device-width设备屏幕宽度
7.grid网格栅格
8.scan扫描
9.height高度
10.monochrome黑白
11.orientation方向,横屏landscape还是竖屏portrait
例:

@media (orientation:landscape){
    h1:before{
        content: '现在是横屏效果';
        color:green;
    }
}
@media (orientation:portrait){
    h1:before{
        content: '现在是竖屏效果';
        color:gold;
    }
}

12.resolution设备的分辨率范围 分辨率(dpi),分辨率倍数(dppx)
例:

@media screen and (resolution:2dppx){...}
@media screen and (resolution:3dppx){...}
@media screen and (min-resolution:2dppx){...}

13.width视口宽度 终端设备对页面的渲染区域

视口就是通常我们定义移动端头部meta的viewport。
注意:在浏览器窗口中,视口不包括滚动条、顶部或底部工具栏、菜单的部分。

例:

/* 在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色 */
@media screen and (min-width:480px){
  body{
    background-color:lightgreen;
  }
}

/* 在屏幕可视窗口尺寸大于 500 像素时将菜单浮动到页面左侧 */
 @media screen and (min-width:500px){
  #leftsidebar{
    width:200px;
    float:left;
  }  
  #main{
    margin-left:200px;
  }
}

注:以上几乎所有的属性都可以使用【min-】和【max-】前缀做限定 (grid、scan和orientation除外)

max-color:最大颜色
max-color-index:最大颜色索引
max-aspect-ratio:最大宽高比
max-device-aspect-ratio:最大设备屏幕宽高比
max-device-height:设备屏幕的最大高度
max-device-width: 设备屏幕的最大宽度
max-height: 最大高度
max-monochrome:每个像素的最大单色原件个数
max-resolution:最大分辨率
max-width:最大宽度
min-color:最小颜色
min-color-index:最小颜色索引
min-aspect-ratio:最小宽高比
min-device-aspect-ratio:最小设备屏幕宽高比
min-device-height:设备屏幕的最小高度
min-device-width: 设备屏幕的最小宽度
min-height: 最小高度
min-monochrome:每个像素的最小单色原件个数
min-resolution:最小分辨率
min-width:最小宽度

语法

简单来说,使用 @media 查询,可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面,@media 是非常有用的。当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

27.display:inline-block 什么时候会显示间隙?如何去除inline-blcok元素间隙?

空隙产生原因:

HTML中的换行符、空格符、制表符等空白符。空白符占据一定宽度,使用inline-block会产生元素间的空隙。---------------------------去除空格

字体大小不为0的情况下---------------父元素font-size设置为0,子元素font-size设置实际大小

margin正值的时候-------------------把margin值设置为负数

解决办法:

  1. 把所有的子元素写在一行;
  2. 子元素设置浮动;
  3. 父元素的font-size设置为0,子元素的font-size设置为实际大小;
  4. 把margin值设置为负值

28.在不知道图片大小的情况下,如何设置样式让图片不变形?max-width: 100%

29.link @import导入css(link和@import的区别)

  • link方式的样式权重比import的权重高。
  • link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载
  • link支持js可以改变样式,而import不支持

30.如何实现一个最大的正方形.

// 用 padding-bottom 撑开边距
section {
    width:100%;
    padding-bottom: 100%;
    background: #333;
}

31.一行水平居中,多行居左

我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。
我是一行文字

32.相对长度和绝对长度的区别(重点) 

  • em指的是相对长度,值是不固定的,而是由其他元素尺寸来决定的相对值,并且会继承父元素字体大小。相对单位长度指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。相对长度还有:ex、ch、rem、vw、%等等。·
  • px是绝对长度单位,它是一个固定的值,是多少就是多少,不会因为其他元素的尺寸变化而变化。它反应一个真实的物理尺寸。绝对长度还有:cm、mm、in、pt等等。 
  • 相同点:px和em都是长度单位
  • 异同点:px的值是固定的,是多少就是多少,计算起来比较容易。em的值是不固定的,并且会继承父级元素的字体大小。
  • 浏览器默认字体高是16px。所以未经调整的浏览器都符合1em=16px。那么12px = 0.75em,10px = 0.625em

33.rpx与px的换算单位(重点)1rpx = 0.5px(750物理像素)

微信小程序的尺寸的单位rpx,根据屏幕宽度进行自适应,若规定屏幕款750rpx,那就是750物理像素 

34.flex布局--容器属性;项目属性面试题(重点)

Flex布局:flex属性详解 (flex和flex-grow的区别?)_无数_Mirage的博客-CSDN博客

在css中,flex属性是使用来设置或检索弹性盒模型对象的子元素如何分配空间,3个属性:是 flex-grow属性、flex-shrink属性和 flex-basis 属性的简写属性。flex属性针对的是弹性盒模型对象的子元素,对于其它元素,flex属性不起任何作用;

注:如果元素不是"弹性盒模型对象的子元素",则 flex 属性不起作用。(弹性盒模型对象,即声明了display:flexdisplay: inline-flex的元素,这个元素被称为伸缩容器)

优点:简便、完整、响应式地实现各种页面布局 缺点:只兼容IE10+的浏览器

flex属性语法格式:

flex:flex-grow;flex-shrink;flex-basis/auto/initial/inherit

 1.flex布局flex-grow属性:

定义项目的放大(扩展)比例,即定义对剩余空间(如果有的话)的分配对弹性容器内的元素,在当前列除自身宽度之外若还有剩余空间,而设定的分配

  • 默认为0,即如果存在剩余空间,也不放大。
  • 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间。
  • 如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

CSS面试题_第4张图片

下面这个示例比较全面,自行观察flex-grow设置为1、3、0的区别;以及设置为0但有内容和无内容的区别。

flex-shrink 

定义项目的收缩比例对弹性容器内元素,如果所有子元素的宽的总和超过了弹性容器设定的宽width,那么该属性分配元素的收缩比例。

默认为1,即每个子元素收缩比例相同,但不会忽略内容(如果元素中的内容超过了容器的宽,那么容器会被撑开)

如果一个项目的flex-shrink属性为1,其他项目都为2,且所有项目的宽超过了容器设定的width,则所有项目的宽将在原基础进行收缩,后者进行收缩的量为前者的2倍。但是不会忽略内容,内容会占据实实在在的宽度。

CSS面试题_第5张图片

flex-basis

  • flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值auto,即项目的本来大小。
.item{
flex-basis: | auto;
}
  • 和width不同。flex-basis用于设置或检索弹性盒伸缩基准值
  • 推荐这篇文章:flex-basis表示在flex子元素 被放入flex容器之前的大小,是子元素的理想或者假设大小但是并不是其真实大小,其真实大小取决于flex容器的宽度、flex子元素的min-width,max-width等其他样式 

CSS面试题_第6张图片

CSS面试题_第7张图片

任何一个容器都可以指定为flex的布局.box{display:flex}

行内元素也可能使flex布局.box{display:inline-flex}

webkit内核的浏览器,必须加-webkit前缀

.box{display:-webkit-flex;/*Safari*/display:flex}

注意:设置弹性盒,子元素float,clear和vertical-align属性失效

flex-direction:排列方向             

row:从左往右
row-reverse:从右往左
column:从上到下
column-reverse:从下到上

flex-wrap: 是否换行         

nowrap(默认):不换行
wrap:换行
wrap-reserve

justify-content:定义了主轴的对其方式(横轴)

flex-start(默认):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等

align-item:交叉轴上如何对齐。

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item {
  order: ;
}

flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
  flex-grow: ; /* default 0 */
}

CSS3弹性盒布局方式 - 简书

题:

flex--内容宽度等分

//css
       .box {
            display: flex;
        }
        
        .box div {
            flex: 1;
            border: 1px solid red;
        }
//html
    
1
2
3

35.滚动条

正常溢出部分会自动出现滚动条 

溢出隐藏:overflow:hidden;   overflow:visible(默认)

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

  • 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素
  • 伪类:a:hover--鼠标悬浮,:link 应用于未被访问过的链接,:active 应用于被激活的元素;
  • 伪元素:::before 在元素内容的最前面添加新内容。::after 在元素内容的最后面添加新内容

37.块级元素和行级元素有什么区别

 行内元素:

  • 与其他行内元素并排,行内元素不会自动换行
  • 不设置宽高,设置宽高无效,默认宽度就是文字宽度
  • 对margin设置左右方向有效,而上下无效,padding设置都有效

块级元素:

  • 自己独占一行,不能与其他元素并列
  • 可以自动换行,可以设置宽高,设置margin和padding都有效,如果不设置宽度,那么宽度将默认变为父级的100%

1)、内联元素,和其他元素都在一行上。
2)、内联元素中宽高,行高及顶和底边距不可设置。
3)、内联元素,只能容纳文本或者其他内联元素。
行内元素可以设置padding值、左右margin值、若行内元素浮动则上下margin生效 

38.border:设置所有的边框属性 

p{border: 5px soild red;}
  • border-width:边框宽度
  • border-style:边框样式
  • border-color:边框颜色
  • inherit:从父元素继承border属性的设置

39.水平居中的方法

  • 元素为行内元素,设置父元素text-align:center
  • 如果元素宽度固定,可以设置左右marginauto;
  • 如果元素为绝对定位,设置父元素positionrelative,元素设left:0;right:0;margin:auto;
  • 使用flex-box布局,指定justify-content属性为center.display设置为tabel-ceil

40.垂直居中的方法 

  • 单行文本的话可以使用heightline-height设置同一高度。
  • position+margin:设置父元素:position: relative,子元素height: 100px;position:absolute;top: 50%; margin: -50px 0 0 0;(定高)
  • position+transform:设置父元素position:relative,子元素:position: absolute;top: 50%;transform: translate(0, -50%);(不定高) 
  • 百搭flex布局(ie10+),设置父元素display:flex;align-items: center;(不定高)

41.如何实现左右等高布局

table布局兼容性最好,当然flex布局的align-items: stretch;也行

left
center

如何实现多列等高布局? - 简书

42.line-height和heigh区别 

 line_height是行高的意思,它决定了元素中文本内容的高度,height则是定义元素自身的高度 

  • height:表示行高
  • line-height:表示每行文字所占的高度 

1.height:



Tile<title>
<body>
    <ul>
        <li><a href="#">hello</a></li>
        <li><a href="#">文件夹</a></li>
        <li><a href="#">hhhh</a></li>
    </ul>
</body></code></pre> 
  <p><a href="https://img.it610.com/image/info8/e7fdb7b175d64864820d3597aa313bc1.jpg" target="_blank"><img alt="" height="50" src="https://img.it610.com/image/info8/e7fdb7b175d64864820d3597aa313bc1.jpg" width="539"></a></p> 
  <p> 2.行高为50px和文字高度为20px情况: </p> 
  <pre><code><style type="text/css">
    ul{
        background-color:gray;
        font-size:20px;
        line-height:50px;
        width:50px;
    }
    li{
        display:inline-block;
      }
</style>
<title>Title

       

 3.设置了文字高度和文字大小一样的此时满屏显示


Title

    

 

 “行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。 

CSS面试题_第8张图片

 CSS中起高度作用的就是height以及line-height!如果一个标签没有定义height属性(包括百分比高度),那么其最终表现的高度一定是由line-height起作用 

line-height 与 height 的区别 - 远征i - 博客园

43.什么是CSS reset?  

 HTML标签在浏览器中都有默认的样式,不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉,这就是css reset。 

前端面试:什么是css reset - 明烟雨任 - 博客园

 44.BFC理解(BFC是什么?能解决什么问题?)

BFC触发条件(规则):

  1. 根元素,即html
  2. 浮动元素,float的值不为none(默认)
  3. position的值为absolute或fixed
  4. overflow的值不为visible(默认)
  5. display的值为inline-block、table-cell、table-caption

BFC特性:

  1. 内部的Box会在垂直方向上一个接一个放置。
  2. BFC可以解决margin重叠。(重点)
  3. 每个元素的margin box 的左边,与包含块border box的左边相接触。
  4. BFC不与float box重叠。(可用于清浮动)
  5. BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
  6. 计算BFC的高度时,浮动元素也会参与计算。(重点)

BFC全称:Block Formatting Context,译为块级格式化上下文是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

个人理解:

  • BFC是一个独立的布局环境,BFC内部的元素与外部互不影响
  • 可以通过一些条件触发BFC,从而实现布局上的需求或解决一些问题
  • 可以将BFC想象成一个工具,无需探究其义,只要着重理解其功能

能够解决div浮动造成的遮盖问题【overflow:hidden; 触发bfc来解决遮挡问题】

BFC是什么?BFC有什么用?看完全明白 - qs-cnblogs - 博客园

层叠上下文

45.rgba()和opacity的透明效果有什么不同?rgba()和opacity都能实现透明效果

  • opacity作用于元素,以及元素内的所有内容的透明度
  • rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果!) 

 46.px和em的区别

  • px的值是固定的
  • em得值不是固定的,并且em会继承父级元素的字体大小。
  • 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。、

描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗?你了解他们的不同之处?

body,div,dl,dt,dd,del,ul,ol,li,h1,h2,h3,h4,h5,h6,input,p,figure{padding: 0;margin: 0;}
a{text-decoration: none;}
ul,ol{list-style: none;}
img{border: 0;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;font-style: normal;}
.clearfix{zoom:1;}
.clearfix:after{content:"",display: block;height: 0;visibility: hidden;clear: both;}
 
Normalize.css 保留浏览器原有的样式并且做到每个浏览器显示一致(没有重置所有的样式风格,但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。)
CSS Reset 相反吧浏览器默认样式全部重置
http://jerryzou.com/posts/aboutNormalizeCss/

47.用过哪些布局  css 

1.单列布局 (普通布局:头部、内容、底部)

CSS面试题_第9张图片

 2.内容居中

CSS面试题_第10张图片

CSS布局大全 - 本该如此 - 博客园

48.a标签中 如何禁用href 跳转页面 或 定位链接

e.preventDefault();
href="javascript:void(0); 

49.nth-of-type | nth-child?

举例说明:

    111

    222
  • 1
  • 2
  • 3

li:nth-of-type(2):表示ul下的第二个li元素
li:nth-child(2):表示既是li元素又是在ul下的第二个元素(找不到)。
建议一般使用nth-of-type,不容易出问题。 

50.CSS3动画

 transform:该属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转,缩放,移动,倾斜

描述 代码块 测试
none 定义不进行转换
#MyDIV{transform:none;}
w3school在线测试工具 v1.2
matrix 定义2D转换(使用6值矩阵) #MyDIV{transform:matrix(0.866,0.5,-0.5,0.866,0,0) w3school在线测试工具 v1.2
translate(x,y) 定义2D转换 #MyDIV{transform:translate(10px)} w3school在线测试工具 v1.2
translate3d(x,y,z) 定义3D转换
translateX(x) 定义转换,只是用X轴的值
#MyDIV{transform:translateX(10px);}
w3school在线测试工具 v1.2
scale(x,y) 定义2D缩放转换 #MyDIV{transform:scale(1.1,1.1) w3school在线测试工具 v1.2
scaleX(x) 设置X轴的值来定义缩放转换
#MyDIV{transform:scaleX(1.1);}
w3school在线测试工具 v1.2
rotate(angle) 定义 2D 旋转,在参数中规定角度。
#MyDIV{transform:rotate(10deg);}
w3school在线测试工具 v1.2
skew(x-angle,y-angle) 定义沿着X和Y轴2D倾斜转换
#MyDIV{transform:skew(10deg,10deg);}
w3school在线测试工具 v1.2

transition:设置过渡属性

  • transition-property:设置过渡效果的css属性的名称(transition-property:width;)
  • transition-duration:完成过渡效果需要多少秒或毫秒(transition-duration: 5s;)
  • transition-timing-function:规定速度效果的速度曲线(transition-timing-function: linear;)
  • transition-delay:定义过渡效果何时开始(transition-delay: 2s;)

animation:设置6个动画属性

  • animation-name:为 @keyframes 动画规定名称。







注释:Internet Explorer 9 以及更早的版本不支持 animation-name 属性。

注释:始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

  • animation-duration:动画完成一个周期所需的时间(animation-duration:2s;)
  • animation-timing-function:从开头到结尾以相同的速度来播放动画(animation-timing-function:2s)
  • animation-delay:延迟时间(animation-delay:2s;)
  • animation-direction:定义是否应该轮流反向播放动画(animation-direction:alternate;)

52.什么东西会引起回流重绘  

回流:

  • 添加或删除可见的元素
  • 元素位置发生变化
  • 元素尺寸发生变化(包括外边距,内边距,边框大小,高度和宽度等)

重绘:

  • 触发回流一定会发生重绘,除此之外:
  • 颜色的修改
  • 文本方向的修改

52.对requestAnimationframe的理解 

 实现动画效果的方法比较多,Javascript 中可以通过定时器 setTimeout 来实现,CSS3 中可以使用 transition 和 animation 来实现,HTML5 中的 canvas 也可以实现。除此之外,HTML5 提供一个专门用于请求动画的API,那就是 requestAnimationFrame,顾名思义就是请求动画帧

MDN对该方法的描述:

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

语法: window.requestAnimationFrame(callback); 其中,callback是下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数,它表示requestAnimationFrame() 开始去执行回调函数的时刻。该方法属于宏任务,所以会在执行完微任务之后再去执行。

取消动画: 使用cancelAnimationFrame()来取消执行动画,该方法接收一个参数——requestAnimationFrame默认返回的id,只需要传入这个id就可以取消动画了。

53.常见css布局单位

像素(px),百分比(%),em,rem,vw/vh

像素(px)是页面布局的基础,一个像素表示终端(电脑,手机,平板等) 屏幕所能显示的最小的区域

百分比(%),当浏览器的宽度和高度发生变化,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果.一般认为子元素的百分比相对于直接父元素

em和rem相对于px更具灵活性,它们都是相对长度单位,它们之间的区别:em相对于父元素,rem相对于根元素。

vw/vh是与视图窗口有关的单位,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。

  • vw:相对于视窗的宽度,视窗宽度是100vw;
  • vh:相对于视窗的高度,视窗高度是100vh;
  • vmin:vw和vh中的较小值;
  • vmax:vw和vh中的较大值;

vw/vh 和百分比很类似,两者的区别:

  • 百分比(%):大部分相对于祖先元素,也有相对于自身的情况比如(border-radius、translate等)
  • vw/vm:相对于视窗的尺寸

54.css网格布局(Grid Layout) 

【CSS 网格布局 (Grid Layout )】_Hey_Coder的博客-CSDN博客

属性:

display: grid; // 网格布局
grid-template-columns:定义每一列的列宽
gris-template-rows:定义每一行的行高
repeat():重复的值
grid-template-columns: repeat(3, 33.33%);

55.流式布局(百分比布局) 也称非固定像素布局

通过盒子的宽度设置成百分比根据屏幕的宽度进行收缩,不受固定像素的限制,内容向两侧填充

在早期用来应对不同尺寸的PC端,如今也是移动端开发使用比较常见的布局方式

流式布局的特点就是采用display:flex;来控制整体布局,文字会随着屏幕的宽度自动延伸,弹性控件的空间会随着屏宽逐渐加大但不会自动增大,图片采用百分比进行缩放。

max-*、min-* 

百分比布局经常搭配这两个使用

比如所选区域占宽75%,但是将视觉饰扣调小又需限制其最小宽度,所以往往通过min-width限制,在定义图片时往往使用max-width等于其宽度来防止图片拉伸变形

如:

body{
    margin: 0 auto;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    font-size: 14px;
    font-family: -apple-system,Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}

优点:通过百分比设置宽度,可以自适应不同尺寸屏幕

缺点:高度和文字大小都是通过px固定取值,所以如果当显示屏幕过大或过小可能会导致某些页面元素被拉的很长很扁,不能正常显示。

CSS面试题_第11张图片

 rem布局

CSS面试题_第12张图片

单位:

  em:相对单位,使用较少,1em等于当前元素或父元素所设置的font-size大小的值,例如父元素当前字体大小为16px,则子元素或者父元素的1em大小就是16px

  rem:相对单位,应用比较多,1rem等于根元素(html元素)的font-size值

  vw/vh:应用较多,把屏幕分成100份,1vw等于屏幕宽的1%,那么1vh就是屏幕高度的1%,一般去设置vw的大小值

  那么动态去设置font-size的值那?

  目前我所学到的有两种方法也是比较常见的方法。

  我们以设计稿按照iPhone6来设计为例 即屏幕宽度像素为375px

  方法一、通过JavaScript获取屏幕宽度

CSS面试题_第13张图片方法二、在css文件中添加如下语句

CSS面试题_第14张图片

「2021」高频前端面试题汇总之CSS篇 - 掘金

Transform:它和width、left一样,定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能,通过一系列功能的组合我们可以实现很炫酷的静态效果(非动画)。48.transform?animation?区别?animation-durationtransform?animation?区别?animation-duration

Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴,它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.
animation-duration:规定完成动画所花费的时间,以秒或毫秒计。 

41.animation对应的属性

写法:animation: name duration timing-function delay iteration-count direction;
下面是对应的属性的介绍
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

42.transition?

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值 注意区别transform,transform是进行2D转换的 如移动,比例化,反过来,旋转,和拉伸元素。

 实现三列布局

【不一样的CSS】实现三列布局的 5 种方式 - 知乎

CSS如何实现三列布局?实现三列布局的3种方法(代码示例)-css教程-PHP中文网

50.介绍css3中position:sticky

51.transform动画和直接使用left、top改变位置有什么优缺点

52.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?(不重要)
  1. png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是:压缩比高,色彩好。 大多数地方都可以用。
  2. jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
  3. gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果.
  4. webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间更久了,兼容性不好,目前谷歌和opera支持。
13. CSS里的visibility属性有个collapse属性值?在不同浏览器下以后什么区别?(不重要)

当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。

  1. chrome中,使用collapse值和使用hidden没有区别。
  2. firefox,opera和IE,使用collapse值和使用display:none没有什么区别。

15. position跟display、overflow、float这些特性相互叠加后会怎么样?(了解即可)

display属性规定元素应该生成的框的类型;position属性规定元素的定位类型;float属性是一种布局方式,定义元素在哪个方向浮动。
类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。

21.浏览器是怎样解析CSS选择器的?(不重要--理解就好)

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

22.在网页中的应该使用奇数还是偶数的字体?为什么呢?(不重要)

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。

23.margin和padding分别适合什么场景使用?(不重要)

何时使用margin:

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白,需要相互抵消时。
何时使用padding:

需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白,希望为两者之和。
兼容性的问题:在IE5 IE6中,为float的盒子指定margin时,左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display:inline解决

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

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

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

25.全屏滚动的原理是什么?用到了CSS的哪些属性?(不重要)

  1. 当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。
  2. overflow:hidden;transition:all 1000ms ease;

28.你对line-height是如何理解的?(不重要)

行高是指一行文字的高度,具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height,没有定义height属性,最终其表现作用一定是line-height。
单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。
多行文本垂直居中:需要设置display属性为inline-block。

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

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

30.让页面里的字体变清晰,变细用CSS怎么做?(不重要)

-webkit-font-smoothing在window系统下没有起作用,但是在IOS设备上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。

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

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

  1. 可以将
  2. 代码全部写在一排
  3. 浮动li中float:left
  4. 在ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px

一个盒子不给宽度和高度如何水平垂直居中? 

实现一个不设置宽高的盒子水平垂直居中的方法_syx_12的博客-CSDN博客

实现没有宽高的盒子水平垂直居中 - 苏小妞吖 - 博客园

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

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

写一个左中右布局占满屏幕,其中左、右俩块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。 

我是左边
我是中间
html,body{ margin: 0px;width: 100%; } #left,#right{width: 200px;height: 200px;background-color: aqua; position: absolute;} #left{left: 0;top:0;} #right{right: 0;top:0;} #center{margin: 0 200px;background-color: blue;height: 200px;}

44.水平垂直居中

两栏布局,左边固定,右边自适应,左右不重叠

flex做自适应布局很容易,但兼容性不好,这里统一不用flex布局

.left{
    float:left;
    width:300px;
    margin-right: 10px;
    background: red;
}
.right{
    overflow: hidden; /* 创建BFC */
    background: yellow;
}

 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

有哪项方式可以对一个DOM设置它的CSS样式? 

  • 外部样式表,引入一个外部css文件 
  • 内部样式表,将css代码放在 head 标签内部 
  • 内联样式,将css样式直接定义在 HTML 元素内部 

 CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?

display: none;
visibility: hidden;
height: 0;overflow: hidden;
position: absolute;top: -999em;
opacity: 0;filter: Alpha(opacity=0);
position: absolute;visibility: hidden;

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

#demo{
    width: 0;height: 0;border-width: 20px;border-style: solid;
    border-color: transparent transparent red transparent;
}
左箭头(尖细)
sReturn{
    display: block;content: '';width: 10px;height: 10px;
    border-width: 2px;border-style: solid;
    border-color: #fff transparent transparent #fff;
    position: absolute;top: 50%;left: 15px;
    transform: translateY(-50%) rotate(-45deg);
}
左箭头(钝)
#demo1{
    width: 10px;height: 10px;
    position: absolute;top: 50%;
    border-left: 2px solid red;
    border-top: 2px solid red;
    transform: rotate(-45deg) translateY(-50%);
}

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

浏览器css匹配核心算法的规则是以 right-to-left 方式匹配节点的。

css中可以让文字在垂直和水平方向上重叠的两个属性是什么? 

垂直方向:line-height
水平方向:letter-spacing
关于letter-spacing的妙用知道有哪些么?
可以用于消除inline-block元素间的换行符空格间隙问题。 

 absolute的containing block(容器块)计算方式跟正常流有什么不同?

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

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

当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。
如果这个元素是table相关的元素,它的表现却跟display: none一样,也就是说,它们占用的空间也会释放。
 
在谷歌浏览器里,使用collapse值和使用hidden值没有什么区别。
在火狐浏览器、Opera和IE11里,使用collapse值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。 

针对移动端的布局? 


布局和PC一样、添加新的meta标签、使用rem或者传统/2方案适配 

说说你对rem的理解? 

根据改变根节点的font-size值、进行移动端大小的适配
Flexible会将视觉稿分成100份、而每一份被称为一个单位a、同时1rem单位被认定为10a。
1a   = 7.5px
1rem = 75px 
 
大漠Rem介绍:https://github.com/amfe/article/issues/17
lib.flexible开源项目:https://github.com/amfe/lib-flexible

@function Rem(){
    @return ($px / 75) * 1rem;
}
用法:
.sCutimg{width: Rem(640);height: Rem(685);margin: 0 auto;padding-top: 40px;} 

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

抽离样式模块怎么写,说出思路,有无实践经验?(抽离样式模块、结构分割成一个个小的复用模块、根据业务需求、内容的大小大部分是相对的值。命名规则则是跟其他的所有类型对待区别。比如加上moduleCss的前缀)
元素竖向的百分比设定是相对于容器的高度吗?(容器的宽度)
全屏滚动的原理是什么?用到了CSS的那些属性? 

问题反问
1、您说的是哪个浏览器的哪类问题?
2、还是常用浏览的(前端)API差异?
3、Layout渲染差异?
4、谈谈浏览器为什么存在兼容问题?
5、兼容存在的历史原因?
想了解你常用的常见到的常解决到的,或者近期刚刚解决过的一些浏览器兼容问题

1、IE低版本的事件怎么绑定?标准怎么绑定?阻止事件的API分别是什么(Pas)
2、jQuery怎么事件委托呢?
3、给你这个方法和这个方法,怎么实现jQuery这种形式的事件委托。
4、不要去了解如何兼容旧 IE,而是要更加符合趋势,关注优秀的、流行的东西。
对过时浏览器的兼容性问题是沉重的知识包袱, 关键是这种知识没有延续性,会影响你学习和使用新技术
5、如果问移动浏览器的兼容性还可以原谅,如果还拿ie8一下说事,立马走人不干了!

让面试官满意最好的办法
1、多表达自己,免得让面试官主动问你
2、让对方看到你的发光点
3、一般面试官问一个大而无当的问题多半是他还没想到一个合适的问题,拖延一下时间,你可以和他一起把问题细化。
4、这个其实是需要分类去答,css兼容性网上很多,至于js的兼容性,看看jquery代码里面的注释就可以了

CSS 布局面试题+答案 - 知乎

css2.0 和css3.0
答:css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属性)。在效果方面加入了更多的效果(圆角,动画之类的),还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好,只有一些高级版本的浏览器支持。

12.viewport 所有属性 ?

(1)width :设置layout viewport的宽度,为一个正整数,或字符串'device-width';
(2)initial-scale:设置页面的初始缩放值,为一个数字,可以带小数。
(3)minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数。
(4)maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数。
(5)height:设置layout viewport的高度,这个属性对我们并不重要,很少使用
(6)user-scalable:是否允许用户进行缩放,值为‘no’或者‘yes’。
安卓中还支持:target-densitydpi,表示目标设备的密度等级,作用是决定css中的1px 代表多少物理像素
(7)target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

17.常见兼容性问题?

* png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理。

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。

* 浮动ie产生的双倍距离(IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。) #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

* 渐进识别的方式,从总体中逐渐排除局部。 首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。 接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; }

* IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性。

* IE下,event对象有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 {}

* 怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。现在可以使用[html5]( http://www.w3.org/TR/html5/single-page.html)推荐的写法:``

* 上下margin重合问题
ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。
解决方法,养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。

* ie6对png图片格式支持不好(引用一段脚本处理)

34.手机端上 图片长时间点击会选中图片,如何处理?

οnselect=function() {
return

40.解释在ie低版本下的怪异盒模型和c3的怪异盒模型 和 弹性盒模型?

IE当padding+border的值小于width或者height:
盒模型的宽度=margin(左右)+width(width已经包含了padding和border的值)
盒模型的高度=margin(上下)+height(height已经包含了padding和border的值)
当padding+border的值大于width或者height:
盒模型的宽度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px (加一个默认行高 19px) 所以相当于是padding+border和width或者height比大小,谁大取谁。
以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式) CSS3box-sizing有两个值一个是content-box,另一个是border-box。
当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
当设置为box-sizing:border-box时,将采用怪异模式解析计算;
Css3弹性盒模型引入了新的盒子模型—弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

你可能感兴趣的