YuJian
3 years ago
1 changed files with 80 additions and 0 deletions
@ -0,0 +1,80 @@
@@ -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