HTML

如何理解HTML语义化？

HTML的作用是表达页面的内容与结构，在使用HTML时，能否清晰的表达出一个页面的内容与结构至关重要。清晰表达的关键就是遵循语义（元素、属性和属性值）编写HTML。具体来说，语义化HTML的优势有：

• 便于开发者维护和修改（可读性）；
• 便于浏览器展示页面；
• 便于搜索引擎提取关键词、建立索引并排序（搜索引擎优化）；
• 便于残疾人（正常人在特殊场景下也应被视为残疾人，如拥挤的公交车上）通过辅助设备阅读页面内容（无障碍性）；

说说对块级元素与内联元素的认识？

• 块级元素：
  • display:block；
  • 包括：div, p, h, ul, ol等；
  • 特点：独占一行；
• 内联元素：
  • display:inline；
  • 包括：span, input, button, img等；
  • 特点：在行上依次排列，直到放不下时，才会进行换行；

CSS

布局

盒模型宽度如何计算？

• 默认：width + 内边距 + 边框宽度；
• border-box： width；

margin在什么情况下会产生重叠？

• 只有垂直方向的外边距会产生重叠，取较大值；
• 空内容标签会被折叠；

margin设置为负值会产生什么效果？

• margin-top：元素自身上移；
• margin-left：元素自身左移；
• margin-right：元素自身不受影响，右侧其它元素左移；
• margin-bottom：元素自身不受影响，下侧其它元素上移；

如何理解BFC（Block Format Context, 块级格式化上下文）？

• 特点：独立渲染区域，即内部的渲染不会影响外部的其它区域；
• 形成BFC的条件：
  • float不是none；
  • overflow不是visible；
  • position是absolute或fixed；
  • display是flex或inline；
• BFC常见应用：清除浮动，避免元素脱离文档流；

Flex布局如何使用？

• flex-direction控制盒子摆放方向；
• flex-direction方向为主轴，主轴垂直方向为侧轴；
• justify-content主轴对齐，align-items侧轴对齐；
• flex-wrap换行，align-self子元素在交叉轴的对齐方式；
• order盒子摆放顺序；

定位

absolute和relative有什么区别？

• relative依据自身进行定位；
• absolute依据最近的父级定位（absolute，relative,fixed）元素进行定位，父级定位元素不存在时，则相对body进行定位；

如何实现居中对齐？

• 水平居中
  • inline元素：text-align: center；
  • block元素：margin: auto；
  • absolute元素：left: 50% margin-left: 负值；
• 垂直居中
  • inline元素：line-height: 行高；
  • absolute元素：
    • top: 50% margin-top: 负值；
    • transform(-50%, -50%)；
    • top, left, bottom, right = 0 margin: auto；

响应式

CSS常用的长度单位有哪些？

• px，绝对长度单位；
• em，相对长度单位，相对父元素；
• rem，相对长度单位，相对根元素；
• vh/vw，相对长度单位，相对视口，值为视口高度/宽度的百分之一；
• vmax/vmin，相对长度单位，值为vh/vw的最大/最小值；

如何实现响应式布局？

• 使用rem，根据不同的屏幕宽度(media-query)设置根元素的font-size；
• 使用vmax/vmin；

CSS中如何继承？

继承包括隐式继承与显式继承，其中隐式继承（主要是字体）会自动继承父级元素的样式（计算值），而对于不能隐式继承样式，可以通过inherit属性关键字进行显式继承。 

CSS中优先级是如何确定的？

选择器的特异度决定了优先级，从而导致样式的覆盖，具体地，id > （伪）类 > 标签。

CSS是如何工作的？