YuJian
3 years ago
1 changed files with 80 additions and 0 deletions
@ -0,0 +1,80 @@ |
|||||||
|
# HTML & CSS 面试 |
||||||
|
|
||||||
|
## HTML 知识模块 |
||||||
|
|
||||||
|
- 如何理解HTML语义化？ |
||||||
|
- 对人友好，增加代码可读性 |
||||||
|
- 对搜素引擎友好，便于优化SEO |
||||||
|
- 哪些HTML是块级元素、哪些是内联元素？ |
||||||
|
- 块状元素： display:block/table; 有div h1 table ul p等，特点是需要独占一行 |
||||||
|
- 内联元素： display:inline/inline-block; 有span img input button等，特点是不独占，顺序往后排 |
||||||
|
|
||||||
|
## CSS 知识模块 |
||||||
|
|
||||||
|
- 布局 |
||||||
|
- 盒子模型的宽度如何计算？ |
||||||
|
- offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距 |
||||||
|
- box-sizing： broder-box |
||||||
|
- margin纵向重叠的问题 |
||||||
|
- 相邻元素的margin-top和margin-bottom会发生重叠 |
||||||
|
- margin负值的问题 |
||||||
|
- margin-top和margin-left负值，元素向上、向左移动 |
||||||
|
- margin-right负值，右侧元素左移，自身不受影响 |
||||||
|
- margin-bottom负值，下方元素上移，自身不受影响 |
||||||
|
- BFC的理解和应用 |
||||||
|
- Block format context 块级格式化上下文 |
||||||
|
- 独立的渲染区域，内部元素的渲染不会影响到边界以外的元素 |
||||||
|
- 形成BFC的常见条件 |
||||||
|
1. float不是none |
||||||
|
2. position是absolute或fixed |
||||||
|
3. overflow不是visible |
||||||
|
4. display是flex inline-block等 |
||||||
|
- BFC可以用于清除浮动 |
||||||
|
- float布局的问题，以及clearfix |
||||||
|
- 双飞翼布局和圣杯布局 |
||||||
|
- 手写clearfix |
||||||
|
- flex布局的问题 |
||||||
|
- 常用语法 |
||||||
|
1. flex-direction |
||||||
|
2. justify-content |
||||||
|
3. align-items |
||||||
|
4. flex-wrap |
||||||
|
5. align-self |
||||||
|
- 定位 |
||||||
|
- absolute和relative分别依据什么定位？ |
||||||
|
- relative依据自身定位 |
||||||
|
- absolute依据最近一层的定位元素定位 |
||||||
|
- 定位元素 absolute relative fixed body |
||||||
|
- 居中对齐有哪些实现方式？ |
||||||
|
- 水平居中 |
||||||
|
1. inline元素： text-align:center |
||||||
|
2. block元素： margin:auto |
||||||
|
3. absolute元素：left:50% + margin-left负值 |
||||||
|
- 垂直居中 |
||||||
|
1. inline元素： line-height的值等于height值 |
||||||
|
2. absolute元素：top:50% + margin-top负值 |
||||||
|
3. absolute元素：transform(-50%, -50%) |
||||||
|
4. absolute元素：top.left,bottom,right = 0 + margin:auto |
||||||
|
- 图文样式 |
||||||
|
- line-height的继承问题 |
||||||
|
- 写数值则继承数值 |
||||||
|
- 写比例则继承比例 |
||||||
|
- 写百分比则继承父元素计算的值 |
||||||
|
- 响应式 |
||||||
|
- rem是什么？ |
||||||
|
- 相对长度单位，相对于根元素 |
||||||
|
- 如何实现响应式？ |
||||||
|
- media-query 根据不同的屏幕宽度设置根元素font-size |
||||||
|
- rem的弊端 |
||||||
|
- 存在阶梯性 |
||||||
|
- 网页视口尺寸 |
||||||
|
- windows.screen.height // 屏幕高度 |
||||||
|
- windows.innerHeight // 网页视口高度 |
||||||
|
- windows.innerWidth // 网页视口宽度 |
||||||
|
- document.body.clientHeight // body高度 |
||||||
|
- vw/vh |
||||||
|
- vh 网页视口高度的1/100 |
||||||
|
- vw 网页视口宽度的1/100 |
||||||
|
- vmax取两者最大值；vmin取两者最小值 |
||||||
|
- CSS3 |
||||||
|
- 关于CSS3动画 |
||||||
Loading…
Reference in new issue