前端面试自测知识点---HTML和CSS

Bertha 。 2022-09-13 15:29 169阅读 0赞

#### HTML面试题 ####

*  如何理解HTML语义化？

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YOP5qCRXw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

**好处：**

*  让人更容易读懂（增加代码的可读性）
 *  让搜索引擎更容易读懂（SEO）
 *  举例：header 、footer、article、aside、nav
 *  默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
    
    HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
    
    (1)display:inline;转换为行内元素
    
    (2)display:block;转换为块状元素
    
    (3)display:inline-block;转换为行内块状元素
    
    **块状元素**
    
    独占一行
    
     *  display: block/table; 有div h1 h2 table ul ol p等
    
    **内联元素**
    
    不会独占一行，会一直排直到浏览器换行为止
    
     *  display: inline / inline-block; 有span img input button 等

#### CSS面试题 ####

##### 布局 #####

*  盒模型的宽度如何计算？
    
     *  offsetWidth = （内容宽度 + 内边距 + 边框），无外边框
     *  如何让offsetWidth 等于 100px？ 加属性：box-sizing: border-box
 *  margin纵向重叠的问题
    
     *  相邻元素的margin-top和margin-bottom会发生重叠
     *  空白内容的`<p></p>`也会重叠 （忽略）
 *  margin负值的问题（top left right bottom）
    
     *  margin-top和margin-left负值，元素向上、向左移动
     *  margin-right负值，右侧元素左移，自身不受影响
     *  margin-bottom负值，下方元素上移，自身不受影响
 *  BFC理解和应用 （重要）
    
     *  Block format context 块级格式化上下文
     *  一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
     *  形成BFC的常见条件
        
         *  float不是none
         *  position是absolute或fixed
         *  overflow不是visible
         *  display是flex inline-block 等
     *  BFC的常见应用
        
         *  清除浮动 （可以用clearfix 也可以用BFC）
 *  float布局的问题，以及clearfix
    
     *  如何实现圣杯布局和双飞翼布局 （考察float的重要题型）
        
        圣杯布局和双飞翼布局的目的：
        
         *  三栏布局，中间一栏最先加载和渲染（内容最重要）
         *  两侧内容固定，中间内容随着宽度自适应
         *  一般用于PC网页
        
        圣杯布局和双飞翼布局的技术总结：
        
         *  使用float布局
         *  两侧使用margin负值，以便和中间内容横向重叠
         *  为了防止中间内容被两侧覆盖，一个用padding，一个用margin
     *  手写clearfix
 *  flex画色子
    
     *  flex实现一个3点色子
     *  flex常用语法
        
         *  flex-direction
         *  justify-content
         *  align-items
         *  flex-wrap
         *  align-self (子元素常用的属性)

##### 定位 #####

*  absolute 和 relative 分别依据什么来定位？
    
     *  relative依据自身定位
     *  absolute依据最近一层的**定位元素**定位
     *  定位元素有：
        
         *  absolute、relative、fixed
         *  body
 *  居中对齐有哪些实现方式？
    
     *  水平居中
        
         *  inline元素：text-align:center
         *  block元素：margin:auto
         *  absolute元素：left: 50%（往右移父元素的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的继承问题
    
     *  写具体数值，如30px，则直接继承该数值（较好理解）
     *  写比例，如 2/1.5，则继承该比例（较好理解）
     *  写百分比，如200%，则继承计算出来的值

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YOP5qCRXw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

答案是 40px

##### 响应式 #####

*  rem是什么？ （em，px）
    
     *  rem是长度单位
     *  px是绝对长度单位，最常用
     *  em 相对长度单位，相对于父元素（不好控制），不常用
     *  rem，相对长度单位，相对于根元素（可以统一来控制），常用于响应式布局
 *  如何实现响应式（响应式布局的常见方案）
    
     *  media-query ，根据不同的屏幕宽度设置根元素font-size
     *  rem 基于根元素的相对单位
 *  CSS响应式 — vw/vh
    
     *  rem的弊端
        
         *  "阶梯"性
     *  网页视口尺寸
        
         *  window.screen.height // 屏幕高度
         *  window.innerHeight // 网页视口高度 （浏览器里可以显示网页内容的高度）
         *  document.body.clientHeight // body高度 （和页面内容有关）
     *  vw/vh
        
         *  vh 网页视口高度的1/100
         *  vw 网页视口宽度的 1/100
         *  vmax取两者中最大值，vmin取两者中最小值
         *      window.innerHeight === 100vh
                window.innerWidth === 100vw

##### CSS3 #####

*  关于CSS3的动画

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YOP5qCRXw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/79267fdd10b344ccb88236b5bef3878e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YOP5qCRXw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/20e857c2ca0e43809d8dc8a3d913cb09.png