HTML及CSS常见面试题
HTML部分
- 如何理解HTML语义化
一、提高SEO效果,让搜索引擎有效抓取
二、便于代码的阅读和维护,增加代码可读性 - 默认情况下,哪些HTML标签是块级元素?哪些是内联元素?
常见的块级元素:div、header、footer、p、table、h1、ul、ol、li
常见的内联元素:input、span、i、em、button、img
CSS部分
-
盒子模型的宽度如何计算?
- offsetWidth = content + padding + border (不包含margin)
- width = content + padding + border + margin
-
margin纵向重叠问题?
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的块级标签也会重叠,会被忽略
-
margin负值的问题?
- margin-top和margin-left设置负值,元素向上,向左移动
- margin-right负值,右侧元素左移,自身不受影响
- margin-bottom负值,下方元素上移,自身不受影响
-
BFC的理解和应用
- Block format context,块级格式化上下文
- 一块独立渲染区域,内部元素的渲染不会不会影响边界以外的元素
- 形成BFC的条件:float不是none;position是absolute或fixed;overflow不是visible;display是flex inline-block等
- 应用:清除浮动
-
如何实现圣杯布局和双飞翼布局?
双飞翼布局和圣杯布局的目的:
三栏布局,中间一栏最先加载和渲染(内容最重要)
两侧内容固定,中间内容随着宽度自适应
常用于PC端
如何实现:
使用float布局
两侧使用margin负值,以便和中间内容横向重叠
防止中间内容被两侧覆盖,一个用padding,一个用margin -
clearfix的怎么写?
.clearfix::after { content: ''; display: table; clear: both; }
-
flex实现一个三点的色子
-
absolute和relative分别依据什么定位?
relative:依据自身定位
absolute:依据最近一层的定位元素定位 定位元素是指元素样式position设置为absolute、fixed、relative的上级元素,如果没有则依据body -
居中对齐有哪些实现方式?
- 水平居中:
行内元素:text-align:center
块级元素:margin:auto
absolute元素:left:50%;margin-left:-50%width; - 垂直居中:
行内元素:设置line-height等于height
absolute元素:top:50%;margin-top:-50%height;
absolute元素:transform:translate(-50%,-50%)+ top = 50%,left = 50% 注意浏览器兼容性
absolute元素:top,bottom,left,right = 0 + margin:auto
- 水平居中:
-
line-height的继承问题
body { font-size: 20px; line-height: 具体值 } p { font-size: 16px; }
给定具体数值,例如30px,则继承该值(即P中文字行高为30px)
写比例,如1.5,则继承该比例 行高=比例*当前元素字体大小(即P中行高为1.5 X 16 = 24px)
写百分比,如200%,则继承计算出来的值(考点)(P中文字行高即为20 X 200% = 40px) -
响应式布局相关问题:rem是什么?以及em,px
px,绝对长度单位,任何情况都不改变
em,相对长度单位,相对于父元素,不常用
rem,相对长度单位,相对于根元素,常用语响应式
使用media-query,根据不同屏幕宽度设置根元素font-size@media only screen and (max-width: 374px) { html { font-size: 86px; } }