H5\C3面试篇

HTML基础

块级元素：

1. 独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；
2. 包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form

行内元素：

1. 可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！
2. 包含a、span、em、strong、b、i、label、br；
3. padding和margin上下属性设置是无效的，左右是有效的

行内块元素：

1. 结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
2. img,input,textarea
3. 除了一行显示跟块级元素一样

各种标签之间的转换
1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

定位方式

文档流

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

关于定位

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

• relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
• absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
• fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
• static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
• inherit 从父元素继承 position 属性的值。

元素显示隐藏的方式

1. display:none/block
   • 元素在页面上将彻底消失，不占据位置，也就是说它会导致浏览器的重排和重绘。
   • 无法触发其点击事件
2. visibility:hidden/visible
   • 元素在页面消失后，占据位置，所以它只会导致浏览器重绘而不会重排，
   • 适用于那些元素隐藏后不希望页面布局会发生变化的场景；
   • 无法触发其点击事件
3. opacity:0：
   • 可以触发点击事件

BFC

1. BFC = Block Formatting context 意思是“块级格式化上下文”；
2. BFC的目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。
3. 触发条件
   • float不为none2
   • postion不为relative和static
   • overflow为auto scroll和hidden
   • display的值为inline-block
4. BFC可以解决的问题
   • 解决浮动元素令父元素高度塌陷的问题：给父元素添加属性overflow：hidden，当然，这只是一种BFC的做法，还可以display: table-cell;或position: fixed;或position: absolute;或者给父元素添加一个高度
   • 解决外边距垂直方向重合取最大的问题：为其中一个元素的外边包裹一层父元素，并且触发父元素BFC，比如：overflow：hidden或者可以用padding来代替margin
   • 两栏自适应布局：其中box1 float：left，这是box2会在box1下面，(如果文字过多就会形成文字环绕效果)，但我就是想要box2在box1的右侧;

清除浮动的方式

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐：添加无意义标签，语义化差）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐：触发BFC方式，实现清除浮动）

3.使用after伪元素清除浮动（推荐使用：给父元素添加clearfix类名）

   .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

盒子水平垂直居中

1. 子绝父相定位

   		html,
           body {
               position: relative;
               overflow: hidden;
               width: 100%;
               height: 100%;
           }
   
   		.box { 
               position: absolute;
               background-color: pink;
               width: 200px;
               height: 200px;
               left: 50%;
               top: 50%;
               //方法一
               margin-left: -100px;
               margin-top: -100px;
          		//方法二 ：无需定义宽高
               //transform: translate(-50%, -50%);
           }
           
            .box { //方法二：不考虑宽高，但是必须定义宽高，否则会拉伸为100%
               position: absolute;
               background-color: pink;
               width: 200px;
               height: 200px;
               left: 0;
               top: 0;
               right: 0;
               bottom: 0;
               margin: auto;
           }
   

2. flex布局：父元素设置flex布局

   		html,
           body {
               display: flex;
               width: 100%;
               height: 100%;
               justify-content: center;
               align-items: center;
           }
   

3. table布局：父盒子必须固定宽高，不能100%，子元素行内元素

     		html,
           body {
               width: 500px;
               height: 500px;
               border: 1px solid red;
               overflow: hidden;
               display: table-cell;  
               text-align: center;
               vertical-align: middle;
           }
   
           .box {
               display: inline-block;
           }
   

4. js实现：子绝父相

    		html,
           body {
               position: relative;
               width: 100%;
               height: 100%;
           }
   
           .box {
               position: absolute;
               width: 100px;
               height: 100px;
               border: 1px solid red;
           }
           
       <script>
           let doc = document.documentElement
           let W = doc.clientWidth
           let H = doc.clientHeight
        	//若id为box，则不需要获取，可以直接使用box，省略下面一行   
           let box = document.querySelector('.box')
           let width = box.offsetWidth
           let height = box.offsetHeight
          
           box.style.left = (W - width) / 2 + 'px'
           box.style.top = (H - height) / 2 + 'px'
       </script>
   

css盒模型

1. 标准盒模型：box-sizing : content-box;

   设置的宽度是内容的宽度，不包含padding和border，所以添加padding和border后盒子会变大，引起布局变化，可以设置box-sizing : border-box变成怪异盒模型。包括内容、padding、border

2. flex弹性伸缩盒子模型

   给盒子设置display : flex ，这个盒子就变成了弹性伸缩盒子，有主轴和交叉抽。默认横向为主轴，可以使用justify-content来设置子项目在父容器的主轴上排列方式，通过align-items来设置交叉轴上的排列方式；

3. 多列布局：pad上做文章布局

几大经典布局

1. 浮动：清除浮动
2. flex
3. 定位
4. 移动端响应式布局开发三大方案
   • media 媒体查询：适用于PC和移动端使用一套代码，内容相似
   • rem 等比缩放：针对移动端，结合flex布局；PC端使用px，还有结合vh/vw,类似于百分比

z-index的工作原理，使用范围

1. 文档流
2. 定位

css3动画的优化方案

说说你对HTML5的理解

下面哪种方式渲染性能更高

.box a{
	...
}
a{
	...
}

第二种性能更高。因为css的浏览器渲染机制是选择器从右向左查询。所以第二种只找到所有a标签，，而第一种要先找到所有a标签，然后找到box里的a

H5新增

1. 新增语义化标签：

   <section></section> 独立内容模块 
   article  （文章） 文章核心部分
   aside 侧边栏
   header 头部/标题
   footer 底部
   nav 导航
   main元素 表示页面中的主要的内容(ie不兼容)
   time 时间
   <mark> 定义带有记号的文本。默认加黄色背景。
   <progress></progress> 进度条
   

   • 不靠css渲染，页面结构仍然清晰；
   • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
   • 有利于SEO；
   • 便于开发维护；

2. 新增标签video、audio、canvas

3. H5新特性：

   • 语义化标签

   • input新增type类型

     color 选择颜色
     date 选择日期
     datetime 选择一个日期（UTC 时间）
     datetime-local 选择一个日期和时间 (无时区)
     email 用于检测输入的是否为email格式的地址
     month 选择月份
     number 用于应该包含数值的输入域，可以设定对输入值的限定
     range 用于定义一个滑动条，表示范围
     search 用于搜索，比如站点搜索或 Google 搜索
     tel 输入电话号码
     time 选择一个时间
     url 输入网址
     week 选择周和年

     表单其他属性

     placeholder、autofocus、required、pattern：正则表达式验证，

     autocomplete：自动补全，但是有两个前提：

     （1）必须成功提交过

     （2）加autocomplete的这个元素必须有name属性

   • 本地存储sessionStorage、localStorage

     ==localStorage存储的数据是不能跨浏览器共用的，储存空间5M。==常用于长期登录

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EW4J2CKe-1618309123758)(C:\Users\87224\AppData\Roaming\Typora\typora-user-images\image-20210324114702798.png)]

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZQ6weQu-1618309123760)(C:\Users\87224\AppData\Roaming\Typora\typora-user-images\image-20210324114729884.png)]

css3有哪些新特性？

1. 实现圆角border-radius、阴影box-shadow、border-image、background-size、background-origin、background-clip；

2. 对文字加特效text-shadow、线性渐变gradient、

3. transform（转换）

   • 旋转 rotate（9deg）
   • 缩放 scale（0.85,0.9）
   • 定位 translate（0px，-30px）
   • 倾斜 skew（-9deg、0deg）

4. animation（动画）

   @keyframes 动画名称 {
     动画过程，可以添加任意百分比处的动画细节
       0%   {background:red;}
   	25%  {background:yellow;}
   	50%  {background:blue;}
   	100% {background:green;}
   }
   div {
     animation:动画名称 过渡时间 速度曲线 动画次数 延时时间;
   }
   
   div
   {
   	width:100px;
   	height:100px;
   	background:red;
   	position:relative;
   	animation:mymove 5s infinite;
   }
   
   @keyframes mymove
   {
   	from {left:0px;}
   	to {left:200px;}
   }
   
   

5. transition（过渡）: 过渡的属性 过渡时间 运动曲线 延时时间

   div
   {
       width:100px;
       height:100px;
       background:red;
       transition:width 2s;
   }
   div:hover
   {
       width:300px;
   }
   

6. 伪类选择器和属性选择器：

   • ul li:nth-child(n){} li:first-child li:last-child

   • :nth-of-type(n) :first-of-type :last-of-type

     选择器	介绍
     e::before	在e元素内部的前面插入一个元素
     e::after	在e元素内部的后面插入一个元素
     e::first-letter	选择到e容器内的第一个字母
     e::first-line	选择到e容器内的第一行文本

   • 属性选择器 input[checked=“true”]

7. word-wrap：自动换行 p {word-wrap:break-word;}

css权重

1、!important，加在样式属性值后，权重值为 10000

2、内联样式，如：style=""，权重值为1000

3、ID选择器，如：#content，权重值为100

4、类，伪类和属性选择器，如： content、:hover 权重值为10

5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1

6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

给元素设置宽度，px和em，rem的区别？

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

优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

2、em是相对长度单位，相对于父元素的font-size来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

优缺点：em的值并不是固定的，它会继承父级元素的字体大小。

3、rem是CSS3新增的一个相对单位，是相对HTML根元素的font-size。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

给元素设置宽度，%相对的是什么元素？

1. 父元素没有定位，子元素不定位或相对定位情况都是相对的父元素宽高；若子元素绝对定位，则相对浏览器的宽高
2. 若父元素有定位(无论哪种)，子元素（无论是否定位）都是相对父元素宽高

元素的阴影效果

/* 内阴影 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow:inset 2px 2px 2px 1px red;

实现动画的方式

1. animation（动画）

   @keyframes 动画名称 {
     动画过程，可以添加任意百分比处的动画细节
       0%   {background:red;}
   	25%  {background:yellow;}
   	50%  {background:blue;}
   	100% {background:green;}
   }
   div {
     animation:动画名称 过渡时间 速度曲线 动画次数 延时时间;
   }
   
   div
   {
   	width:100px;
   	height:100px;
   	background:red;
   	position:relative;
   	animation:mymove 5s infinite;
   }
   
   @keyframes mymove
   {
   	from {left:0px;}
   	to {left:200px;}
   }
   
   

2. transition（过渡）: 过渡的属性 过渡时间 运动曲线 延时时间

   div
   {
       width:100px;
       height:100px;
       background:red;
       transition:width 2s;
   }
   div:hover
   {
       width:300px;
   }
   

弹性布局flex以及其常用的属性

左右布局，左边固定宽度，右边自适应，为防止右边文字过长压缩左边布局，

左边添加flex:none,右边添加flex:1; 原因就是因为flex不设置none默认为flex:0,1,auto

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

容器的属性

• 主轴方向：flex-direction: row | row-reverse | column | column-reverse;
• 是否换行：flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow : ;
• 主轴上对齐方式： justify-content: flex-start | flex-end | center | space-between | space-around;
• 交叉轴上对齐方式：align-items: flex-start | flex-end | center | baseline | stretch;
• align-content

项目属性

• order 项目的排列顺序。数值越小，排列越靠前，默认为0。

• flex-grow 项目的放大比例，默认为0

• flex-shrink 项目的缩小比例，默认为1

• flex-basis 在分配多余空间之前，项目占据的主轴空间

• flex ：flex-grow, flex-shrink 和 flex-basis的简写

• align-self 单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，

  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  

grid布局，以及它与flex布局，table的差异

grid布局

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

行和列、 单元格、网格线

容器属性

.container {
  display: grid;  //网格布局
  grid-template-columns: 100px 100px 100px;  //每列宽度 （可使用%）
  grid-template-rows: 100px 100px 100px;  //每行高度 （可使用%）
  grid-auto-rows: 50px;  浏览器自动创建的多余网格的列宽和行高
  //grid-template-columns: repeat(2, 100px 20px 80px)|| repeat(3, 33.33%);; 重复6列或3列
  //grid-template-columns: repeat(auto-fill, 100px); //容器的大小不确定时，每列为100px自动填充最多列
  //grid-template-columns: 1fr 1fr; 第一列的宽度是第二列的两倍
  //grid-template-columns: 1fr 1fr minmax(100px, 1fr); 列宽不小于100px，不大于1fr
  //grid-template-columns: 100px auto 100px; 第二列占据剩余宽度
  //grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; []内可以指定每条网格线的名称
  grid-row-gap: 20px;  //行间距
  grid-column-gap: 20px; //列间距
  grid-gap: <grid-row-gap> <grid-column-gap>; grid-gap可写成gap，若只有一个值，默认行列间距一样
  grid-auto-flow: column; //项目先列后行排列
  justify-items: start | end | center | stretch; //项目在单元格的水平位置
  align-items: start | end | center | stretch;   //项目在单元格的纵向位置
  place-items: <align-items> <justify-items>; 一个值默认相等
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  //整个内容区域在容器里面的水平位置
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  //整个内容区域在容器里面的垂直位置
    
   grid-template-areas: 'a a a'  将其定名为a到i的九个区域，分别对应这九个单元格
                     'b b b'
                     'c c c';
}

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

项目属性

.item-1 {
  grid-column-start: 2; 左边框所在的垂直网格线
  grid-column-end: 4; 右边框所在的垂直网格线
  grid-row-start属性：上边框所在的水平网格线
  grid-row-end属性：下边框所在的水平网格线
  grid-column-start: header-start; 还可以指定为网格线的名字
  grid-column-end: header-end; 还可以指定为网格线的名字
  grid-column-start: span 2; 左右边框（上下边框）之间跨越多少个网格
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
  grid-area: e; 指定项目放在哪一个区域
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: <align-self> <justify-self>;
}

1. Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
2. Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

canvas的width height属性与它style中的width，height有什么区别

canvas具有两个行内的属性：width与height属性，是用来定义容器和画板的宽高的，默认都为300*150，

css样式只能定义容器的宽高，而画板默认还是300*150