前端HTML及CSS面试考点

前端HTML及CSS面试考点
HTML面试题
1.如何理解HTML语义化？

（1）让人更容易读懂（增加代码可读性）；
（2）让搜索引擎更容易读懂（SEO）。
2.默认情况下，哪些HTML标签是块级元素、哪些是内联元素？

CSS面试题
布局、定位、图文样式、响应式、CSS3
CSS-布局
1.盒子模型的宽怎么计算？

·offsetWidth=（内容宽度+内边距+边框），无外边距；
·因此答案是122px。
补充：如果让offsetWidth等于100px，该如何做？
·答：为div设置box-sizing:border-box;那么offsetWidth的值就是内容的宽度。

2.margin纵向重叠问题

·相邻元素的margin-top和margin-bottom会发生重叠；
·空白内容的

也会发生重叠；
·答案：15px
3.margin负值问题
·对margin的top left right bottom 设置负值，有何效果？
·margin-top和margin-left负值，元素向上、向左移动；
·margin-right负值，右侧元素左移，自身不受影响；
·margin-bottom负值，下方元素上移，自身不受影响。
4.BFC的理解和应用
什么是BFC？如何应用？
·BFC，Block format context，会计格式化上下文；
·一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。
形成BFC的常见条件：
1）float不是none；
2）position是absolute或fixed；
3）overflow不是visible；
4）display是flex inline-block等
BFC的常见应用：清除浮动
5.float布局的问题，以及clearfix
(1)如何实现圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的目的：
·三栏布局，中间一栏最先加载和渲染（内容最重要）
·两侧内容固定，中间内容随着宽度自适应
·一般用于PC网页
圣杯布局和双飞翼布局的技术总结
·使用float布局
·两侧使用margin负值，以便和中间内容横向重叠
·防止中间内容被两侧覆盖，一个用padding一个用margin
(2)手写clearfix

6.flex布局的问题
通过flex实现一个三点的骰子

常用语法回顾：（复习第二阶段P55-56）
·flex-direction ——设置主轴的方向
·justify-content ——定义项目在主轴上的对齐方式
·align-items ——交叉轴对齐方式
·flex-wrap ——设置项目换行
·align-self ——单独设置一个项目交叉轴对齐方式
CSS-定位
1.absolute和relative分别依据什么定位？
·relative依据自身定位
·absolute依据最近一层的定位元素定位
定位元素：
·absolute relative fixed
·body
2.居中对齐有哪些实现方式？
·水平居中
·inline元素：text-align：center
·block元素：margin：auto
·absolute元素：left：50% + margin-left负值
·垂直居中：
·inline元素：line-height的值等于height的值
·absolute元素：top：50% + margin-top负值
（下划线的方法需要知道子元素的高度，如果水平居中需知道子元素的宽度）
·absolute元素：transform:translate（-50%,-50%）
·absolute元素：top,left,bottom,right = 0 + margin:auto
图文样式
·line-height如何继承？

答案：40px
·写具体的数值，如30px，则继承该值（如line-height:30px）；
·写比例，如2/1.5，则继承该比例（如line-height：2；则line-height为16px*2=32px）；
·写百分比，如200%，则继承计算出来的值（考点，如本题）
响应式
·rem是什么？
rem是一个长度单位
·px，绝对长度单位，最常用
·em，相对长度单位，相对于父元素，不常用
·rem，相对长度单位，相对于根元素，常用于响应式布局
·响应式布局的常见方案
·media-query，根据不同的屏幕宽度设置根元素font-size
·rem，基于根元素的相对单位
·rem的弊端

·网页视口尺寸

·vw/vh
·vh网页视口高度的1/100
·vw网页视口宽度的1/100
·vmax取两者最大值（例如手机长方形，一般vh>vw）；vmin取两者最小值