资讯详情

【面试一】

#

第一部分：HTML5 CSS3

1.如何实现父元素和子元素的宽度和高度不固定？

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         * {             padding: 0;             margin: 0;         }          html,         body {             width: 100%;             height: 100%;         }          body {             background-color: azure;         }          .parent {             width: 100%;             height: 100%;             background-color: orangered;             text-align: center;         }          .child {             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);             /* 使用css3的transform来实现 */         }          .child p {             width: 300px;             height: 400px;             background-color: blue;         }     </style> </head>  <body>     <div class="parent">         <div class="child">             <p></p>         </div>     </div> </body>  </html>

第二种方法 flex

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>        *{         padding: 0;         margin: 0;     }     body,html{         width: 100%;         height: 100%;     }     .parent{         display: flex;         justify-content: center;         align-items: center;         width: 100%;         height:100%;         background: #FD0C70;     }     .parent .child{         color:#fff;         width: 200px;         height: 300px;         text-align: center;         background-color: yellow;     }     </style> </head>  <body>     <div class="parent">         <div class="child">hello world</div>     </div> </body>  </html>

2.实现骰子中的一点点 和 ‘三点’ 的布局。

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .m-container{ 
            margin: 5px; padding: 5px; width:100px; height: 100px; border:1px solid green; } .m-item { 
            margin: 5px; width: 20px; height: 20px; border-radius: 10px; background-color: black; } .box4 { 
            display: flex; justify-content: center; align-items: center; } /*水平垂直居中*/ </style> </head> <body> <div class="m-container box4"> <span class="m-item"></span> </div> </body> </html>

三点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box{
        width: 200px;
        height: 200px;
        padding: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between; /*设置两端对齐*/
        border: 2px solid #ccc;
        border-radius: 10px;
    }
    .item{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
    }
    .item:nth-child(2){
        align-self: center; /*垂直方向居中*/
    }
    .item:nth-child(3){
        align-self: flex-end; /*垂直方尾对齐*/
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    <div>
</body>

</html>

3、简述选择器~和+的区别。

<div class='try'></div>
<p class='one'></p>
<p class='two'></p>
123

如果是+

.try + p
1

那么选中的只是类名为one的p

如果是~

.try ~ p
1

那么选中的是类名为one和类名为two的p

<div class='try'></div>
<h2></h2>
<p class='one'></p>
<p class='two'></p>
1234

那么

.try + p
1

则什么也选择不到

.try ~ p
1

则没有影响

4、简述box-sizing的有效值以及所对应的盒模型规则。

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

语法：box-sizing: content-box|border-box|inherit;

1）box-sizing:content-box；这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中

2）box-sizing:border-box；为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

3）box-sizing:inherit;；规定应从父元素继承 box-sizing 属性的值

不会合并

6、简述align-items和align-content的区别。

align-items属性适用于所有的flex容器，它是用来设置每个flex元素在交叉轴上的默认对齐方式。如果是多行多行容器，多行和多行之间是有间距的。

align-content有相同的功能，但是align-content属性只适用于多行的flex容器，有一个重点就是多行，并且align-content在对齐的过程中，如果是多行多行容器，多行和多行之间的间距是没有的。

7、简述data:属性的用法（如何设置，如何获取），有何优势？

data-* 的值的获取和设置，2种方法：

getAttribute() 获取data-属性值；

setAttribute() 设置data-属性值

2)HTML5新方法

例如 data-href

dataset.href 获取data-href属性值

dataset.href = ‘http://baidu.com’ 设置data-href属性值

传统方法无兼容性问题，但是不够优雅、方便

HTML5新方法很优雅、方便，但是有兼容性问题，可以在移动端开发或不支持低版本浏览器的项目中使用

：自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

8、简述 title与h1的区别，b与label的区别，i与em的区别。

title与h1的区别:

定义：title是网站标题，h1是文章主题

作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，是显示在网页中的.

b与label的区别:

从视觉上效果观看b与label是没有区别的,从单词的语义也可以分析得出，b是Bold(加粗)的简写，所以这个B标记所传达的意思只是加粗，没有任何其它的作用，而Strong我们从字面理解就可以知道他是强调的意思，所以我们用这个标记向浏览器传达了一个强调某段文字的消息，他是强调文档逻辑的，并非是通知浏览器应该如何显示。

3)i与em的区别:同样，I是Italic(斜体)，而em是emphasize(强调)。

9、什么是标准文档流

标准文档流：网页在解析的时候，遵循于从上向下，从左向右的一个顺序，而这个顺序就是来源于标准文档流。

标准文档流等级，分为两种等级：块级元素和行内元素；

块级元素：

1).霸占一行，不能与其他任何元素并列

2).能接受宽、高

3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

行内元素：

1).与其他元素并排

2).不能设置宽、高。默认的宽度就是文字的宽度

10、z-index是什么？在position的值什么时候可以触发?

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，当脱离文档流内容较多，并且相互重叠的时候，就有可能发生本想完全显示的内容被其他内容遮挡的结果，这时我们就需要人为指定哪个层在上面，哪个在下面，z-index属性就是干这个用的。注意：Z-index 仅能在定位元素上奏效.

在position的值是relative、absolute、fixed、sticky时候可以触发

11、CSS3 如何实现圆角边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .demo{
    margin:0 auto;
    background: darkcyan;
    width:200px;
    height:200px;
    border:2px solid darkslategray;
    border-radius:30px;
    text-align: center;
    line-height: 200px;
}
    </style>
</head>

<body>
 
    <div class="demo">圆角边框</div>
</body>

</html>

12、HTML5有哪些缓存方式

h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。 主要应用：购物车、客户登录 对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。

解决4k的大小问题 解决请求头常带存储信息的问题 解决关系型存储的问题 跨浏览器

以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。

每个域名5M

getItem //取记录

setIten//设置记录

removeItem//移除记录

key//取key所对应的值

clear//清除记录

数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）

2.本地存储sessionstorage

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。

3.离线缓存（application cache）

本地缓存应用所需的文件 ①配置manifest文件 页面上：

...

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

①CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存

②NETWORK – 在此标题下列出的文件需要与服务器的连接，且不会被缓存

③FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js

NETWORK: login.jsp

FALLBACK: /html/ /offline.html

**服务器上：**manifest文件需要配置正确的MIME-type，即 “text/cache-manifest”。

如Tomcat:

manifest text/cache-manifest

核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：

0（UNCACHED） : 无缓存， 即没有与页面相关的应用缓存

1（IDLE） : 闲置，即应用缓存未得到更新

2 （CHECKING） : 检查中，即正在下载描述文件并检查更新

3 （DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源

4 （UPDATEREADY） : 更新完成，所有资源都已下载完毕

5 （IDLE） : 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存

表示应用缓存状态的改变：

checking : 在浏览器为应用缓存查找更新时触发

error : 在检查更新或下载资源期间发送错误时触发

noupdate : 在检查描述文件发现文件无变化时触发

downloading : 在开始下载应用缓存资源时触发

progress：在文件下载应用缓存的过程中持续不断地下载地触发

updateready : 在页面新的应用缓存下载完毕触发

cached : 在应用缓存完整可用时触发

① 离线浏览

② 提升页面载入速度

③ 降低服务器压力

\1. 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB） \2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存 \3. 引用manifest的html必须与manifest文件同源，在同一个域下 \4. 浏览器会自动缓存引用manifest文件的HTML文件，这就导致如果改了HTML内容，也需要更新版本才能做到更新。 \5. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面 \6. FALLBACK中的资源必须和manifest文件同源 \7. 更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件。 \8. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问 \9. 当manifest文件发生改变时，资源请求本身也会触发更新

点我参考更多资料！

\1. 离线缓存是针对整个应用，浏览器缓存是单个文件

\2. 离线缓存断网了还是可以打开页面，浏览器缓存不行

\3. 离线缓存可以主动通知浏览器更新资源

4.Web SQL

关系数据库，通过SQL语句访问 Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

②：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

③：这个方法用于执行实际的 SQL 查询。

13、CSS3新增伪类有那些

p:last-of-type     选择其父元素的最后的一个P元素

p:last-child       选择其父元素的最后子元素(一定是P才行)

 

p:first-of-type     选择其父元素的首个P元素

p:first-child      选择其父元素的首个p元素(一定是p才行)

 

p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)

p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)　

 

**选第N个**

p:nth-child(n)   　选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n)   ..............................................从最后一个子元素开始计数

p:nth-of-type(n)　  选择其父元素的n个元素

p:nth-last-of-type(n)  ........................从最后一个子元素开始计数

14、CSS实现水平/垂直水平居中

css的居中，可以分为水平居中和垂直居中，实现居中的方式有以下几种：

块状元素，水平居中

以外边框为参照物，上下外边框距为0，左右外边框距浏览器会自动计算平分

通过设置行间距。line-height只适用于单行文本的元素，多行元素不适用。

4. 给父元素设置float：left ,然后父元素整体向左移动50%（position:relative;left:50%），这时父元素要清除浮动（clear：both）,然后再给子元素整体向左移动50%(position:relative;left:-50%)

给父元素一个相对定位relative，利用绝对定位absolute，配合margin：auto自动计算外边距（position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;）。相对于相对应于relative的绝对定位absolute，需要定宽。relative只是为了给子元素定位用的

使用百分比来绝对定位一个元素，并配合使用translate，将元素移动定位居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）。

如果不是table布局的话可以：,一样使用vertical-align:middle实现居中对齐

父元素使用display：flex,设置其属性justify-content.align-items都为center(display: flex; justify-content: center; align-items: center),实现水平居中

父元素使用flex布局（display：flex）,子元素使用margin：auto

15、简述一下src 与href的区别

href 是指向bai网络资源所在位置，建立和当du前元zhi素（锚点）或当前文档dao（链接）之间的链接，zhuan用于超链接。 src是指向外shu部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

16、什么是CSS hack

CSS hack 是CSS中的一bai种作弊手段，因为目前du所有浏览器并没有统一对zhiCSS的支持，例如同样dao是一个margin:1px，可zhuan能在不同的浏览器中出现的效shu果就一定是1px 在这种情况下，我们只能借助于CSS hack来暂时过渡这个阶段，CSS hack就比如是IE能认出的CSS语句，而FF不能认出，这样就能达到我们的目的了，css hack在很多高级的技巧中出现，不过并不是很推荐使用，毕竟未来的css趋势还不是很明了，尽量避免吧 因为很多css错位问题其实并不是浏览器的错误，而是我们本身的编辑出现的错误。

17、什么叫做优雅降级和渐进增强？

渐进增强和优雅降级是在CSS3出现之后才火起来的。由于低级浏览器，（特）比（别）如（是）IE6等，不支持CSS3的浏览器，但是CSS3的样式又特别优秀不忍放弃 ，所以在高级浏览器中应用CSS3样式，在低级浏览器只保证基本功能。

“渐进增强”是被Steven Champeon创造于2003年3月11日在奥斯汀的SXSW互动大会，并于2003年3月和6月间通过一系列Webmonkey教程文章的公布。 （我找了半天资料，翻了下英文文章也只找到这段历史，无奈脸），谷歌公司是很支持这种开发方式的啊，我认为渐进增强不仅是一个前端开发思想，更加是一个程序开发思想。

1.什么是渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

2.什么是优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

3.二者区别

1.）如果你采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。 你想一下不可能拿个基本功能版给客户看呀，多寒酸，搞不好一气之下就不找你做了，然后就炸了。但是呢，也有好处，就是提供了较好的平台稳定性，维护起来资金小， 长期来说降低开发成本。

2.）那采用优雅降级呢，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，然后就可以拿给PM找客户谈呀，可以拿去测试，市场试水呀，对于功能尚未确定的 产品，优雅降级不失为一种节约成本的方法。

从技术出发

前缀CSS3（-webkit- / -moz- / -o-*）和正常CSS3在浏览器中的支持情况是这样的：

1.很久以前：浏览器前缀CSS3和正常CSS3都不支持；

2.不久之前：浏览器只支持前缀CSS3，不支持正常CSS3；

3.现在：浏览器既支持前缀CSS3，又支持正常CSS3；

4.未来：浏览器不支持前缀CSS3，仅支持正常CSS3.

.transition { /渐进增强写法/

-webkit-border-radius:30px 10px;

-moz-border-radius:30px 10px;

border-radius:30px 10px;

}

.transition { /优雅降级写法/

border-radius:30px 10px;

-moz-border-radius:30px 10px;

-webkit-border-radius:30px 10px;

}

渐进增强和优雅降级如何抉择

四.解决方案

如果开发时间充裕，开发资金到位，就不存在抉择这个问题了，肯定是渐进增强好呀！

但是现实往往很骨感。

这个时候，就要看你开发产品的受众，受众使用的客户端。如果受众年龄覆盖面广，客户端从移动到平板到电脑，比如淘宝这种页面，那没得选，老老实实选渐进增强。

如果受众客户端单一，例如一个移动端页面，再渐进增强PC端就没那么重要了。

各有优势，但现实是绝大多数公司采用的都是渐进增强方式，毕竟业务优先，体验不会凌驾在业务上。

18、移动端适配怎么做？

移动端初始视口的大小为什么默认是980px？

因为世界上绝大多数PC网页的版心宽度为 980px ，如果网页没有专门做移动端适配，此时用手机访问网页旁边刚好没有留白，不过页面缩放后文字会变得非常小。

为了解决页面缩放的体验问题，在网页代码的头部，加入一行viewport元标签。

​这里的device-width告诉浏览器，将视口的宽度设置为设备宽度（这个宽度是人为预设的，不设的话就是980px）。 属性含义

    initial-scale：第一次进入页面的初始比例
    minimum-scale：允许缩小最小比例
    maximum-scale：允许放大最大比例
    user-scalable：允许使用者缩放，1 or 0 (yes or no)

img { max-width: 100%; } 此时图片会自动缩放，同时​图片最大显示为其自身的100%（即最大只可以显示为自身那么大） 为什么不用 img { width: 100%; } ？ 当容器大于图片宽度时，图片会无情的拉伸变形

为什么要媒体查询？

针对不用的设备提前为网页设定各种 CSS 样式CSS3中的Media Query模块，自动检测屏幕宽度，然后加载相应的CSS文件

语法举例

@media screen and (min-width:1200px){ 
        
        body{ 
                
            background-color: red; 
        }

当屏幕宽度大于1200px时，背景色变为红色

为什么要用rem？

和媒体查询配合，实现响应式布局

px、em、rem 有什么不同？

px是pixel（像素），是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px；em 是一个相对大小，相对于父元素font-size的百分比大小rem 是相对于根元素的font-size

用法示例

1、首先在HTML中设置一个基准值，如font-size: 100px;

2、将像素值除以100（设定的基准值）计算出对应的rem的值

如果一个div的宽度为600300px ,改为rem即为6rem3rem

3、根据当前屏幕的宽度和设计稿的宽度来计算此时的HTML的font-size的值

当前手机屏幕宽度为375px，设计稿宽度为640px，375/640*100->fontsize=58.59375

19、请问苹果原生浏览器中默认样式如何清除,例如input默认样式？

添加baicss样式: input[type=“button”], input[type=“submit”], input[type=“reset”] { -webkit-appearance: none; } textarea { -webkit-appearance: none;} 然后自己du定义样式，zhi美化dao修改就好了zhuan。

20、CSS清除浮动的方法

为什么会有 Floats

最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。但 大家很快意识到，它可以浮动任何东西，而不仅仅是图像，所以浮动的使用范围扩大了。

当我们在网页各处使用 float 的时候，也由此引发的一些副作用，如：父元素塌陷、元素重叠，清除浮动也就是清除这些副作用。

发生了什么

当一个元素被添加float:right等属性的时候发生了什么？

  1. float 属性可以使一个元素脱离正常的文档流（normal flow），然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。

  2. float 使用了块状布局，所以元素的 display 会被改变

而 float 元素脱离了 normal flow 就相当于进入了一个平行空间，不再与其后边及父级块级元素发生反应，这一特性使得 float 元素无法撑起父元素的高度，导致父元素塌陷。

第一点中还提到其他的文本和行内元素环绕 float元素，但是 float 后的块级元素会与其发生重叠。

怎么解决

为了解决 float 属性引发的问题，我们在 CSS 中引入了clear:left|right|both属性，其作用分别是在元素的 左侧|右侧|两侧 不允许存在 float 元素，我们可以用他来清除其副作用。 利用 clear 属性我们有两种方法来清除浮动。

  1. 为 float 元素后的元素添加 clear 属性

其效果如下： 未添加

添加后

  1. 利用伪元素

有时我们会遇到上图的情况，float 元素后没有其他元素了，这时该怎么办？固然我们可以在其后添加一个空div，然后像1中一样解决问题，但这种方式并不优雅，伪元素这时候就派上用场了，我们可以写一个.clearfix 工具样式，当给需要清除浮动时，就为其加上这个类。效果如下：

  1. 修改父元素的 owerflow 属性

将父元素的 owerflow 属性修改为 owerflow:auto|hidden

这就是三种最主流的方式

21、PC端常用的布局方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 宽度适配 */
            html,
            body {
                width: 100%;
                overflow-x: hidden;/* 外层盒子设置最小宽度的话看不到横向滚动条 */
            }

            /*1. pc端适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。
            2.放大或者缩小屏幕，网页可以正常显示 */
            /* 一、两列布局 */
            /* 1.左定宽 右边自适应 或者 右边定宽左边自适应 */
            .content{
                width: 1200px; /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: #fff;
            }
            .left {
                float: left;
                width: 200px;/* 定宽 */
                background: #ccc;
                height: 800px;/* 测试设了一个高度和背景（为了更好看效果） */
            }

            .right {
                margin-left: 100px;
                background: #999;
                height: 800px;/* 测试设了一个高度和背景（为了更好看效果） */
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="left">左边</div>
            <div class="right">右边</div>
        </div>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 宽度适配 */
            html,
            body {
                width: 100%;
                overflow-x: hidden;
                /* 外层盒子设置最小宽度的话看不到横向滚动条 */
            }
            /* 一、三列布局 */
            /* 1.左右定宽中间自适应 */
            .content {
                width: 1200px;
                /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: firebrick;/* 测试设了一个背景（为了更好看效果） */
                display: table;
            }

            .left {
                width: 100px;
                /* 定宽 */
                background: #ccc;
                height: 800px;
                /* 测试设了一个高度和背景（为了更好看效果） */
            }
            .right {
                width: 100px;
                /* 定宽 */
                background: fuchsia;
                height: 800px;
                /* 测试设了一个高度和背景（为了更好看效果） */
            }

            .left,
            .right,
            .center {
                display: table-cell;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="left">左边</div>
            <div class="center">中间</div>
            <div class="right">右边</div>
        </div>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rKiEJJwl-1650932058252)(https://riyugo.com/i/2021/02/21/12mawg6.png)]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实现三栏水平布局之双飞翼布局</title>
        <style type="text/css">
            .container {
                width: 1200px;
                /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: #ccc;
                /* 测试设了一个背景（为了更好看效果） */
            }

            .left,
            .center,
            .right {
                float: left;
                min-height: 400px;
                /* 测试更好观看效果 统一高度*/
                text-align: center;
            }

            .left {
                margin-left: -100%;
                background: #0000FF;
                width: 200px;
                /* 定宽 */
            }

            .right {
                margin-left: -300px;
                background-color: #FF0000;
                width: 300px;
                /* 定宽 */
            }

            .center {
                background-color: #f2f1f1;
                width: 100%;
            }

            .content {
                margin: 0 300px 0 200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            　　<div class="center">
                　　<div class="content">中间自适应</div>
            　  </div>
            　　<div class="left">左边</div>
            　　<div class="right">右边</div>
        </div>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzcjHXlK-1650932058253)(https://riyugo.com/i/2021/02/21/12n1c19.png)]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实现三栏水平布局之圣杯布局</title>
        <style type="text/css">
            .container {
                width: 1200px;
                /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: #ccc;/* 测试设了一个背景（为了更好看效果） */
                padding: 0 300px 0 200px;
            }

            .left,
            .center,
            .right {
                position: relative;
                min-height: 200px;
                float: left;
            }

            .left {
                left: -200px;
                margin-left: -100%;
                background: green;/* 测试设了一个背景（为了更好看效果） */
                width: 200px;
            }

            .right {
                right: -300px;
                margin-left: -300px;
                background: red;/* 测试设了一个背景（为了更好看效果） */
                width: 300px;
            }

            .center {
                background: blue;/* 测试设了一个背景（为了更好看效果） */
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            　　<div class="center">center</div>
            　　<div class="left">left</div>
            　　<div class="right">right</div>
        </div>
        <div class="tip_expand">双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了</div>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hbR5LcDB-1650932058255)(https://riyugo.com/i/2021/02/21/12nn9gc.png)]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实现三栏水平布局-Flex布局</title>
        <style type="text/css">
            .container {
                display: flex;
                width: 1200px;
                /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: #ccc;
                /* 测试设了一个背景（为了更好看效果） */
                min-height: 800px;
                font-size: 0; /* 间隙处理 */
            }

            .main {
                flex-grow: 1;
                background-color: blue;
                font-size: 24px;
            }

            .left {
                order: -1;/* 对于order属性：定义项目的排列顺序，越小越靠前，默认为0。 */
                flex-basis: 200px;/* 通过项目属性flex-basis 设置left和right的固定宽度 */
                background-color: green;
                font-size: 24px;
            }

            .right {
                flex-basis: 300px;/* 通过项目属性flex-basis 设置left和right的固定宽度 */
                background-color: red;
                font-size: 24px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            　　<div class="main">main</div>
            　　<div class="left">left</div>
            　　<div class="right">right</div>
        </div>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cHhbQEwC-1650932058256)(https://riyugo.com/i/2021/02/21/12o5tc7.png)]

22、布局左边20%，中间自适应，右边200px，不能用定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局:左右两列200px,中间列自适应（一）</title>
    <style type="text/css">
       body {
            margin: 0;
            display: flex;
        }

        .left {
            width: 20%;
            height: 200px;
            background: red;
        }

        .center {
            height: 400px;
            background: blue;
            flex-grow: 1;
        }

        .right {
            width: 200px;
            height: 600px;
            background: pink;
        }
    </style>
</head>

<body>
    <div class='left'>left</div>
    <div class='center'>center</div>
    <div class='right'>right</div>
    
    
    

   


</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vnUPPob9-1650932058257)(https://riyugo.com/i/2021/02/21/1308wks.png)]

23、行内元素和块级元素？img算什么？行内元素怎么转化为块元素？

。****

。

应是行内元素，判断一个元素是行内元素，还是块元素，无非就是看它是否是独占一行。img标签显然没有独占一行，固它是行内元素。这没有问题。

尽管img是行内元素，但同时它也是置换元素，置换元素一般内置框高属性，因此可以设置其框高。

置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。

比如img根据src属性来显示，input根据value属性来显示，因此可知道img和input是置换元素，当然同理textarea, select,也是置换元素；

行内如何转块级元素

以下汇总三种行内元素转为块级元素的方法：

（1）display

（2）float

（3）position（absolute和fixed）

代码

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>行内元素转为块级元素</title>
 7     <style type="text/css">
 8         *{
 9             margin: 0;
10             padding: 0;
11             font-size: 20px;
12             color: red;
13         }
14         div{
15             margin-top: 20px;
16         }
17         a{
18             display:block;
19         }
20         span{
21             float: left;            
22         }
23         i{
24             position:absolute;
25         }
26     </style>
27 </head>
28 <body>
29     <div>
30         方法一：使用display
31     </div>
32     <a href="#">a标签转为块级元素</a>
33     <div>
34         方法一：使用float
35     </div>
36     <span>span标签转为块级元素</span>
37     <div>
38         方法一：使用position（absolute和fixed）
39     </div>
40     <i>i标签转为块级元素</i>
41 </body>
42 </html>

24、将多个元素设置为同一行?清除浮动的几种方式？

1.将多个元素设置为同一行：float，inline-block

清除浮动的方式：

方法一：添加新的元素 、应用 clear：both；

方法二：父级div定义 overflow: hidden；

方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。

.clear{zoom:1;}

.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

25、怪异盒模型box-sizing？弹性盒模型|盒布局?

在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。

26、简述几个CSS hack?

在div中插入图片，图片会将div下方撑大3px。

hack1：将

与 写在同一行。

hack2：给添加display：block；

dt li 中的图片间隙。

hack：给添加display：block；

，IE6以下版本中，部分块元素，拥有默认高度（低于18px）

hack1：给元素添加：font-size：0；

hack2：声明：overflow：hidden；

表单行高不一致

hack1：给表单添加声明：float：left；height： ；border： 0；

鼠标指针

hack：若统一某一元素鼠标指针为手型：cursor：pointer；

当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状

hack1：给a加display：inline-block；

hack2：给li加float：left；

27、 title和alt的区别？

alt属性

  • Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。
  • 使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。
  • 文字的图像图片设置替换文字是最简单的，图像中包含的文字一般来说就可以作为alt属性值。Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

  • title属性为设置该属性的元素提供建议性的信息。
  • title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。
  • 使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息，然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。
  • title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。

28、什么是CSS3 transform? animation? 区别是什么？

CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。
1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
div{
　　transform:scale(2);
}
transition和animation两者都能实现动画效果
transform常常配合transition和animation使用

2、transition样式过渡，从一种效果逐渐改变为另一种效果
transition是一个合写属性

transition:transition-property transition-duration transition-timing-function transition-delay
从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间

div{
    width：100px;
    height:100px;
    transition:transform 2s;
}
div：hover{
    transform:rotate(180deg);
}
transition通常和hover等事件配合使用，需要由事件来触发过渡

我们知道 transition 虽然简单好用，但是我们会发现它受到各种限制。

1：transition需要一个事件来触发，比如hover，所以没法在网页加载时自动发生
2: transition是一次性的，不能重复发生，除非一再触发。
3： transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4：一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
3、animation动画 由@keyframes来描述每一帧的样式

div{
　　animation:myAnimation 5s infinite
}
@keyframes myAnimation {
　　0%{left:0;transform:rotate(0);}
　　100%{left:200px;transform:rotate(180deg);}
}
区别：
-（1）transform仅描述元素的静态样式，常常配合transition和animation使用
-（2）transition通常和hover等事件配合使用，animation是自发的，立即播放
-（3）animation可设置循环次数
-（4）animation可设置每一帧的样式和时间，transition只能设置头尾
-（5）transition可与js配合使用，js设定要变化的样式，transition负责动画效果，如：

animation属性类似于transition，他们都是随着时间改变元素的属性值，

其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；
animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
1）动画不需要事件触发，过渡需要。
2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。

29、nth-of-type和nth-child的区别是什么？

  • :nth-child(n)选择器，该选择器选取父元素的第n 个子元素，。
  • :nth-of-type(n)选择器，选择器选取父元素的第 n 个的子元素。
<h1>这是标题</h1>



<p>第一个段落。</p>



<p>第二个段落。</p>



<p>第三个段落。</p>



<p>第四个段落。</p>



<p>第五个段落。</p>

1, p:nth-child(3n+1) 包含

这是标题

2, p:nth-of-type(3n+1) 不包含

这是标题

，只选择p元素

使用公式 (an + b)。描述：表示周期的长度,n 是计数器（从 0 开始）,b 是偏移值。
odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

30、:before 和 ::before区别是什么？

解答要点

    1. 都可以用来表示伪类对象，用来设置对象前的内容
    2. :befor和::before写法是等效的
    1. :befor是Css2的写法，::before是Css3的写法
    2. :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

31、如何让一个div 上下左右居中?

​ 【绝对定位50%-本身50%】

​ position:absolute; left:50%; top:50%;

​ transform: translate(-50%,-50%);


.div1{ 
          width:400px; 
          height:400px;
          border:#CCC 1px solid; 
          background:#99f; 
          position:absolute; left:50%; top:50%;/*绝对定位*/
          transform: translate(-50%,-50%); 
/*translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动*/
} 
 
<div class="div1"></div>

32、 解释下 viewport

大家知道手机的屏幕尺寸的尺寸较小，iphone5的话是320×568，然后iPhone6是375×667，这怎么小的宽度范围内，如果显示PC端的网页，如果没有做处理的话，那可能显示出来的网页会挤成一团，所以手机厂商为浏览器默认设置了一个虚拟的容器，叫布局视图(layout viewport)，这个容器足够宽，且不依赖于手机屏幕的宽度，能够直接把PC上的网页放进来而不变形，iPhone上这个容器大于等于980px，你能在这个网页上双击放大任意区域来显示局部最合适的大小。

这个时候介绍另外的东西，叫做可视视图(visual viewport)，这个是指你屏幕上浏览器显示区域的宽度，也就是它，决定一个屏幕能够显示的最大宽度（手指放大浏览器局部的时候，能够显示的宽度会变小），但是用户的放大缩小并不影响浏览器运行后的最大可视宽度，这个视图需要开发者进行设定，并且会受到网页内最长的可见元素的影响。

随着移动端的崛起，各个网站需要为移动端制作专门的网页，如果还是以手机虚拟容器的宽度为标准进行适配，那就是不合适的，我们需要让这个布局视图能够适应屏幕的大小，用户不用调整网页的大小就能看到一张尺寸合适的完整网页，而且能够保证显示效果的一致性，同样一个14px的文字或图片，在普通屏和高清屏上，我们看到的都是相对一致的大小。我们需要找到一个纽带，连接虚拟世界和真实世界的尺寸，进行适配。而设备自身的宽度是最合适的，确定的这个宽度的视图，被称为理想视图(ideal viewport)。

如果我们将能够显示的最大宽度设置为手机的宽度，并且将布局宽度也设定为

标签： 交流变送器参数2d型位移变送器cp100变送器zh200重量变送器微压压力变送器留言

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台