页面布局(html/css)

面试题标题前 Emoji 含义

⭐ 表示重点问题。------------------------（必须熟练掌握）
✔️ 表示普通问题。---------------------- （内容不会轻易变动）
❓ 表示此问题还需完善。-----------------（后面会对内容进行完善）
❗ 表示此问题已经过时。-----------------（过时问题不会被剔除，一直存在）

⭐1、H5 新特性有哪些？

1. 拖拽释放(Drap and drop): API ondrop拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
2. 自定义属性：data-id
3. 语义化更好的内容标签：header,nav,footer ,aside, article, section等
4. 音频 ,视频(audio, video) ：如果浏览器不支持自动播放怎么办? 在属性中添加 autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)
5. 画布 Canvas
   - getContext() 方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
   - cxt.stroke() 绘制线条
   - canvas 和 image 在处理图片的时候有什么区别? image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上
6. 地理(Geolocation) API ：其实 Geolocation 就是用来获取到当前设备的经纬度（位置）
7. 本地离线存储 localStorage ：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除
8. sessionStorage ：该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
9. 表单控件： calendar , date , time , email , url , search , tel , file , number
10. 新的技术： webworker, websocket

⭐2、CSS3 新特性有哪些？

1. 颜色: 新增 RGBA 透明度 , HSLA 模式
2. 文字阴影(text-shadow)
3. 边框: 圆角(border-radius) 边框阴影 : box-shadow
4. 盒子模型: box-sizing
5. 背景:background-size background-origin background-clip 多背景图
6. 渐变: linear-gradient , radial-gradient
7. 过渡 : transition 可实现属性的渐变
8. 自定义动画 animate @keyfrom
9. 媒体查询 多栏布局 @media screen and (width:800px) { }
10. border-image 图片边框
11. 2D 转换/3D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12. 字体图标 iconfont/icomoon
13. 弹性布局 flex
14. 新增选择器：first-of-type last-of-type nth-of-type...
15. 服务端字体
16. wordwrap 变形

⭐3、如何使一个盒子水平、垂直居中？

方法一：绝对定位、左 50%、上 50%、margin-left：盒子宽的一半的负值、margin-top：盒子高的一半的负值

<div class="parent">
  <div class="child">我是子元素</div>
</div>

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  position: relative;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

方法二：绝对定位、上下左右为 0、margin：0 auto

<div class="parent">
  <div class="child">我是子元素</div>
</div>

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  position: relative;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

方法三：利用 display:table-cell

<div class="parent">
  <div class="child">我是子元素</div>
</div>

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  display: inline-block;
}

方法四：使用弹性盒实现、使用 display：flex、justify-content：center、align-items center

<div class="parent">
  <div class="child">我是子元素</div>
</div>

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

<div class="parent">
  <div class="child">我是子元素</div>
</div>

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid green;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  margin-top: 200px;
  margin-left: 200px;
}

方法六：使用定位及变形、给元素绝对定位左 50%、上 50%、transform：translate（-50% ，-50%）

<div class="parent">
  <div class="child">我是子元素</div>
</div>

.parent {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  position: relative;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

⭐4、如何实现双飞翼（圣杯）布局？

1.  利用定位实现两侧固定中间自适应

	- 父盒子设置左右 padding 值
	- 给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处
	- 中间盒子自适应

<div class="father">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

.father {
  height: 400px;
  background-color: darkcyan;
  position: relative;
  padding: 0 200px;
}
.left,
.right {
  width: 200px;
  height: 300px;
  background-color: darkgreen;
  position: absolute;
  top: 0;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.center {
  background-color: bisque;
  height: 300px;
}

2.  利用 flex 布局实现两侧固定中间自适应

	- 父盒子设置 display:flex;
	- 左右盒子设置固定宽高;
	- 中间盒子设置 flex:1 ;

<div class="father">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

.father {
  height: 400px;
  background-color: rgb(198, 222, 15);
  display: flex;
}

.left {
  width: 200px;
  height: 300px;
  background-color: rgb(27, 203, 132);
}
.right {
  width: 200px;
  height: 300px;
  background-color: rgb(53, 123, 199);
}
.center {
  flex: 1;
  background-color: rgb(209, 92, 211);
}

3. 利用 bfc 块级格式化上下文, 实现两侧固定中间自适应

	- 左右固定宽高，进行浮动
	- 中间 overflow: hidden;

<!-- 注意:left 和 right 必须放在 center 前面 -->
<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>

.father {
  height: 400px;
  background-color: pink;
}

.left {
  float: left;
  width: 200px;
  height: 300px;
  background-color: blue;
}

.right {
  float: right;
  width: 200px;
  height: 300px;
  background-color: blue;
}

.center {
  height: 400px;
  background-color: green;
  overflow: hidden;
}

⭐5、CSS 的盒模型的理解 ?

盒子模型（Box Modle）可以用来对元素进行布局，包括实际内容（content）、内边距（padding）、边框（border）、外边距（margin），这几个部分

盒子模型分为两种:

1. W3C 标准的盒子模型（标准盒模型）

2. IE 标准的盒子模型（怪异盒模型）

标准盒模型与怪异盒模型的表现效果的区别之处：

1. 标准盒模型中 width 指的是内容区域 content 的宽度、 height 指的是内容区域 content 的高度

标准盒模型下盒子的大小  = content + border + padding + margin

img

2、怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height 指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

img

除此之外，我们还可以通过属性box-sizing来设置盒子模型的解析模式可以为 box-sizing 赋两个值：

content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)。总宽=width+padding+border+margin

border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型，总宽 = width + margin

⭐6、CSS 选择器

常用选择器

id选择器:（#box）选择 id 为 box 的元素
类选择器:（.one）选择类名为 one 的所有元素
标签选择器:（div）选择标签为 div 的所有元素
后代选择器:（#box div）选择 id 为 box 元素内部所有的 div 元素
子选择器:（one>one_1）选择父元素为one的所有one_1 的元素
相邻同胞选择器:（one+two）选择紧接在one之后的所有two元素
群组选择器:（div,p）选择 div、p 的所有元素

css3新增

层次选择器:（p~ul）选择前面有 p 元素的每个 ul 元素

伪类选择器

:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的

CSS3新增

:first-child：父元素的首个子元素
:first-of-type:父元素的首个元素
:last-of-type:父元素的最后一个元素
:only-of-type:父元素的特定类型的唯一子元素
:only-child:父元素中唯一子元素
:nth-child(n):选择父元素中第N个子元素
:nth-last-of-type(n):选择父元素中第N个子元素，从后往前
:last-child:父元素的最后一个元素
:root:设置HTML文档
:empty:指定空的元素
:enabled:选择被禁用元素
:disabled:选择被禁用元素
:checked:选择选中的元素
:not(selector):选择非 <selector> 元素的所有元素

伪元素选择器

:first-letter:用于选取指定选择器的首字母
:first-line:选取指定选择器的首行
:before:选择器在被选元素的内容前面插入内容
:after:选择器在被选元素的内容后面插入内容

属性选择器

[attribute]:选择带有attribute属性的元素
[attribute=value]:选择所有使用attribute=value的元素
[attribute~=value]:选择attribute属性包含value的元素
[attribute|=value]:选择attribute属性以value开头的元素

CSS3新增

[attribute*=value]:选择attribute属性值包含value的所有元素
[attribute^=value]:选择attribute属性开头为value的所有元素
[attribute$=value]:选择attribute属性结尾为value的所有元素

优先级

！Important > 行内样式 > ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性权重

CSS 权重选择器优先级计算表格：

选择器	权重
继承 或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 style=" "	1,0,0,0
!important 重要的	∞ 无穷大

优先级注意点:

1. 权重是有 4 组数字组成,但是不会有进位。

2. 可以理解为类选择器永远大于元素选择器, id 选择器永远大于类选择器,以此类推..

3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

4. 可以简单记忆法: 通配符和继承权重为 0, 标签选择器为 1,类(伪类)选择器为 10, id 选择器 100, 行内样式表为 1000, !important 无穷大.

5. 继承的权重是 0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

div ul li	----- >	0,0,0,3
.nav ul li	----- >	0,0,1,2
a:hover	----- >	0,0,1,1
.nav a	----- >	0,0,1,1

有哪些选择符，优先级的计算公式是什么？行内样式和！important 哪个优先级高？

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS 新增伪类有那些？

哪些 css 属性可以继承？

⭐7、BFC

BFC 是什么?

BFC (Block Formatting Context)格式化上下文，指一个独立的渲染区域，或者说是一个隔离的独立容器可以理解为一个独立的封闭空间。无论如何不会影响到它的外面

BFC（Block Formatting Context），即块级格式化上下文，它是页面中一个独立的容器，容器中的元素不会影响到外面的元素

2、形成 BFC 的条件（包含但不限于）

• 根元素：即 HTML 元素
• float： 值为 left、right
• overflow ：除了 visible 以外的值(hidden，auto，scroll)
• display ：值为 inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• position ：值为 absolute 或 fixed

3、BFC 的特性

1）内部的 Box 会在垂直方向上一个接一个的放置。
2）垂直方向上的距离，margin 会重叠
3）bfc 的区域不会与 float 的元素区域重叠
4）计算 bfc 的高度时，浮动元素也参与计算
5）bfc 就是页面上的一个独立容器。
6）容器里面的子元素不会影响外面元素

4、BFC 解决什么问题？

1、解决边距重叠问题

  <style>
        .box0{
            /*  设box0为BFC元素 */
            overflow: hidden;
        }
        .box1{
            background: salmon;
            width: 200px;
            height: 100px;
            margin-bottom: 50px;

        }
        .box2{
            background: skyblue;
            width: 200px;
            margin-top: 100px;
            height: 100px;

        }
    </style>
  <div class="box0">
        <div class="box1"></div>
    </div>
 <div class="box2"></div>

2、制作两栏布局

3、清除元素内部的浮动

4、高度塌陷问题

❓ 8、浏览器运行机制

1. 创建 DOM 树
2. 构建渲染树，CSS渲染
3. 布局渲染，每个元素的大小、位置
4. 绘制渲染树、再画出来

✔️ 9、常见的布局方法有哪些？有那些优缺点？

常见的布局方式有浮动、定位、flex（弹性盒子）、grid（网格布局）、栅格系统布局

浮动：
  优点：兼容性好。
  缺点：浮动会脱离标准文档流，因此要清除浮动。只需要解决好这个问题即可。

绝对定位
  优点：快捷。
  缺点：导致子元素也脱离了标准文档流，可实用性差。

flex 布局（CSS3）
  解决上面两个方法的不足，flex 布局比较完美。移动端基本用 flex 布局。

grid网格布局（css3）
  很好用。代码量简化了很多。

栅格系统布局
  优点：可以适用于多端设备

✔️ 10、px 、rem、em、vh、vw 各自代表的含义？

px：绝对单位。页面按精确像素展示
em：相对单位。基准点为父节点字体的大小(父级未设置相对于浏览器默认字体尺寸)，如果自身定义了font-size则按自身来计算。整个页面内1em不是一个固定的值，元素的width/height/padding/margin用em的话是相对于该元素的font-size
rem：相对单位。可理解为`root em`, 相对根节点`html`的字体大小来计算，即1rem等于根元素元素的font-size大小
vh、vw：全称是 Viewport Width 和 Viewport Height，即视口的宽度和高度，1vh相当于视口高度的1%。

✔️ 11、隐藏页面元素有几种方式？有什么区别？

1. display:none (元素消失,不占有原来的位置)。显示元素使用display:block
2. visibility:hidden (只是单纯的隐藏,元素还是占位置)。显示元素使用visibility:visible
2. position:absolutely；定位 (top给成负值)
3. opacity:0; 透明度设置为0
4. overflow:hidden; 超出隐藏(高度设置为0)
5. 设置 height、width 模型属性为 0
6. clip-path 裁剪图形

关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

	display:none	visibility:hiddden	opacity:0
页面中是否存在	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

✔️ 12、什么是响应式设计？响应式设计的基本原理是什么？如何做？

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

响应式网站常见特点：

- 同时适配 PC + 平板 + 手机等
- 标签导航在接近手持终端设备时改变为经典的抽屉式导航
- 网站的布局会根据视口来调整模块的大小和位置

实现响应式布局的方式有如下：

- 媒体查询（我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表）
- 百分比
- vw/vh
- rem

响应式设计实现通常会从以下几方面思考：

- 弹性盒子（包括图片、表格、视频）和媒体查询等技术
- 使用百分比布局创建流式布局的弹性 UI，同时使用媒体查询限制元素的尺寸和内容变更范围
- 使用相对单位使得内容自适应调节
- 选择断点，针对不同断点实现不同布局和内容展示

⭐ 13、如何清除浮动？

1. 父级添加 after 伪元素

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /* IE6、7 专有 */
  zoom: 1;
}

2. 父级添加双伪元素

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

3. 可以给父级添加 overflow 属性，并将其属性值设置为 hidden、 auto 或 scroll
4. 额外标签法（w3c 推荐的方法）
   额外标签法也叫隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签（必须是块级元素）, 添加清除浮动样式。例如<div style=" clear:both"></div>,或者添加其他标签也可以
5. 父元素设置高度
6. 给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用

14、常见的行内元素、块级元素有哪些？分别有什么特征？

行内元素和块级元素指的是什么？

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

 行内元素只占它对应标签的边框所包含的空间。
 一般块级元素可以包含行内元素和其他块级元素。

1、块级元素（div,p,h1...h6,ol,ul,table）
每个块级元素都是独自占一行、元素的高度宽度都是可以设置的

2、行内元素（span,a,img,input,strong）
可以和其他元素处于一行上，元素的高度宽度顶部和底部边距不可设置

⭐15、position 定位有哪些属性及区别是什么？

relative:相对定位：元素本身位置会被保留，是根据自身0位置进行偏移
absolute:绝对定位：元素本身位置不被保留，根据离他最近的具有定位属性的父元素进行偏移，如果父级没有定位，那么会根据根元素进行偏移。
fixed:固定定位：元素本身位置不被保留，根据浏览器窗口进行偏移。
static:默认值、没有定位：元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit: 规定从父元素继承 position 属性的值。

✔️ 16、谈谈做好 seo 需要考虑什么?

- 语义化 html 标签
- 合理的 title, description, keywords;
- 重要的 html 代码放前面
- 少用 iframe, 搜索引擎不会抓取 iframe 中的内容
- 图片加上 alt

17、如何解决盒子塌陷

18、

19、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

1. IE: trident 内核
2. Firefox：gecko 内核
3. Safari:webkit 内核
4. Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核
5. Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)
6. Edge:Blink

20、每个 HTML 文件里开头都有个很重要的东西 Doctype ，知道这是干什么的吗？

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

21、Quirks 模式是什么？它和 Standards 模式有什么区别

从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规范上
的正确处理达到在指定浏览器中的程度。
在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差， IE6 将对 CSS
提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如
果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的
渲染机制呢？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，
尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某
个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能
不破坏原有的程序，又提供新功能。IE6 也是类似这样做的，它将 DTD 当成了这个“参数”，
因为以前的页面大家都不会去写 DTD，所以 IE6 就假定 如果写了 DTD，就意味着这个页面
将采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是 Quirks
模式（怪癖模式，诡异模式，怪异模式）。
区别：
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，
而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。
设置行内元素的高宽：在 Standards 模式下，给<span>等行内元素设置 wdith 和 height 都
不会生效，而在 quirks 模式下，则会生效。
设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如
果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平
居中，但在 quirks 模式下却会失效。
（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是
看文章看的，甚至完全不知道。）

22、移动端适配你是如何做的？

移动端适配:rem/em ,vh,vw,%,@media,viewport
我在上家公司主要使用rem、vh、vw、百分比作单位，使用flex进行布局、利用viewport进行适配
，以iphone6机型为基准适配其他机型 ，对具有刘海屏的手机做特殊处理。当然还有其他的适配方案。

⭐23、Flex 的常用属性

父元素添加的属性有：
	display-flex		设置元素为弹性盒
	justify-content  	控制子元素主轴排列方式
	align-items 		控制子元素侧轴的排列方式
	align-content  		控制多轴的排列方式
	flex-wrap			是否换行
	flex-direction  	排列方式（行（row）、列（column））
	flex-flow			是flex-direction 和 flex-wrap 属性的复合属性，默认值是row nowrap

子元素添加的属性有：
	order：		定义元素的排列顺序，数值越小排列越靠前，默认为0.
	flex-grow：	定义元素在剩余空间如何放大，默认为0，即有剩余空间也不放大。
	flex-shrink：定义元素的缩小比例，默认为1，即如果空间不足，该元素将缩小。
	align-self：	设置子元素在纵轴的排列方式  可以覆盖父容器的align-items的设置。
	flex-basis：	定义在分配多余空间之前，元素占据主轴的空间。
	flex：		是flex-grow、flex-shrink、flex-basis的符合属性，默认值为0 1 auto。

24、遇到过浏览器兼容性问题

首先我分为三部分 ：HTML，css，javascript

html

对于html兼容
		主要就是低版本浏览器不识别新增的语义化标签，我们可以在script标签内先进行创建标签，然后再使用，也可以使用js插件。

css

低版本的浏览器不支持
1、不同浏览器的margin和padding的差异较大。
   解决方法：在css里使用：*{margin:0px; padding:0px}。
2、ie9以下不支持半透明属性 opacity
   opacity(o趴斯里)：0.5
   解决使用filter属性
3、flex ie10以下不支持
4、img图片有间隔
   解决：把img 变成块级元素    display: block;
5、光标显示不一样
   cursor：hand
   解决方案：统一使用cursor（co ser）：pointer(pɔ ɪn tə(r))
   cursor: url()   图片光标，IE11以下浏览器不支持
6、IE无法设置滚动条样式

javascript

Js方面的兼容问题：
		一般需要自己封装一个方法（函数），实现浏览器兼容性处理
		1、获取浏览器窗口大小
		2、Event对象 参数问题  绑定事件方式
		3、阻止默认行为、阻止冒泡
		这些都需要有兼容性写法，，，，，，，，

25、移动端适配 meta 标签(viewport)有哪些属性

width	设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许
	1

26、IOS 端是如何适配的

IOS端的适配
	1、分析机型:整体上把现有的iOS屏幕分为两大类，非全面屏和全面屏
		非全面屏：（6、6s、7、8）和Plus系列（6 Plus、6s Plus、7 Plus、8 Plus)
		全面屏： iPhoneX  iPhoneXR  iPhone 11，12，13，14 等
		屏幕尺寸总结，iPhone在逻辑像素共有四种，375x667，375x812，414x736，414x896
	2、安全区域
		非全面屏都是矩形，整个屏幕都是安全区域。
		全面屏受到大圆角、刘海以及底部的影响，UI图更需要考虑安全区域
		顶部44pt、 底部34pt
	3、以iphone6为进行制作去适配其它机型，对iphoneX单独处理

27、了解 2X 图和 3X 图吗

 因为手机的dpr有2.0和3.0的，所以设计师会切出2X和3X图，我们制作的时候可以根据dpr的不同引入不同的图片
使用的是media(媒体查询)

28、H5 怎么引用原生代码，和原生怎么引入 H5 代码

通过JSbrige

29、如何处理 HTML5 新标签的浏览器兼容问题？

方法一 :
	1、使用静态资源的html5shiv包
    <!--[if lt IE9]>
      <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js">		</script>
	<![endif]-->
	2、载入后，初始化新标签的css
	header, section, footer, aside, nav, main, article, figure { display: block; }
方法二:

	IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签

⭐30、在地址栏输入 url 之后发生了什么（http 请求是如何解析文档的）

1.DNS解析，将域名地址解析为ip地址（当输入url回车之后）
	读取浏览器DNS缓存、读取系统DNS缓存、路由器DNS缓存、网络运营商DNS缓存
	递归搜索   blog.baidu.com
			.com域名下查DNS解析
			.baidu域名下查DNS解析
			.blog域名下查DNS解析
				出错了
2.（在跟服务器交互之前）TCP链接  TCP三次握手
		第一次握手：由浏览器发起，告诉服务器我要发送请求了
		第二次握手：由服务器发起，告诉浏览器我准备接收了，你赶紧发送吧。
		第三次握手：由浏览器发送，告诉服务器，我马上就发了。准备接收吧。

3.发送请求
	请求报文，HTTP协议的通信内容
4.接受响应
	响应报文
5.渲染页面
	-遇见HTML标记，浏览器会调用HTML解析器，解析成Token标记（对象上的属性名和属性值）并构成DOM树
	-遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssDOM树
	-遇到script标记，调用javascript解析器，处理script代码（绑定事件，修改dom树/cssdom树）
	-将dom树和cssdom树合并成一个（render）渲染树
	-根据渲染树来计算布局，计算每个节点的几何信息（布局）
    -将各个节点颜色绘制到屏幕上（渲染）

	注意：

		这个5个步骤不一定按照顺序执行，如果dom树或cssdom树被修改了，可能会执行多次布局和渲染，往往实际页面中，这些步骤都会执行多次的。

6.断开链接 TCP的四次挥手
	第一次挥手：由浏览器发起的，发送给服务器，我东西发送完了（请求报文），你准备关闭吧。
	第二次挥手：由服务器发起的，告诉浏览器，我东西接受完了（请求报文），我准备关闭了，你也准备吧。
	第三次挥手：由服务器发起，告诉浏览器，我东西发送完了（响应报文），你准备关闭吧。
	第四次挥手：由浏览器发起，告诉服务器，我东西接受完了（响应报文），我准备关闭了，你也准备吧

✔️31、说说你对语义化的理解

1、去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
2、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

✔️32、画一条 0.5px 线条

.box {
  height: 1px;
  background: red;
  width: 100%;
  transform: scaleY(0.5);
}

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

33、什么是外边距重叠？重叠的结果是什么？

【答案解析】外边距重叠就是margin-collapse； 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果计算规则： 两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值；
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值；
两个外边距一正一负时，折叠结果是两者的相加的和

怎么解决外边距重叠?

解决：使用BFC
	 （1）设置padding代替margin
     （2）设置float
     （3）设置overflow
     （4）设置position：absolute 绝对定位
     （5）设置display： inline-block

34、

⭐35、重绘和回流（哪些情况重绘，哪些回流)

重绘: 当页面中元素样式(外观属性)的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等）如：

* color			    * background			* outline(轮廓))
* border-style		* background-image		* outline-color
* border-radius		* background-position	* outline-style
* visibility		* background-repeat		* outline-width
* text-decoration	* background-size	    * box-shadow


回流: 元素的尺寸、结构、或某些属性发生改变时，浏览器根据视口重新计算位置和大小

会导致回流的操作：

页面首次渲染
浏览器窗口大小发生改变
元素尺寸或位置发生改变
元素内容变化（文字数量或图片大小等等）
元素字体大小变化
添加或者删除可见的DOM元素
激活CSS伪类（例如：:hover）
查询某些属性或调用某些方法

可能会导致回流的属性或方法：
    * width         * top          * text-align
    * height	    * bottom       * overflow-y
    * padding	    * left         * font-weight
    * margin	    * right        * overflow
    * display       * position     * font-family
    * border-width  * float        * line-height
    * border		* clear        * vertival-align
    * min-height	* white-space


总结: 回流一定引起重绘，但是重绘不一定引起回流

减少重绘和回流的操作：

1、减少table使用：table及其内部元素除外，可能需要多次计算，通常要花3倍于同等元素的时间。
2、避免设置多层内联样式。
3、避免使用CSS表达式（例如：calc()）
4、尽量使用css3的transform来代替对top left等的操作
5、尽量使用css属性简写:如：用boder代替boder-width，boder-style，boder-color



### 157、重绘和重排

重绘：改变元素的外观属性例如 div 的 color、background-color、等属性发生改变时

重排（回流）：元素的规模尺寸、布局、隐藏改变时

代价：耗时，导致浏览器卡慢

什么是回流
当 render tree 中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建 render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

什么是重绘
当 render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘。

区别：
他们的区别很大：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的 DOM 元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

36、移动端适配 1px 问题

问题: 移动端的1px在有些机型上看上去有些粗，虽然写着1px，但看上去的效果是2px?
答: 使用伪类+transform方法，原理就是把原先的border去掉，然后利用:border或者:after重做border,
	并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位

37、居中为什么要使用 transform（为什么不使用 marginLeft/Top)

transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些

margin-top/left属于布局属性，会引起页面layout回流和repaint重绘。

38、介绍 css3 中 position:sticky

1、该元素并不脱离文档流，仍然保留元素原本在文档流中的位置
2、元素固定的相对偏移是相对于它的父标签而言。

39、为什么要初始化 css 样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。

40、

41、CSS 样式覆盖规则

!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

42、box-sizing 常用的属性有哪些？分别有什么作用？

（1）content-box
宽高是元素本身的宽高 不包含border+padding

（2）border-box
元素的宽高已经包含了border+padding

（3）inherit
从父元素继承box-sizing属性

43、css 的选择器有哪些？

1、id选择器
2、类选择器
3、标签选择器
4、后代选择器
5、子选择器
6、兄弟选择器(所有的兄弟)
7、相邻兄弟选择器
8、属性选择器
9、伪类选择器

44、解释 css sprites ，如何使用?(精灵图)

1、什么是精灵图
将一些小图标放在一张图上

2、精灵图的优点
减少图片的总大小
减少下载图片资源请求，减小建立连接的消耗

3、精灵图的使用方式
.icon1 {
    background-image: url(css/img/sidebar.png);
    background-repeat: no-repeat;
    background-position: 20px  20px;
 }
// 第一个数是x轴， 第二个数是y轴

45、左右固定，中间自适应样式

使用flex布局
左右两边给固定宽度，中间flex:1

46、实现一个 div 在不同分辨率下的水平垂直居中

1、使用flex布局
   给元素 display:flex,justify-content: center,align-items: center;
2、使用相对于屏幕定位(position:relative)
   top：50%
   left：50%

47、上下固定，中间滚动布局如何实现

首先 先给上下固定高度，中间也给一个高度，然后给中间一个overflow-y:auto

48、css 实现 border 渐变

1、使用border-image
2、使用 background-image
4、伪元素

49、纯 css 实现一个高宽比为 1：3 的盒子 列举几种方式

50、css 实现一个旋转的圆

在css中，可以先利用border属性和border-radius属性给一个正方形元素设置成圆环样式，再利用animation属性和@keyframes 规则还有transform属性实现圆环旋转即可

列如： <div></div>
	   div{
           width:200px;
           height:200px;
           border:100px solid black;
           border-top-color:pink;
           border-radius:50%;
           animation:fadenum 5s ;
        }
        @keyframes fadenum{
           100%{transform:rotate(360deg);}
        }

51、CSS3 新增伪类有那些？

1、elem:nth-child(n)选中父元素下的第n个子元素，并且在这个子元素的标签名为elem，n可以接受具体的数值，      也可以接受函数。
2、elem:nth-last-child(n)作用同上，不过是从后开始查找。
3、elem:last-child选中最后一个子元素。
4、elem:only-child如果elem是父元素下唯一的子元素，则选中之。
5、elem:nth-of-type(n):查找第n个elem标签的元素。可以为一个函数。
6、elem:first-of-type:选中父元素下第一个elem类型的元素。
7、elem:last-of-type:选中父元素下最后一个elem类型的元素。
8、elem:only-of-type:如果父元素下的子元素只有一个elem类型的元素，则选中该元素。
9、elem:empty:选中不包含子元素和内容的elem类型的元素。
10、elem:target:选中当前活动的elem元素。
11、:not(elem):选择非elem元素的每一个元素。
12、:enabled:控制表单控件的禁用状态。
13、:disabled:控制表单的禁用状态。
14、:checked单选框和复选框被选中。

✔️52、移动端有哪些常见的问题，都是怎么解决的？

点击事件 300MS 延迟问题 解决方案：下载 fastclick 的包 H5
页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0,minimum-
scale=1.0,maximum-scale=1.0,user-scalable=no"
/>

忽略 Android 平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对 ios 的 safari
<!-- ios7.0版本以后，safari上已看不到效果 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

53、display:inline-block 什么时候不会显示间隙？

1、移除空格
2、使用margin负值
3、使用font-size:0
4、letter-spacing
5、word-spacing

54、行内元素 float:left 后是否变为块级元素？

行内元素设置成浮动之后变得更加像是 inline-block
行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100%，行内元素默认 100%宽度占据一行
这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都是有效果的

55、垂直塌陷及解决方法

情况一：浮动元素无法撑开标准流的父元素，导致父元素高度塌陷
        解决方法：
        1.直接给父元素设置该高度
        2.使用额外标签法清除浮动
        3.使用单伪元素清除法
        4.使用双伪元素清除法
        给父元素设置overflow:hidden
情况二：互相嵌套的块级元素，给子元素设置margin-top，父子元素的margin-top会合并，父元素会一起往下移动
        1.给父元素设置border-top
        2.给父元素设置padding-top
        3.设置浮动
        4.转换成行内块元素
        5.给父元素设置overflow:hidden

56、flex 布局

flex是Flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性
采用Flex布局的元素，称为Flex容器(flex container)，简称容器。他是所有子元素自动称为容器成员，称为Flex项目(flex item)简称项目

57、

58、

59、iframe 的优缺点有哪些？

【答案解析】优点： iframe能够原封不动地把嵌入的网页展示出来； 提高页面代码的复用性； 解决加载缓慢的第三方内容，如图标和广告等的加载问题； 在处理上传或局部刷新时，避免了页面整体刷新； iframe解决部分跨域问题； 缺点： iframe会阻塞主页面的 onload 事件； 无法被一些搜索引擎索引到； 页面会增加服务器的http请求； 会产生很多页面，不便于管理； 很多移动设备无法完全显示框架，设备兼容性差； 会出现区域的上下、左右滚动条，滚动条会挤占页面空间； 使用框架时，要保证正确的使用导航链接，容易造成链接死循环； 随着前端技术的发展，逐渐使用ajax来代替iframe。

60、左边固定右边自适应，左右两边固定中间自适应布局怎么实现？

【答案解析】经典布局 一、圣杯布局 二、双飞翼布局 三、使用CALC（css3中提供的一个计算公式） 四、flex（若不考虑兼容，首选flex） 五、定位（若考虑兼容，选择定位）

参考：https://blog.csdn.net/xxh20171777/article/details/111589604

61、常用的几种布局方式，谈谈你对 CSS 布局的理解

【答案解析】固定布局 流式布局（自适应布局） 弹性布局（伸缩布局） 定位布局 浮动布局 响应式布局（媒体查询）

62、postcss 的作用

1、可以直观的理解为：它就是一个平台。为什么说它是一个平台呢？因为我们直接用它，感觉不能干什么事情，但是如果让一些插件在它上面跑，那么将会很强大
2、PostCSS 提供了一个解析器，它能够将 CSS 解析成抽象语法树
3、通过在 PostCSS 这个平台上，我们能够开发一些插件，来处理我们的CSS，比如热门的：autoprefixer
4、postcss可以对sass处理过后的css再处理 最常见的就是autoprefixer

63、stylus/sass/less 区别

均具有“变量”、”混合“、“嵌套”、”颜色混合“五大基本特性
sass和lass语法较为严谨，less要求一定要使用大括号”{}“，sass和stylus可以通过缩进表示层次和嵌套关系
sass无全局变量的概念，less和stylus有类似其他语言的作用域概念
sass是基于Ruby语言的，而less和stylus可以基于nodeJs NPM 下载相应库后进行编译，这也就是为什么安装sass的时候有时候会报错，需要安装python脚本

64、base64 的原理及优缺点

1. 优点
（1）base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；
（2）网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。
2. 缺点
（1）base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；
（2）网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。
（3）base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直接缓存图片要差很多，而且一般HTML改动比较频繁，所以等同于得不到缓存效益。
<img src="data:image/jpeg;base64,/9j/4AAQS……"/>
因为base64的使用缺点，所以一般图片小于10kb的时候，我们才会选择使用base64图片，比如一些表情图片，太大的图片转换成base64得不偿失。当然，极端情况极端考虑。

65、CSS3 动画（简单动画的实现，如旋转等）

依靠CSS3中提出的三个属性：transition、transform、animation
1、transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、	transition-timing-function、transition-delay。
2、transform：定义元素的变化结果，包含rotate、scale、skew、translate。
3、animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-		duration、animation-timing-function、animation-delay、animation-iteration-count、		animation-direction

66、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

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

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

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

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

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

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

69、怎么实现响应式布局？

1、百分比布局
2、rem布局
3、媒体查询 @media screen
4、vh、vw
5、viewport

70、localStorage 和 sessionStorage cookie 的区别

71、localStorage 能跨域访问吗？

72、div+css 的布局较 table 布局有什么优点？

73、img 的 alt 与 title 有何异同？ strong 与 em 的异同？

74、你能描述一下渐进增强和优雅降级之间的不同吗?

75、为什么利用多个域名来存储网站资源会更有效？

76、请谈一下你对网页标准和标准制定机构重要性的理解

77、请描述一下 cookies、sessionStorage 和 localStorage 的区别？

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

79、知道的网页制作会用到的图片格式有哪些？

80、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

81、在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？

82、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

83、你如何理解 HTML 结构的语义化？

84、谈谈以前端角度出发做好 SEO 需要考虑什么？

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

86、CSS 都有哪些选择器？

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

88、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

89、什么是 Css Hack？ie6, 7,8 的 hack 分别是什么？

90、请用 Css 写一个简单的幻灯片效果页面

91、相对定位和绝对定位的区别

相对定位：相对于当前元素的位子来移动；绝对定位如果不把父元素设置为相对定位，则相对与页面的左上角定位

92、150、哪些 css 属性可以继承？

93、text-align:center 和 line-height 有什么区别？

94、前端页面由哪三层构成，分别是什么？作用是什么？

95、写一个表格以及对应的 CSS,使表格奇数行为白色背景，偶数行为灰色，鼠标一上去为黄色背景。

96、

97、垂直居中的方式？

• 行高=高
• Margin auto 0
• 绝对定位 top50%，自身宽度的 50%的负值
• flex 布局 align---center

98、水平居中的方式？

• 绝对定位
• flex 布局 juest---center
• margin 0 auto
• text-align center

99、H5 新标签有哪些？

canvas 新元素

标签	描述
<canvas>	定义图形，比如图标和其他图像。该标签基于 JavaScript 的绘图 API

新-多媒体元素

标签	描述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源<video>和<audio>
<embed>	定义嵌入内容，比如插件
<track>	为诸如<video>和<audio>元素之类的媒介规定外部文本轨道

新的语义和结构元素

标签	描述
<article>	定义页面独立的内容区域
<aside>	定义页面的侧边栏内容
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）
<figcaption>	定义<figure>元素的标题
<footer>	定义 section 或 document 的页脚
<header>	定义了文档的头部区域
<mark>	带有记号的文本
<meter>	定义度量衡。仅用于已知最大和最小值的度量
<nav>	定义导航链接的部分
<progress>	定义任何类型的任务进度

100、行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

101、什么是外边距重叠？重叠的结果是什么？

102、rgba()和 opacity 的透明效果有什么不同？

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

104、如何垂直居中一个浮动元素？

105、

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

107、Sass LESS 是什么？大家为什么要使用他们？

108、display:none 与 visibility:hidden 的区别是什么？

109、CSS 中 link 和@import 的区别是什么

110、CSS 的盒子模型？

111、为什么要初始化样式？

112、html 语义化是什么？

113、Doctype 的作用？严格模式与混杂模式的区别？

114、IE 的双边距 BUG ：块级元素 float 后设置横向 margin ，ie6 显示的 margin 比设置的较大。解决：加入display：inline

115、HTML 与 XHTML 二者有什么区别？

116、html 常见兼容性问题？

117、对 WEB 标准以及 W3C 的理解与认识

118、

119、前端页面有哪三层构成，分别是什么?作用是什么?

120、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

121、

✔️122、利用 grid 实现的一个左右 300px ,中间自适应的布局

<section class="layout grid">
  <article class="left-center-right">
    <div class="left">我是 left</div>
    <div class="center">
      <h1>网格布局解决方案</h1>
      我是 center
    </div>
    <div class="right">我是 right</div>
  </article>
</section>

* {
  padding: 0;
  margin: 0;
}
/*  重要：设置容器为网格布局，宽度为100% */
.layout.grid .left-center-right {
  display: grid;
  width: 100%;
  grid-template-rows: 100px;
  grid-template-columns: 300px auto 300px;
  /* 重要：设置网格为三列，并设置每列的宽度。即可。*/
}

.layout.grid .left {
  background: red;
}
.layout.grid .center {
  background: green;
}
.layout.grid .right {
  background: blue;
}

123、

❗ 124、如何居中 div,如何居中一个浮动元素?

❗ 125、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧 ？

❗ 126、列出 display 的值，说明他们的作用。position 的值， relative 和 absolute 定位原点是？说 display 属性有哪些？可以做什么？

❗ 127、absolute 的 containing block 计算方式跟正常流有什么不同？

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

❗ 129、对 WEB 标准以及 W3C 的理解与认识

❗ 130、css 的基本语句构成是?

❗ 131、浏览器标准模式和怪异模式之间的区别是什么?

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

❗ 133、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

❗ 134、什么是 Css Hack？ie678 的 hack 分别是什么？

❗ 135、请用 Css 写一个简单的幻灯片效果页面

❗ 136、行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

❗ 137、什么是外边距重叠？重叠的结果是什么？

❗ 138、rgba()和 opacity 的透明效果有什么不同？

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

❗ 140、如何垂直居中一个浮动元素？

❗ 141、描述一个"reset"的 CSS 文件并如何使用它。知道 normalize css 吗？你了解他们的不同之处？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。

❗ 142、b 标签和 strong 标签,i 标签和 em 标签的区别？

后者有语义，前者则无

❗ 143、我想让行内元素跟上面的元素距离 10px，加 margin-top 和 padding-top 可以吗？

不可以 ，行内元素无法设置margin-top 和 padding-top