html+css

目录

1. 说说html5的新特性。

• answer

  0. 拖拽释放 API
  1. 自定义属性 data-id
  2. 更具语义化的标签。header、nav、footer、aside、article、section
  3. 画布canvas
  4. 本地存储 localStorage、sessionStorage
  5. websocket

2. 说说css3的新特性。

• answer

  0. 盒子模型box-sizing
  1. 渐变 linear-gardient
  2. 过渡 transition
  3. 自定义动画 animation @keyfrom
  4. 媒体查询
  5. 弹性盒模型(flex布局)

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

• answer

  0. 利用定位，top: 50%；left: 50%；maigin-left: xxpx; margin-top: xxpx;
  1. 利用flex 布局，父盒子开启flex布局，并设置justify-content: center; align-items:center;
  2. 利用定位+margin: auto ，子盒子设置margin: auto; top: 0; left: 0; bottom: 0; right: 0

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

• answer

  1. 父元素设置固定的padding-left和padding-right，左右两个子元素使用float；

  2. 父元素设置固定的padding-left和padding-right，左右两个子元素使用相对定位；

  3. 父元素使用flex布局，左右两个子元素设置宽度，中间元素设置flex: 1

5. 如何理解html中的语义化标签。

• answer

  1. 代码结构清晰，方便阅读，有利于团队合作开发。 2. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。 3. 有利于搜索引擎优化（SEO）。

6. 说说各种选择器的优先级。

• answer

  !important优先级最高。

  行内样式>id选择器>类选择器=伪类选择器=属性选择器>标签选择器>通配符选择器

7. 说说你对BFC的理解。

• answer

  BFC中文是块级格式化上下文。是一个独立的渲染区域，不会影响外部区域的元素。

  产生BFC的方式：html根元素、浮动、绝对定位、行内块元素、overflow不为visible的元素。

  BFC的常见用法：

  0. 清除浮动(外层容器设置overflow: hidden)
  1. 清除外边距折叠(两个盒子设置overflow: hidden)

8. 如何清除浮动。

• answer

  0. 父元素内末尾添加一个div标签，并设置样式clear: both
  1. 单伪元素清除法
  2. 双伪元素清除法
  3. 使用BFC，父元素设置样式overflow: hidden

9. 两种盒子模型的区别。

• answer

  box-sizing: content-box (默认) css中的width = content + padding + margin + border

  box-sizing: border-box css中的width = content + padding + border