编程技术

Document

HTML && CSS

HTML5 新特性、语义化

  1. 概念：

    HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】

  2. 语义化标签：

    header nav main article section aside footer

  3. 语义化的优点:

    • 在没CSS样式的情况下，页面整体也会呈现很好的结构效果

    • 代码结构清晰，易于阅读，

    • 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。

    • 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

HTML5新特性有哪些

  • 语义化标签

  • 音视频处理API(audio,video)

  • canvas / webGL

  • 拖拽释放(Drag and drop) API

  • history API

  • requestAnimationFrame

  • 地理位置(Geolocation)API

  • webSocket

  • web存储 localStorage、SessionStorage

  • 表单控件，calendar、date、time、email、url、search

渐进增强与优雅降级的理解及区别

渐进增强（Progressive Enhancement）： 一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）： 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。 两者区别 1、广义： 其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级 2、狭义： 渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。

/* 例子 */
.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}
​

常见的兼容性问题

  1. 不同浏览器的标签默认的margin和padding不一样：* {margin:0;padding:0;}

  2. IE6双边距bug：块属性的元素采用float布局后，又有横行的margin情况下，在IE6显示margin比设置的大。添加display:inline; display:table;

  3. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度：给超出高度的标签设置overflow:hidden或者设置行高line-height 小于你设置的高度。

  4. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

  5. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

  6. 图片默认有间距：使用float属性为img布局

  7. 标签最低高度设置min-height不兼容：如果要设置一个标签的最小高度为200px，需进行设置

min-height: 200px;
height: auto !important;
height: 200px;
overflow:visible;

8. 透明度的兼容CSS设置：一般在IE中使用filter: alpha(opacity=0)和一般就是直接使用opacity: 0

9. 图片下方多了三像素原因及解决办法

产生原因：主要是因为图片的垂直对齐方式vertical-align引发的，默认值是baseline，默认为此值时图片下方就会多出3px

解决：display:block、vertical-align: middle;

10. Google表单元素获取焦点有边框线

解决：outline: none

11. IE表单元素去掉边框 border:none 不兼容IE低版本

解决：border:0;

12. IE表单元素加高度后所有浏览器默认内容垂直居中 不兼容IE低版本

解决：加行高line-height

13. IE<a>标签包图片会有边框

解决：图片border:0

14. 每个浏览器的css默认样式不尽相同，对其进行初始化进行覆盖，可以使用normalize.css库

响应式设计

响应式网站设计是一种网络页面设计布局，网页的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，使一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta标签声明viewport：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

实现响应式布局的方式：

  • 媒体查询

  • 百分比

  • vw/vh

  • rem

常用的meta标签

meta标签由name和content属性定义，用于描述网页文档的属性 常用meta标签的name属性取值：

  • charset html：文档编码类型

  • keywords：页面关键词

  • description：页面描述

  • refresh：页面刷新和重定向

  • viewport：适配移动端，可以控制视口的大小和比例

  • robots：搜索引擎索引方式

iframe标签

iframe就是HTML中，用于网页嵌套网页的。一个网页可以嵌套到另一个网页中，可以嵌套很多层。

  • iframe会阻塞主页面的onLoad事件

  • 搜索引擎的检索程序无法解读这种页面，不利于SEO

  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

  • 使用iframe最好通过js动态给iframe添加src属性值

script标签中defer和async区别

如果无defer或async属性，浏览器会立即加载并执行相应的脚本，就不会等待后续加载的文档元素，阻塞了后续文档的加载 defer和async都是异步加载外部的JS脚本文件，不会阻塞页面解析

  • 执行顺序：多个带async属性的标签不能保证加载顺序；多个带defer的标签按照加载顺序执行

  • 脚本是否并行执行：async表示后续文档的加载和执行与js脚本的加载和执行是并行进行的；defer属性的后续文档和js脚本加载是并行进行的，js脚本的执行在文档所有元素解析完成之后、DOMContentLoaded事件触发之前执行

对BOM的理解

BOM是浏览器对象模型，提供了内容与浏览器窗口进行交互的对象

常见BOM对象：

  • window

  • location

  • navigator

  • screen

  • history

默认情况下，哪些HTML标签是块级元素、内联元素、空元素？

  • 内联(行内)元素有：a b span img input select strong

  • 块级元素有：div ul ol li dl dt dd h1~h6 p

  • 常见的空元素：<br>、<hr>、<img>、<input>、<link>、<meta>

offset、client、scroll的用法

  • offset系列：用于获得元素位置，如offsetLeft、offsetTop

  • client系列：用于获取元素大小，如clientWidth、clientHeight

  • scroll系列：用于获取滚动距离，如scrollTop、scrollLeft

src & href

src用于替换当前元素，将指向的外部资源嵌入当前标签所在位置 href用于在文档和引用资源之间确立联系，href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

DOCTYPE作用

告诉浏览器应该以什么样的文档类型定义来解析文档

head标签作用

head标签用于定义文档的头部，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等 base/link/meta/script/style/title标签可用在head部分 其中title标签定义文档的标题，必不可少

canvas和svg区别

canvas使用js在网页上绘制图像，逐像素进行渲染，位置发生改变则重新绘制，依赖分辨率，不支持事件处理器， 能以.png或.jpg格式保存结果图像。适合图像密集型游戏 SVG用于定义用于网络的基于矢量的图形，使用XML格式定义图形，每个图形均被视为对象，svg对象的属性发生变化浏览器能自动重现，不依赖分辨率，支持事件处理器。适合谷歌地图等，不适合游戏应用

对web worker的理解

web worker是运行在后台的js，独立于其他的脚本，不会影响页面的性能，通过postMessage将结果传回主线程，这样在进行复杂操作的时候不会阻塞主线程 创建web worker:

  • 检查浏览器支持性

  • 创建web worker文件(js,回传函数等)

  • 创建web worker对象

WebSocket的理解

WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通信的网络技术。依靠这种技术可以实现客户端与服务器的长连接，双向实时通信。

特点：

  • 事件驱动

  • 异步

  • 使用ws或者wss协议的客户端socket

  • 能够实现真正意义上的推送功能

缺点：少部分浏览器不支持，浏览器支持的程度与方式有区别

CSS 选择器及优先级

选择器

  • id选择器(#myid)

  • 类选择器(.myclass)

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

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

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

  • 相邻选择器（h1 + p）

  • 子选择器(ul > li)

  • 后代选择器(li a)

  • 通配符选择器(*)

优先级：

  • !important

  • 内联样式（1000）

  • ID选择器（0100）

  • 类选择器/属性选择器/伪类选择器（0010）

  • 元素选择器/伪元素选择器（0001）

  • 关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS3新特性

  • 过渡

/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/ 
transition：all,.5s

  • 动画

//animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;

  • 形状转换

//transform:适用于2D或3D转换的元素
//transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)
transform:translate(30px,30px);
transform:rotate(30deg);
transform:scale(.8);

  • 选择器:nth-of-type()

  • 阴影 文字阴影: text-shadow: 2px 2px 2px #000;(水平阴影，垂直阴影，模糊距离，阴影颜色) 盒子阴影: box-shadow: 10px 10px 5px #999

  • 边框 border-image: url(border.png);

  • 背景

  • 文字

  • 渐变

  • Filter（滤镜）

  • 弹性布局、栅格布局、多列布局

  • 媒体查询

伪元素和伪类的区别和作用？

  • 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。

  • 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪"元素。

display属性值及其作用、block/inline/inline-block的区别

none: 元素不显示且从文档流中移除 flex: 采用flex布局 inherit: 继承父元素display属性的值 block：块类型 默认宽度为父元素宽度 可设置宽高/margin/padding 独占一行 inline：行内类型 默认宽度为内容宽度 不可设置宽高 可设置水平方向的margin/padding 同行显示 inline-block: 行内块类型 默认宽度为内容宽度 可设置宽高 同行显示

position 属性的值有哪些及其区别

固定定位 fixed： 元素的位置固定于浏览器可视区的位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。应用场景：在浏览器页面滚动时元素位置不发生改变。跟父元素没有任何关系，不随滚动条滚动。

相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute： 绝对定位的元素的位置是相对其最近的非static定位祖先元素偏移。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky：元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。以浏览器的可视窗口为参照偏移，保留原来的位置，必须指定top/bottom/left/right其中一个才有效。需要跟页面滚动搭配使用。兼容性差，IE不支持

默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

box-sizing属性

box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】

border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】

inherit：继承父元素的 box-sizing 值。

CSS 盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。 在标准的盒子模型中，width 指 content 部分的宽度。 在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

故在计算盒子的宽度时存在差异：

标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)

IE盒模型： 一个块的总宽度 = width+margin（左右）（width 已经包含了 padding 和 border 值）

BFC（块级格式上下文）

BFC的概念

BFC 是 Block Formatting Context的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。

BFC的原理布局规则

  • 内部的Box会在垂直方向，一个接一个地放置

  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反

  • BFC的区域不会与float box重叠

  • BFC是一个独立容器，容器里面的子元素不会影响到外面的元素

  • 计算BFC的高度时，浮动元素也参与计算高度

  • 元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

哪些元素会生成BFC/如何触发BFC？

  • 根元素，即HTML元素

  • float的值不为none的元素

  • position为absolute或fixed的元素

  • display的值为inline-block、table-cell、table-caption、flex、inline-flex的元素

  • overflow的值不为visible的元素

BFC的使用场景

  • 去除边距重叠现象

  • 清除浮动（让父元素的高度包含子浮动元素）

  • 避免某元素被浮动元素覆盖

  • 避免多列布局由于宽度计算四舍五入而自动换行

让一个元素水平垂直居中

  • 水平居中

    • 方法1：【移动推荐】display: flex; justify-content:center;

    • 方法2：【需要宽高】利用position定位，left: 50%，margin-left：负自身一半

    • 方法3：【需要宽高】利用position定位，right/left: 0，然后 margin: auto

    • 方法4：【留心兼容】利用position定位，transform: translate(-50%,0)

    • 方法5：【行内元素】text-align:center

    • 方法6：【块级元素】margin:auto

  • 垂直居中

    • 方法1：【移动推荐】display: flex; align-items: center;

    • 方法2：【需要宽高】利用position定位，top: 50%，margin-top: 负自身一半

    • 方法3：【需要宽高】利用position定位，top/bottom: 0，然后 margin: auto

    • 方法4：【留心兼容】利用position定位，transform: translate(0, -50%);

    • 方法5：【文本居中】line-height设置为height值

  • 水平且垂直居中

    • 方法1：【移动推荐】display: flex; justify-content: center; align-items: center;

    • 方法2：【需要宽高】利用position定位，top: 50%; left: 50%; margin-top: 负自身一半; margin-left: 负自身值一半

    • 方法3：【需要宽高】利用position定位，top: 0; right: 0; bottom: 0; left: 0，然后 margin: auto

    • 方法4：【留心兼容】利用position定位，calc((100% - 100px) / 2);

    • 方法5：【留心兼容】利用position定位，transform: translate(-50%,-50%)

    position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

隐藏页面中某个元素的方法

1.opacity：0，该元素隐藏起来了，但不会改变页面布局，仍占据页面空间，并且，如果该元素已经绑定 一些事件，如click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，继承属性，不会改变页面布局，在文档布局中仍保留原来的空间，但是不会触发该元素已经绑定的事件 ，（重绘）

3.display：none，脱离文档流，不占据页面空间，不响应绑定的监听事件，非继承属性，会改变页面布局（回流+重绘）

4.position: absolute， 使用绝对定位将元素移除可视区域内，不占据页面空间

5.z-index: 负值，使其他元素遮盖住该元素

6.transform: scale(0,0)，将元素缩放为0，占据页面空间，不响应绑定的监听事件

单行、多行文本溢出隐藏

单行文字：

  • 先强制一行内显示文本：white-space: nowrap;

  • 超出的部分隐藏：overflow: hidden;

文字用省略号代替超出的部分：text-overflow: ellipsis; 多行文字：

overflow: hidden;
text-overflow: ellipsis;
<!-- 弹性伸缩盒子模型显示 -->
display: -webkit-box;
<!-- 限制在一个块元素内的显示的文本的行数 -->
-webkit-line-clamp: 2;
<!-- 设置或检索伸缩盒子对象的子元素的排列方式 -->
-webkit-box-orient: vertical;

用CSS实现三角符号

/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
/*需要哪个方向的三角形 就让其他三个方向边框颜色为transparent*/
div:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

页面布局

1.Flex 布局

对flex布局的理解：flex 布局是 CSS3 新增的一种自适应布局方式，可以通过将一个元素的 display 属性值设置为 flex 从而使它成为一个 flex 容器，它的所有子元素都会成为它的项目。一个容器有主轴和侧轴,flex-direction指定主轴的方向,justify-content 来指定元素在主轴上的排列方式,align-items 来指定元素在侧轴上的排列方式。flex-wrap指定换行方式。对于容器中的项目，可以使用 order 属性来指定项目的排列顺序，还可以使用 flex-grow 来指定当排列空间有剩余的时候，项目的放大比例，还可以使用 flex-shrink 来指定当排列空间不足时，项目的缩小比例。flex布局常用于两列或三列布局且自适， 移动端常用。

容器的属性：

  • flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;

  • flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;

  • flex-flow：是flex-direction和flex-wrap的缩写 ，例：flex-flow: row nowrap

  • justify-content：主轴对齐方式，即设置同一行子元素在X轴的对齐方式

  • align-items：侧轴对齐方式，即设置同一行子元素在Y轴的对齐方式

  • align-content:该属性无法作用于flex-wrap:nowrap的弹性盒子，设置对象是多行弹性盒子容器中的所有行，设置同一列子元素在Y轴的对齐方式

项目的属性（元素的属性）：

  • order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0

  • flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大

  • flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义一个 item 的 flow-shrink 为 0，则为不缩小

  • flex-basis 属性：定义了在分配多余的空间时项目占据的空间。

  • flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。

  • align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖。一个元素设置了align-self后，其父元素设置的align-items属性对该属性无效

  • align-items，默认属性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

2.Rem 布局

首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例 如:font-size:10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。

优点：可以快速适用移动端布局，字体，图片高度

缺点：

①目前 ie 不支持，对 pc 页面来讲使用次数不多； ②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配； ③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

3.百分比布局

通过百分比单位 " % " 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。 直观的理解，我们可认为子元素的百分比完全相对于直接父元素，height 百分比相 对于 height，width 百分比相对于 width。 padding、border、margin 等等不论是垂直方向还是水平方向，都相对于直接父元素的 width。 除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身的。

缺点：

（1）计算困难 （2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。

4.浮动布局

浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。

优点

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

两栏/三栏布局的实现

两栏布局：一侧宽度固定 另一侧自适应

  • 左侧盒子浮动，右侧盒子宽度100%

  • 父级盒子position:relative，固定的盒子position:absolute，另一侧宽度100%且margin-left、margin-right为固定一侧的宽度

  • 父级display:flex，justify-content:space-between

三栏布局：左右两侧宽度固定，中间自适应，中间一栏最先加载和渲染（中间内容最重要）

  • 左盒子左浮动，右盒子右浮动，中间宽度100%。注意html结构左右中

<div class="left" />
<div class="right" />
<div class="middle" />

  • 父级position:relative，左右两侧position:absolute， 中间宽度100%且mairgin-left:左盒子宽、margin-right:右盒子宽。html结构左中右

  • 父级display:flex，中间盒子flex:1

圣杯布局：

利用浮动和负边距来实现

父级元素设置左右的padding，三列均设置靠左浮动

中间一列html结构放在最前面，宽度设置为100%，因此后面两列都被挤到了下一行

通过设置左右两列的margin为负值将其移动到上一行，再利用相对定位，定位到两边

.outer {
    height: 100px;
    padding-left: 100px;
    padding-right: 200px;
}
.left {
    position: absolute;
    left: -100px;
    float: left;
    margin-left: -100%;
    width: 100px;
    height: 100px;
    background: tomato;
}
.right {
    position: absolute;
    left: 200px;
    float: left;
    margin-left: -200px;
    width: 200px;
    height: 100px;
    background: gold;
}
.center {
    float: left;
    width: 100%;
    height: 100px;
    background: lightgreen;
}

原理：当给margin添加百分比值时根据父元素的宽度进行计算，当为左侧盒子设置margin-left: -100%后，left刚好被移动到上一行相同位置，而right不需要移动到上一行相同位置，只需要在自身上一行就行，所以只需要设置margin-left为自身宽度的负值后自动会往上一行排

双飞翼布局：

双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的。本质上来说也是通过浮动和外边距负值来实现的

.outer {
    height: 100px;
}
.left {
    float: left;
    margin-left: -100%;
    width: 100px;
    height: 100px;
    background: tomato;
}
.right {
    float: left;
    margin-left: -200px;
    width: 200px;
    height: 100px;
    background: gold;
}
.wrapper {
    float: left;
    width: 100%;
    height: 100px;
    background: lightgreen;
}
.center {
    margin-left: 100px;
    margin-right: 200px;
    height: 100px;
}

如何使用rem或viewport进行移动端适配

rem适配原理：

改变了一个元素在不同设备上占据的css像素的个数

rem适配的优缺点

  • 优点：没有破坏完美视口

  • 缺点：px值转换rem太过于复杂(下面我们使用less来解决这个问题)

viewport适配的原理

viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的

viewport适配的优缺点

  • 优点：在我们设计图上所量取的大小即为我们可以设置的像素大小，即所量即所设

  • 缺点：破坏完美视口

清除浮动的方式

由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。

  • 添加额外标签：为最后一个浮动元素后面添加一个块级元素的空标签，为这个标签添加clear: both属性

<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

  • 父级添加overflow: hidden，或者设置高度

  • 建立伪类选择器清除浮动

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
    content: '';
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
}

margin重叠问题及如何解决

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并

  • 相邻块元素垂直外边距合并： 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距，下面的元素有上外边距，它们之间的垂直间距是两个值中较大者 解决办法：只给一个盒子添加下外边距或者上外边距

  • 嵌套块元素塌陷： 对于嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷二者值中较大的外边距值 解决办法：

  • 为父元素定义border-top,颜色取transparent（透明）

  • 为父元素定义padding-top

  • 为父元素添加overflow:hidden属性避免外边距合并（塌陷）问题 √

  • 浮动、固定、绝对定位的盒子不会有塌陷问题

px、em、rem的区别及使用场景

  • px是固定的像素 设置后不适应页面改变

  • em相对于父元素font-size(一般都是body)

  • rem相对于根元素html的font-size

移动端相关

  • window.screen.height获取屏幕高度

  • window.innerHeight获取网页视口高度

  • document.body.clientHeight获取body高度

  • vw：网页视口宽度的1/100

  • vh：网页视口高度的1/100

  • vmax：取vw和vh中的最大长度

  • vmin：取vw和vh中的最小长度

  • vw、vh和%百分比的区别：

%百分比是相对于父元素的大小设定的比率，vw和vh是视窗大小决定的

vw和vh优势在于能够直接获取长度，而用%百分比在没有设置body高度的情况下是无法正确获取可视区域的高度的

如何解决1px问题？

1px问题：css中的1px并不能和移动设备上的1px划等号 这个比例关系用属性dpr描述 pc端最小识别像素1px 移动端不同手机浏览器对小数点像素的处理也各不相同

  • 伪元素+css3缩放

.container {
  position: relative;
}
.container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid gray;
  transform: scale(0.5);
  transform-origin: 0 0
  box-sizing: border-box; //为了与原元素等大
}

可行性高 兼容性好 但代码量多

  • flexible适配方案 设置meta标签中viewport中的initial-scale的值为1/dpr 页面统一使用rem布局 viewport宽度变化会动态影响html元素中的font-size值，以此来实现适配 缺点是整个页面包括一些不需要被缩小的内容都被无差别缩放了

margin(top,left,right,bottom)设置负值有何效果？

  • margin-left为负值时，自身元素会向左移动

  • margin-top为负值时，自身元素会向上移动。

  • margin-right为负值时，自身元素不受影响，但是相邻元素会向左移动。

  • margin-bottom为负值时，自身元素不受影响，但是相邻元素会向上移动。

  • position: absolute时，margin-right和margin-bottom为负值时，自身元素会受影响。

line-height的继承问题

1.具体数值（子元素未设置具体行高数值，会自动继承父元素的行高）
2.按比例（子元素未设置行高，父元素行高为1.5或2）

计算：子元素行高会先继承父元素行高的1.5或2，然后和子元素字体大小（font-size）相乘。

3.百分比（子元素不会直接继承父元素行高，而是等父元素字体大小*行高百分比计算后在继承）

计算：子元素行高= 父元素字体大小（font-size）*行高百分比。

link和@import区别

  • 功能角度：@import是css的语法规则，而link是html标签，所以link不仅可以加载css，而@import只能导入css

  • 加载顺序：加载页面时link标签引入的css被同时加载；@import引入的css将在页面加载完毕后被加载

  • 兼容角度：@import是css2.1才有的语法故只能在IE5+才能识别，link标签作为html元素不存在兼容性问题

  • DOM操作：可以通过js操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式

  • 优化角度：link可以加载一些预解析的标签，而@import没有它强

什么情况下 z-index 会失效？

  1. 标签元素的z-index属性值低于父元素 --->提高父标签的z-index值

  2. 标签没有设置定位（position）属性 --->浮动元素添加position属性（如relative，absolute等）；

  3. 标签含有浮动(float)属性。 --->除去浮动

  4. 父标签 position属性为relative --->父标签改为absolute

画一条0.5px的线

  • 移动端：meta viewport设置initial-scale=0.5 画一条1px的边框就会变成0.5px的线

  • transform: scale(0.5, 0.5)

  • 设置box-shadow属性的第二个参数为0.5px 表示阴影的垂直方向的偏移为0.5px

CSS哪些属性可以继承？哪些属性不可以继承？

可继承的样式：

  1. font-size

  2. font-family

  3. color

  4. text-indent

  5. text-align

  6. line-height

  7. text-transform

  8. font-weight

不可继承的样式：

  1. border

  2. padding

  3. margin

  4. width

  5. height

CSS预处理器Sass、Less、Stylus的区别

什么是CSS预处理器?

CSS预处理器是一种语言用来为CSS增加一些编程的特性，无需考虑浏览器兼容问题，例如你可以在CSS中使用变量，简单的程序逻辑、函数等在编程语言中的一些基本技巧，可以让CSS更加简洁，适应性更强，代码更直观等诸多好处 基本语法区别：

Sass是以.sass为扩展名，Less是以.less为扩展名，Stylus是以.styl为扩展名 变量的区别：

Sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的。 Less 变量是以@开头的，其余sass都是一样的。 Stylus 对变量是没有任何设定的，可以是以$开头或者任意字符，而且变量之间可以冒号，空格隔开，但是在stylus中不能用@开头 三种预处理器都有：嵌套、运算符、颜色函数、导入、继承、混入。Stylus还有一些高级特性。例如循环、判断等

后处理器如postCss，常用于给css属性添加浏览器私有前缀实现跨浏览器兼容性问题

CSS提高性能的方法

  1. 内联首屏关键CSS(style属性指定内联样式)

  2. 异步加载css

  3. 资源压缩

  4. 合理使用选择器

  5. 减少使用昂贵的属性

  6. 不要使用@import

css hack是什么？

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

条件hack、属性级hack、选择符级hack

选择器 {
    height:32px;
    background-color:#f1ee18;    /*所有识别*/
    .background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;   /*IE6、7识别*/
    _background-color:#1e0bd1;   /*IE6识别*/
}