HTML CSS 相关面经

页面导入样式，使用link与@import有什么区别（4）

1. link 是html 标签 @import 是css独有的

2. link 是页面加载的时候同步加载，而@import 是css 加载完成后才加载

3. link 没有兼容性问题 @import 不能兼容ie 以下的

4. link 支持dom 操作，@import 不可以

描述块级元素与行内元素的区别 ？

1. 块级元素占一整行 会自动换行 垂直方向排列 ，行内元素与其他行内元素并排一行，水平方向排列

2. 块级元素可以包含行内和块级元素 ，行内元素不能包含块级元素

3. 行内元素设置width 和 height 无效 margin上下无效 padding 上下无效

块级元素和行内元素有哪些

• 块级元素

  • div，h1~h5,ul,li,ol,dl,dt,dd,hr,form,p,table,td,th,tr

• 行内元素

  • a,b,br,code,em,i,img,input,label,select,span,strong,sub,sup,textarea

H5 新特性（8）

1. 绘画canvas

   用于图形的绘制 通过脚本来实现

   var c = document.getElementById("myCanvas")
   var ctx = c.getContext("2d");
   //绘制矩形
   ctx.fillstyle="#ff0000";
   ctx.fillRect(x,y,width,height);
   //绘制路径
   ctx.beginPath();
   ctx.moveTo(50,20);
   ctx.lineTo(80,100);
   ctx.stroke();
   //绘制圆
   ctx.beginPath();
   ctx.arc(50,50,50,0,2*Math.PI);
   ctx.stroke();
   //绘制文本
   //空心
   ctx.font = "30px Arial";
   ctx.fillText("hello world",0,50)
   //路径文本
   ctx.font = "30px Arial";
   ctx.strokeText("hello world",0,100)

2. 新增标签 header footer nav article selection

3. 新增控件 email url number range date month week time datetime search

4. 媒体 audio video

5. localstorage sessionstorage

6. 推拽 api （drag drop）

7. webscket（全双工通信）

8. 地理api（geolocation）

css 选择器有哪些？ 优先级

1. 全选（*）

2. 类选择器

3. 标签选择器

4. id 选择器

5. 后代选择器

6. 子选择器

7. 伪类选择器

• 优先级

  • !important>内部样式>id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认属性

浏览器渲染原理与过程

1. 解析HTML 生成DOM 树

2. 解析CSS 生成CSSOM 规则树

3. 将DOM 树与 CSSOM 树规则树合并再一起生成渲染树

4. 遍历渲染树开始布局，计算每个节点的位置大小信息

5. 将渲染树每个节点绘制到屏幕

   上述不一定是一次性顺序完成，如果dom 或cssom 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染

拖放API

1. 设置元素为可拖放

2. 然后规定当元素被拖动时会发生什么

   let dropId
   drag(e) {
     dropId = e.target.id
   }

3. 能被拖动到的地方 ondragover

   默认无法将数据元素放置到其他元素中，如果需要 设置允许放置，必须阻止对元素的默认处理方式

   
     
   
   
   
   
   
   ​
   allowdrag(e) {
     e.preventDefault();
   }

4. 进行方式

   当放置被拖动数据时 会发生drop事件

   
     
   
   
   
   
   
   ​
   drop(e) {
     e.preventDefault();
     e.target.appendChild(document.getElementById(dropId));
   }

什么叫css盒模型 有几种盒模型 margin 与 padding的区别

盒模型是包括content margin padding border 的一种模型

1. ie 盒模型 （怪异盒模型）：只包括 content ，content 包括 border 和 padding

2. w3c 盒模型 包括content+border + margin + padding 而且 content 不包括其他部分

input的type属性（9）

1. button 定义可点击按钮

2. submit 定义提交按钮 提交按钮会把表单数据发送到服务器

3. radio 定义单选按钮

4. checkbox 定义复选框

5. file 定义输入字典和浏览按钮 供文件上传

6. hidden 定义隐藏的输入字段

7. password 定义密码字段

8. reset 定义重置按钮 重置按钮会清除表单中的所有数据

9. text 定义单行的输入字段 用户可在其中输入文本 默认宽度为20个字节

   button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week

input 中的一些事件

1. onfocus 获取焦点时触发

2. onkeydown 键盘按下时触发 但是value 没有值

3. onkeyup 键盘抬起时触发

4. onkeypress 键盘按下时触发 value 没有值 按下并放开任何字母 数字键 触发 其他键不触发

5. onkeyput 输入框输入时触发 可以获取value

6. onchange 失去焦点后触发 比onblur 快

7. onblur 同时 慢

元素隐藏方法

1. display：none

2. visibility：hidden

3. opcity：0

4. 缩放：target form：scale（0）

5. height：0

6. overflow：hidden

css3 新特性

1. css3的新选择器

   1. :root （根节点）

   2. E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式

   3. E:nth-of-type(n) （同类）选择与之其匹配的父元素的第N个子元素

   4. E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应

   5. E:frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素

   6. E:empty 选择没有子元素的每个E元素

   7. E:target 选择当前活动的E元素

   8. ::selection 选择被用户选取的元素部分

   9. 属性选择器

      E[abc*="def"] 选择adc属性值中包含子串"def"的所有元素

2. 文本

   1. text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色

   2. text-overflow：规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)

   3. text-wrap：规定文本换行的规则 任何主流浏览器都不支持了

   4. word-break 规定非中日韩文本的换行规则

   5. word-wrap：对长的不可分割的单词进行分割并换行到下一行

   6. white-space：规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行

3. 边框

   1. border-raduis 边框的圆角

   2. border-image 边框图片

4. 背景

   1. rgba

   2. backgrounnd-size:cover/contain，其中background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片

5. 渐变

   • linear-gradient

   background-image:linear-gradient( )

   • radial-gradient`

   background-iamge:radial-gradient(120px at center center,yellow,green)

6. 多列布局

   1. column-count

   2. column-width

   3. column-gap

   4. column-rule

7. 过渡

   1. transition

   2. transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔

   3. transition-duration:2s; //过渡持续的时间

   4. transition-timing-function:ease;

   5. transition-delay:5s //过渡延迟5s进行

      简写

      transition：property duration timing-function delay

8. 动画 旋转

   1. animation

   2. transform ：translate（x,y) rotate(deg) scale(x,y)

   3. translate

   4. scale

   5. rotate

   6. skew（倾斜）

9. flex 布局

10. @media 媒体查询

移动端响应式布局 如何实现不同设备 元素布局不同 如何监听屏幕大小

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

css布局

1. flex 布局

2. float 布局

3. 响应式布局

   1. rem字体大小

   2. meta 标签

   3. css media 类型

      @medit screen and (max-width:360px) {
        html {
          font-size：12px;
        }
      }

css预处理工具 sass

BFC 块格式上下文

块格式上下文

• 特性:

  1. 会阻止外边距重叠

  2. 不会与浮动元素重叠

  3. 使用overflow:hidden;overflow:auto;可以包含浮动元素,闭合浮动元素

• 创建方式:(5)

  1. 根元素

  2. display为以下其中之一的值（inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid）

  3. 绝对定位:(position:absolut或fixed)

  4. overflow:(hidden,auto,scroll)

  5. 浮动(flot不为none)

实现水平垂直居中的几种方式

• flex

• position：absolute

  left 50%

  top50%

  transform：translate（-50%，-50%）

• position：absolute

  top 0

  left 0

  right 0

  bottom 0

  margin auto

• 行内

doctype

• 严格模式和混淆模式

清除浮动的方式

1. 添加伪类 after ， zoom

2. 结尾处添加div 然后使用clear both

3. 父级定义height

4. 父级使用overflow:hidden

5. 父级使用 overflow：auto

6. 父级一起浮动

7. 父级使用display：table

css 中可继承的样式 和 不可继承的样式

1. 可继承的样式

   1. fontsize

   2. fontweight

   3. color

   4. textindex

2. 不可继承的样式

   1. border

   2. padding

   3. margin

   4. width

   5. height

   6. background-color

标签上title 与 alt 属性的区别

title 是鼠标悬浮上时显示的内容 alt 是图片错误无法加载时显示的

简述以下src 与herf 的区别

href 是建立超链接

src 是引用外部资源

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

垂直重叠 line-height 设置的比字小即可实现垂直方向上重叠

水平重叠 letter-spacing 设置成负值即可实现水平方向上的重叠

列出dieplay 的值 ， position 说明它们的作用 relative 和absolute 定位原点是

• display

  • block 块

  • inline 行内

  • inline-block 像行内元素一样显示，但其内容像块级元素一样显示

  • list-item 块显示 并添加泪飙标记

• position

  • absolute 生成绝对定位的元素 相对于static 定位意外的第一个祖先元素 进行定位

  • fixed 生成绝对定位的元素 ，相对于浏览器窗口进行定位

  • relative： 生成相对定位 相对于其在普通流中的位置进行定位

  • static 默认值 没有定位 元素出现在正常的文档流中

  • inherit 规定应该从父元素继承 position 属性的值。

px rem 和em 的区别

px 像素 相对长度单位

em 相对于父级的文字大小

默认 1em = 16px 当html {font-size 62.5%；}时 1em= 10 px

但是ie 不成立 所以 font -size：63%；

rem 相对于html 根元素 既可以做到修改根元素就能改变所有的文字大小 又能做到绝对大小

什么是fouc 如何避免fouc

由于css引入使用了@import 或者多个style 标签以及css文件在页面底部引入 使得css文件加载在html之后导致页面闪烁、花屏

解决方式 用link 加载css 文件，放在head 标签里面

link-height 三种赋值方式有何区别

1. 带单位px 不用计算 em 则会使元素以及父元素font-size 值为 参考来计算自己的行高

2. 纯数字 把比例传递给后代，例如父级行高为1.5 子元素字体为18px 则子元素行高为 1.5*18=27

3. 百分比 将计算后的值传递给后代

解决高度塌陷

1. 固定父元素的高度

2. 清除浮动方式

3. 给父元素添加属性 overflow：hidden

4. 在子元素的末尾添加一个空的div 并设置其clear 属性为both