首页  思维导图  详情

HTML/CSS

2021-03-24 15:02:00   0  举报





仅支持查看

AI智能生成

前端面试_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 或 fixed
overflow 不是 visible
display 是 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

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

水平居中