HTML/CSS
2021-03-24 15:02:00 0 举报AI智能生成
前端面试_HTML/CSS
作者其他创作
大纲/内容
HTML
如何理解 HTML 语义化？
<span style="font-size: inherit;">语义化是指根据内容的结构，选择合适的标签</span><br style="font-size: inherit;"><ul><li><span style="font-size: inherit;">让人更容易读懂（增加代码可读性）</span></li><li>让搜索引擎更容易读懂（SEO）</li></ul>
块级元素 & 内联元素
块级元素<br><ul><li>独占一行</li><li><span style="font-size: inherit;">display: block/table; </span></li><li><span style="font-size: inherit;">有 div h1 h2 talbe ul li p 等</span></li></ul>
内联元素<br><ul><li><span style="font-size: inherit;">不会独占一行</span></li><li><span style="font-size: inherit;">display: inline/inline-block; </span></li><li><span style="font-size: inherit;">有 span img input button 等</span></li></ul>
CSS
布局
盒模型的宽度如何计算？
122px
offsetWidth = 内容宽度 + 内边距 + 边框 （无外边距）
如果让 offsetWidth 等于 100px，改怎么做？<br>加上 box-sizing: border-box; offsetWidth 值就是内容宽度
margin 纵向重叠的问题
15px
<ul><li>相邻元素的 margin-top 和 margin-bottom 会发生重叠</li><li>空白内容 <p></p> 也会重叠</li></ul>
margin 负值的问题
对 margin 的 top left right bottom 设置负值，会有何效果？
<ul><li>margin-top 负值，元素向上移动</li><li>margin-left 负值，元素向左移动</li><li>margin-right 负值，右侧元素左移，自身不受影响</li><li>margin-bottom 负值，下方元素上移，自身不受影响</li></ul>
BFC 的理解和应用
什么是 BFC？如何应用？
<span style="font-size: inherit;">什么是 BFC?<br><ul><li>Blcok Format Context，块级格式化上下文</li><li>一块独立渲染的区域，内部元素的渲染不会影响到边界以外的元素</li></ul></span>
形成 BFC 的常见条件：<br><ul><li>float 不是 none </li><li>position 是 absolute 或 fixed</li><li>overflow 不是 visible</li><li>display 是 flex 或 inline-block等</li></ul>
BFC 的常见应用<br><ul><li>清除浮动（为父元素设置 overflow: hidden;）</li></ul>
float 布局的问题，以及 clearfix<br>
如何实现圣杯布局和双飞翼布局？
圣杯布局和双飞翼布局的目的：<br><ul><li>三栏布局，中间一栏最先加载和渲染（内容最重要）<br></li><li>两侧内容固定，中间内容随着屏幕宽度自适应<br></li><li>一般用于 PC 网页</li></ul>
圣杯布局
圣杯布局，防止中间内容被两侧覆盖，container 用 padding
#right margin-right
双飞翼布局
双飞翼布局，防止中间内容被两侧覆盖，container 用 margin
#right margin-left
圣杯布局和双飞翼布局的技术总结：<br><ul><li>使用 float 布局</li><li>两侧使用 margin 负值，以便和中间内容横向重叠</li><li>防止中间内容被两侧覆盖，一个用 padding 一个用 margin</li></ul>
手写 clearfix
flex
flex 常用语法回顾
<ul><li><span style="font-size: inherit;">flex-direction 主轴方向（row | row-reverse | column | column-reverse）</span></li><li><span style="font-size: inherit;">flex-wrap 换行（nowrap | wrap | wrap-reverse）</span></li><li><span style="font-size: inherit;">flex-flow</span> flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap（<flex-direction> || <flex-wrap>）</li><li>justify-content 主轴对齐方式（flex-start | flex-end | center | space-between | space-around）</li><li>align-items 交叉轴对齐方式（flex-start | flex-end | center | baseline | stretch）</li><li><span style="font-size: inherit;">align-self 子元素在交叉轴的对齐方式（auto | flex-start | flex-end | center | baseline | stretch）</span></li></ul>
设为 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
居中对齐有哪些实现方式？
水平居中
<ul><li>inline 元素：text-align: center;</li><li>block 元素：margin: auto;</li><li>absolute 元素：left 50% + margin-left 负值（负值为子元素宽度的一半，需要知道子元素的宽高）</li></ul>
垂直居中
<span style="font-size: inherit;">inline 元素：line-height = height</span><br>
absolute 元素：<br><ul><li>top 50% + margin-top 负值（负值为子元素高度的一半，需要知道子元素的宽高）<br></li><li><span style="font-size: inherit;">left top 50% + transform: translate(-50%, -50%);（无需知道子元素宽高，但需要注意浏览器兼容性）</span></li><li><span style="font-size: inherit;">top right bottom left = 0 + margin: auto;（终极方案，666）</span></li></ul>
图文样式
line-height 的继承问题
<ul><li>写具体数值，如30px，则继承该值</li><li>写比例，如2/1.5，则继承该比例</li><li>写百分比，如200%，则继承计算出来的值</li></ul>
p 标签行高40px
响应式
rem 是什么？
<ul><li><span style="font-size: inherit;">px，绝对长度单位，常用</span></li><li><span style="font-size: inherit;">em，相对长度单位，相对于父元素，不常用</span></li><li><span style="font-size: inherit;">rem，相对长度单位，相对于根元素，常用于响应式布局</span></li></ul>
响应式布局的常用方案
<ul><li>media-query，根据不同屏幕的宽度设置根元素 font-size</li><li>rem，基于根元素的相对单位</li></ul>
vm/vh
rem 的弊端：“阶梯”性
网页视口尺寸<br>
<ul><li>window.screen.height // 屏幕高度</li><li>window.innerHeight // 网页视口高度（去掉浏览器头尾，网页呈现的高度）</li><li>document.body.clientHeight // body 高度</li></ul>
vm/vh
<ul><li><span style="font-size: inherit;">vw 网页视口宽度的1%</span></li><li><span style="font-size: inherit;">vh 网页视口高度的1%<br></span></li><li>vmax 取两者最大值；vmin 取两者最小值</li></ul>
<ul><li>window.innerHeight === 100vh</li><li>window.innerWidth === 100vw</li></ul>
CSS3
关于 CSS3 动画
0 条评论
下一页
