前端面经-css篇

1、画一条0.5px 的线

采用meta viewport的方式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

采用transform:scale()的 方式
trasform：scale(0.5,0.5);

为什么不直接设置为0.5px?
其中Chrome把0.5px四舍五入变成了1px，而firefox/safari能够画出半个像素的边

2、link标签和import标签的区别（重要）

• link属于html标签，而@import是css提供的。
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
• llink是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
• link方式样式的权重是高于@import的。

3、动画transition和animation的区别

transition

<div class="box"></div>
.box{
	width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: #00b3f1;
    /* transition: 哪个属性动 运动在多长时间完成 延迟时间 运动类型；*/
	transition:all .5s linear;
}

animation

.box {
	width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: #00b3f1;
        
    animation-duration: 1s;                 /* 动画时间 */
    animation-name: fillout;                /* 通过name使用 */
    animation-iteration-count: infinite;    /* 循环次数，infinite（无限次循环） */
}

@keyframes fillout{
	from{
		width:200px;
		height:200px;
	}
	to{
		width:400px;
		height: 400px;
	}
}

主要区别：

• transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下会随着事件改变属性值。
• transition触发一次播放一次；而animation则是可以设置很多的属性，比如循环次数，动画结束的状态等等。

4、Flex布局

文章连接

Flex 布局教程：语法篇
Flex 布局教程：实例篇

理解

flex弹性布局，用来为盒子模型提供最大的灵活度。采用flex布局的容器，它的所有子元素自动成为容器成员，称为flex项目，容器默认存在两根轴：水平的主轴和垂直的交叉轴。项目默认沿着主轴排列。单个项目占据主轴空间叫做main size，占据的交叉轴空间叫做cross size

flex:1的原理
​flex是flex-grow、flex-shrink、flex-basic的缩写。flex-grow属性指定了flex容器剩余空间的多少应该分配给项目，默认为0不扩大。flex-shrink属性指定了flex的收缩规则，默认为1。flex-basic指定了flex元素在主轴方向上的初始大小。flex的默认值是flex：0 1 auto。flex：1相当于设置了flex：1 1 auto。表示该元素会占据容器所有的剩余空间，所以可以做到footer元素一直保存在底部的效果。

如何用flex布局实现grid布局

容器div的css样式

.grid-box{
  display:flex;
  flex-flow: row wrap;
  width:100%;
}

容器内item的css样式
.grid-box-item{
  width:calc(calc(100% / 3) - 12px); //使用calc实时计算width
  height: 60px;
  margin: 6px;
  box-sizing: border-box;//为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
  border-radius:15px;
}
为了使item内部的内容水平垂直居中，同样也使用flex布局方式，具体如下：
  display: flex;
  /*在交叉轴上如何对齐*/
  align-items: center;
  /*在主轴上的对齐方式*/
  justify-content: center;

5、BFC(重要）

概述
BFC是block formatting context,也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域
作用
BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。
1）避免外边距重叠问题
2）清除浮动，高度塌陷
3）阻止元素被浮动元素覆盖
如何创建BFC
1）根元素html
2）浮动元素，float的值不为none
3）绝对定位元素，position的值不为relative和static
4）display的值为table-cell，table-caption,inline-block,flex等中的任何一个。
5）overflow的值不为visible
6）contain值为layout、content、paint

6、盒子模型（重要）

在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度
标准盒子模型和IE盒子模型互换

box-sizing:content-box,表示安装标准的盒子模型显示
box-sizing:border-box,表示安装IE盒子模型来显示

7、display:none, visibility:hidden和opcatity:0的区别

display:none 隐藏后不占据额外空间，他会产生回流和重绘。
而visibility:hidden和opacity:0元素虽然隐藏了，但他仍然占据空间，这两个只会引起页面重绘。

8、回流（重排）与重绘

回流（重排)
浏览器渲染页面默认采用的是流失布局模型（Flow Based Layout）

所谓回流（重排），实际上是根据渲染树上的每个渲染对象的信息，计算出各自渲染对象的几何信息（DOM对象的位置和尺寸大小），并将其安置在界面中的正确位置。

由于浏览器渲染界面是基于流式布局模型的，也就是某一个DOM节点信息更改了，就需要对DOM结构进行重新计算，重新布局界面，再次引发回流，只是这个结构更改程度会决定周边DOM更改范围，即全局范围和局部范围，全局范围就是从根节点html开始对整个渲染树进行重新布局，例如当我们改变了窗口尺寸或方向或者是修改了根元素的尺寸或者字体大小等；而局部布局可以是对渲染树的某部分或某一个渲染对象进行重新布局。

在此，总结会引起回流（重排）的操作有：
1）页面首次渲染
2）浏览器窗口大小发生改变
3）元素尺寸或位置发生变化
4）元素内容变化
5）元素字体大小变化
6）添加或者删除可见的DOM元素
7）激活css伪类（列如:hover)
8）设置style属性
9）查询某些属性或调用某些方法

重绘
所谓重绘，就是当页面中元素样式的改变不会影响他在文档流中的位置时，列如更改了字体颜色，浏览器会将新样式赋予给元素并且重新绘制的过程

总结
回流（重排）一定会重绘，重绘不一定有回流（重排）

9、margin塌陷

父子嵌套元素在垂直方向的margin，父子元素是结合在一起的，他们两个的margin会取其中最大的值。
正常情况下，父级元素应该相对浏览器定位，子级元素相对父级定位。
但由于margin的塌陷，父级相对浏览器定位。而子级没有相对父级定位，子级相对父级就像塌陷了一样
解决办法
触发BFC（块级格式上下文），改变父级的渲染规则

ps:margin合并
原理：两个兄弟结构的元素在垂直方向上的margin是合并的
解决办法：触发BFC

10、清除浮动

1）额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear:both;)
2）父级添加overflow属性（父元素添加overflow:hidden)（不推荐）
3）使用after伪元素清除浮动（推荐使用）
4）使用before和after双伪元素清除浮动

11、选择器优先级

内联样式》id选择器》类选择器=属性选择器=伪类选择器》标签选择器=伪元素选择器 !important的优先级最高

伪类选择器：它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
伪元素选择器：dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before,选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）

12、css position定位

概述
position属性指定了元素的定位类型.
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。

static定位
HTML元素的默认值，既没有定位，遵循正常的文档流对象
今天定位的元素不会收到top，bottom，left，right影响
fixed定位
元素的位置相对于浏览器窗口是固定位置。
即使浏览器滚动他也是不会滚动的

ps：
1）Fied定位在IE7和IE8下需要描述<!doctype>才能支持
2）Fied定位使元素的位置与文档流无关，因此不会占据空间。
3）Fied定位的元素和其他元素重叠

relative定位
相对定位元素的定位是相对其正常位置
移动相对定位元素，但他原本所占的空间不会改变
相对定位元素经常被用来作为绝对定位元素的容器块
absolute定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

• absolute定位使元素的位置与文档流无关，因此不能占据空间。
• absolute定位的元素和其他元素重叠。

sticky定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

13、(移动端)媒介查询相关的自适应布局

媒体查询
为了实现响应式布局，相当于增加了条件判断

• min-width 大于等于
• max-width 小于等于

媒体类型

• all适用于所有设备
• print适用于打印纸或打印预览视图
• screen主要适用于电脑、手机、平板等智能设备屏幕
• speech适用于语言合成器
• tv电视设备

逻辑运算符

@media screen and (min-width:1200px){
	//大宇等于1200px才会进入
}

移动端适配的技术方案：

（1）通过媒体查询的方式即CSS3的meida queries
（2）以天猫首页为代表的 flex 弹性布局
（3）以淘宝首页为代表的 rem+viewport缩放
（4）rem 方式
通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度

14、px,em,rem

px
px像素。相对于长度单位。像素px是相对于显示器屏幕分辨率而言的。

em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸。

rem
rem是css3新增的一个相对单位。与em的区别是相对的是html根元素。

p{font-size:14px;font-size:.875rem;}

15、动画相关

16、精灵图

css精灵图（css spprites)是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中。

优点
1）减少对浏览器的请求次数，避免网页的延迟
2）方便小图标的统一管理

精灵图的使用

css精灵图需要配合背景的图片和背景定位

1.引入精灵图

.basic{
	background-image:url(ui.png);
	width:80px;
	height:80px;
	background-repeat:no-repeat;
	display:inline-block;
}

2.精确定位需要显示的小图标坐标

.sprite1{
	background-position:80px 0px
}
.sprite2{
	background-position:160px 160px
}

17、伪类和伪元素

伪类

比如说:hover、first-child经常用来设定对应的模块

伪元素
::after或者::before子类 的，常用来加icon或者清楚浮动子类的

18、css命名冲突解决方法

1）css modules
2）css scoped

19、Canvas与SVG的比较

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以.png和.jpg格式保存结果对象
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
• Canvas是逐像素进行渲染的

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序
• 复杂度搞会减慢渲染速度
• 不适合游戏应用

20、怎么实现左侧固定右侧自适应

1）使用浮动-float

	 <style>
        .outer{overflow: hidden; border: 1px solid red;}
        .left{float: left;width:200px;height: 150px; background: #BCE8F1;}
        .right{margin-left:200px;height:200px;background: #F0AD4E;}
    </style>
    
    <div class="outer">
        <div class="left">固定宽度区(sideBar)</div>
        <div class="right">自适应区(content)</div>
    </div>
	

2）使用绝对定位实现-absolute

	.outer {
    overflow: hidden;
    position: relative;
}
/* 脱离文档流 */
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    margin-left: 200px;
    background: skyblue;
    height: 200px;
}

    <div class="outer">
        <div class="left">固定宽度区(sideBar)</div>
        <div class="right">自适应区(content)</div>
    </div>

3）使用弹性布局-flex

	.wrap {
    display: flex;
}
.left {
    height: 200px;
    background: purple;
    flex:0 0 200px
}
.right {
    background: skyblue;
    height: 200px;
    flex: 1;
}

    <div class="outer">
        <div class="left">固定宽度区(sideBar)</div>
        <div class="right">自适应区(content)</div>
    </div>

21、水平垂直居中

absolute+transform

<div class="wp">
	<div class="box">123</div>
</div>

.wp{
	position:relative;
}
.box{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

flex

<div class="wp">
	<div class="box">123</div>
</div>

.wp{
	display:flex;
	justify-content:center;
	align-items:cener;
}

图片的水平垂直居中
1、img父级display:table-cell; vertical:middle; height:xxx;

 <style>
        div{
            display: table-cell;
            width:300px;
            height:200px;
            vertical-align: middle;
            /*text-align:去掉则垂直不水平*/
            text-align:center;
            background:skyblue; /*table-cell 可以使替换元素垂直居中，强大！*/
        }
        img{
            width:100px;
            height:100px;
        }
    </style><body>
<div>
  <img src="1.jpg"/>
</div>
</body>

2、父级line-height == height + vertical-align:middle （推荐）

 <style>
        img{
            border:0;
        }
        div{
            width:300px;
            height:200px;
            line-height:200px;
            background:skyblue;
            text-align:center;
        }
        img{
            width:100px;
            height:100px;
            vertical-align:middle;
        }
    </style>
<body>
<div>
     <img src="1.jpg"/>
</div>
</body>

22、css做圆形，三角形，斑马线

圆形

<div id="circle"></div>
#circle{
	width:120px;
	height:120px;
	border-botom:140px solid #fcf921
	-moz-border-radius:60px;
	-webkit-border-radius:60px;
	border-radius:60px
}

三角形

<div id="triangle"></div>
#triangle{
	width:0;
	height:0;
	border-bottom:140px solid #fcf921;
	border-left:70px solid transparent;
	border-right:70px solid transparent;
}

斑马线

<div class="zebra-crossing"></div>
.zebra-crossing {
  width: 180px;
  height: 100px;
  margin: 1em;
  background: linear-gradient(to right, #fff 50%, #bbbbbb 0);
  background-size: 30px 100%;
}

23、CSS浏览器兼容性

24、关于JPEG、PNG、GIF、WEBP图片格式的理解和使用场景

关于JPEG、PNG、GIF、WEBP图片格式的理解与使用场景

图像压缩原理

压缩原理
因为它有很多冗余信息。
常见图像、视频、音频数据中存在的冗余类型如下：

1. 空间冗余
2. 时间冗余
3. 视觉冗余

JPEG

JPEG是有损的、采用直接色的、位图。JPEG也是一种针对照片影像而广泛使用的有损压缩标准方法。JPEG图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。

PNG

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

GIF

25、js文件为什么放在后面，css文件会阻塞渲染吗

CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。
JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。

26、常见的块元素，行内元素，行内块元素**

块元素

每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。
常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等 

行内元素

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。 
一般不可以设置宽度，高度以及对齐等属性。 
常见的行内元素有：<a >,<strong>,<b>,<em>,<del>,<span >等
默认的宽度就是它本身的宽度 

行内块级元素

块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元宽度和高度，
也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素，它可以设置高宽以及一行多个。

行内元素、块级元素、行内块级元素有什么区别
块级元素的特点：

块级元素会独占一行
高度，行高，外边距和内边距都可以单独设置
宽度默认是容器的100%
可以容纳内联元素和其他的块级元素 

行内元素的特点：

和相邻的行内元素在一行上
高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效 默认的宽度就是它本身的宽度
行内元素只能容纳纯文
本或者是其他的行内元素（a标签除外）

行内块级元素的特点：

和其他行内或行内块级元素元素放置在同一行上；
元素的高度、宽度、行高以及顶
和底边距都可设置。 

如何将行内元素转为块级元素

display：block ，定义元素为块级元素 
display : inline ，定义元素为行内元素 
display：inline-block，定义元素为行

27、z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

28、html如何实现上中下布局(上下固定中间自适应)

absolute

.header {
            height: 200px;
            width: 100%;
            background: blue;
            position: absolute;
            top: 0;
        }
        
        .main {
            background: yellow;
            width: 100%;
            position: absolute;
            top: 200px;
            bottom: 200px;
            height: auto;
        }
        
        .footer {
            height: 200px;
            width: 100%;
            background: green;
            position: absolute;
            bottom: 0;
        }

flex

.header {
            height: 200px;
            width: 100%;
            background: blue;
            position: absolute;
            top: 0;
        }
        
        .main {
            background: yellow;
            width: 100%;
            position: absolute;
            top: 200px;
            bottom: 200px;
            height: auto;
        }
        
        .footer {
            height: 200px;
            width: 100%;
            background: green;
            position: absolute;
            bottom: 0;
        }

29、input事件自动获取焦点（）

该input标签后添加autofocus="autofocus"即可

input的事件有哪些？

onblur： 失去焦点

onfocus：得到焦点

onclick ：鼠标点击

ondblclick：双击

onchange：改变

onkeydown：按下按键时的事件触发

30、css实现单行、多行文本溢出隐藏

单行

• 强制文字一行显示

 white-space: nowrap;

• 将多余的文字隐藏

 overflow: hidden;

• 将隐藏的文字使用省略号代替

 text-overflow: ellipsis;

多行

• 强制文字一行显示

 white-space: nowrap;

• 将多余的文字隐藏

 overflow: hidden;

• 将隐藏的文字使用省略号代替

 text-overflow: ellipsis;

• 告诉浏览器你要显示多少行

 -webkit-line-clamp: 4;

• 文字显示方式,默认水平

-webkit-box-orient: vertical;

• 将盒子转为弹性盒子

display: -webkit-box;