HTML/CSS

HTML/CSS

HTML

如何理解 HTML 语义化？

语义化是指根据内容的结构，选择合适的标签让人更容易读懂（增加代码可读性）让搜索引擎更容易读懂（SEO）

块级元素 & 内联元素

块级元素独占一行display: block/table; 有 div h1 h2 talbe ul li p 等

内联元素不会独占一行display: inline/inline-block; 有 span img input button 等

CSS

布局

盒模型的宽度如何计算？

122px

offsetWidth = 内容宽度 + 内边距 + 边框  （无外边距）

如果让 offsetWidth 等于 100px，改怎么做？加上 box-sizing: border-box; offsetWidth 值就是内容宽度

margin 纵向重叠的问题

15px

相邻元素的 margin-top 和 margin-bottom 会发生重叠空白内容 <p></p> 也会重叠

margin 负值的问题

对 margin 的 top left right bottom 设置负值，会有何效果？ 

margin-top 负值，元素向上移动margin-left 负值，元素向左移动margin-right 负值，右侧元素左移，自身不受影响margin-bottom 负值，下方元素上移，自身不受影响

BFC 的理解和应用

什么是 BFC？如何应用？

什么是 BFC?Blcok Format Context，块级格式化上下文一块独立渲染的区域，内部元素的渲染不会影响到边界以外的元素

形成 BFC 的常见条件：float 不是 none position 是 absolute 或 fixedoverflow 不是 visibledisplay 是 flex 或 inline-block等

BFC 的常见应用清除浮动（为父元素设置 overflow: hidden;）

float 布局的问题，以及 clearfix

如何实现圣杯布局和双飞翼布局？

圣杯布局和双飞翼布局的目的：三栏布局，中间一栏最先加载和渲染（内容最重要）两侧内容固定，中间内容随着屏幕宽度自适应一般用于 PC 网页

圣杯布局

圣杯布局，防止中间内容被两侧覆盖，container 用 padding

#right margin-right

双飞翼布局

双飞翼布局，防止中间内容被两侧覆盖，container 用 margin

#right margin-left

圣杯布局和双飞翼布局的技术总结：使用 float 布局两侧使用 margin 负值，以便和中间内容横向重叠防止中间内容被两侧覆盖，一个用 padding 一个用 margin

手写 clearfix

flex

flex 常用语法回顾

flex-direction 主轴方向（row | row-reverse | column | column-reverse）flex-wrap 换行（nowrap | wrap | wrap-reverse）flex-flow flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap（<flex-direction> || <flex-wrap>）justify-content 主轴对齐方式（flex-start | flex-end | center | space-between | space-around）align-items 交叉轴对齐方式（flex-start | flex-end | center | baseline | stretch）align-self 子元素在交叉轴的对齐方式（auto | flex-start | flex-end | center | baseline | stretch）

设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效

阮一峰 Flex 布局教程：语法篇（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

flex 实现一个三点的色子

定位

absolute 和 relative 分别依据什么定位？

relative 依据自身定位

absolute 依据最近一层的定位元素定位

定位元素：bsolute relative fixed 直到 body

居中对齐有哪些实现方式？

水平居中

inline 元素：text-align: center;block 元素：margin: auto;absolute 元素：left 50% + margin-left 负值（负值为子元素宽度的一半，需要知道子元素的宽高）

垂直居中

inline 元素：line-height = height

absolute 元素：top 50% + margin-top 负值（负值为子元素高度的一半，需要知道子元素的宽高）span style=\"font-size: inherit;\

图文样式

line-height 的继承问题

写具体数值，如30px，则继承该值写比例，如2/1.5，则继承该比例写百分比，如200%，则继承计算出来的值

p 标签行高40px

响应式

rem 是什么？

px，绝对长度单位，常用em，相对长度单位，相对于父元素，不常用rem，相对长度单位，相对于根元素，常用于响应式布局

响应式布局的常用方案

media-query，根据不同屏幕的宽度设置根元素 font-sizerem，基于根元素的相对单位

vm/vh

rem 的弊端：“阶梯”性

网页视口尺寸

window.screen.height // 屏幕高度window.innerHeight // 网页视口高度（去掉浏览器头尾，网页呈现的高度）document.body.clientHeight // body 高度

vw 网页视口宽度的1%vh 网页视口高度的1%vmax 取两者最大值；vmin 取两者最小值

window.innerHeight === 100vhwindow.innerWidth === 100vw

CSS3

关于 CSS3 动画