HTML及CSS常见面试题

HTML及CSS常见面试题

HTML部分

1. 如何理解HTML语义化
   一、提高SEO效果，让搜索引擎有效抓取
   二、便于代码的阅读和维护，增加代码可读性
2. 默认情况下，哪些HTML标签是块级元素？哪些是内联元素？
   常见的块级元素：div、header、footer、p、table、h1、ul、ol、li
   常见的内联元素：input、span、i、em、button、img

CSS部分

1. 盒子模型的宽度如何计算？

   • offsetWidth = content + padding + border （不包含margin）
   • width = content + padding + border + margin

2. margin纵向重叠问题？

   • 相邻元素的margin-top和margin-bottom会发生重叠
   • 空白内容的块级标签也会重叠，会被忽略

3. margin负值的问题？

   • margin-top和margin-left设置负值，元素向上，向左移动
   • margin-right负值，右侧元素左移，自身不受影响
   • margin-bottom负值，下方元素上移，自身不受影响

4. BFC的理解和应用

   • Block format context，块级格式化上下文
   • 一块独立渲染区域，内部元素的渲染不会不会影响边界以外的元素
   • 形成BFC的条件：float不是none；position是absolute或fixed；overflow不是visible；display是flex inline-block等
   • 应用：清除浮动

5. 如何实现圣杯布局和双飞翼布局？
   双飞翼布局和圣杯布局的目的：
   三栏布局，中间一栏最先加载和渲染（内容最重要）
   两侧内容固定，中间内容随着宽度自适应
   常用于PC端
   如何实现：
   使用float布局
   两侧使用margin负值，以便和中间内容横向重叠
   防止中间内容被两侧覆盖，一个用padding，一个用margin

6. clearfix的怎么写？

   .clearfix::after {
   	content: '';
   	display: table;
   	clear: both;
   }
   

7. flex实现一个三点的色子

8. absolute和relative分别依据什么定位？
   relative：依据自身定位
   absolute：依据最近一层的定位元素定位 定位元素是指元素样式position设置为absolute、fixed、relative的上级元素，如果没有则依据body

9. 居中对齐有哪些实现方式？

   • 水平居中：
     行内元素：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

10. 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）

11. 响应式布局相关问题：rem是什么？以及em,px
    px，绝对长度单位，任何情况都不改变
    em，相对长度单位，相对于父元素，不常用
    rem，相对长度单位，相对于根元素，常用语响应式
    使用media-query，根据不同屏幕宽度设置根元素font-size

    @media only screen and (max-width: 374px) {
    	html {
    		font-size: 86px;
    	}
    }
    

有新的要点会继续更新