前端面试知识 - HTML、CSS篇

电玩女神 2023-01-15 11:27 147阅读 0赞

### 前端面试常见知识点 ###

*  前言
 *  html
 *  css

# 前言 #

这部分相对来说比较简单，大神可以直接跳过哈！

# html #

html部分（考察较少较简单，组织好语言即可）

1.  如何理解语义化  
    （1）便于理解，提高代码可读性  
    （2）有利于SEO
2.  解释块状元素和行内元素
3.  h5的一些新特性  
    （1）标签语义化  
    （2）新增media查询  
    （3）新增了一些标签，eg：video、audio等  
    （4）本地存储（可能会引申到cookie、sessionStory、localStory等问题）

# css #

1.  盒子模型宽度计算  
    （1）offsetWidth = 除了margin的所有宽度相加  
    （2）box-sizing常用值和作用

*  box-sizing: content-box|border-box;
 *  为border-box时offsetWidth = width（即宽度包含border和padding）

1.  伪类选择器和伪元素：[看这里][Link 1]
2.  浮动，解释高度塌陷，如何清除浮动或者说怎样解决高度塌陷（详见8，9，还有增加新div元素，css设置为clear: both）
3.  css实现三角型、梯形、圆
4.  margin纵向重叠问题  
    （1）相邻元素的margin-top和bottom会重叠  
    （2）且空白标签也会重叠

// 举例说明（这里只有css和html哈）
    // 好好好、棒棒棒之间的距离是多少
       <style type="text/css">
            div {
                font-size: 16px;
                line-height: 1;
                margin-top: 10px;
                margin-bottom: 15px;
            }
            p {
                font-size: 16px;
                line-height: 1;
                margin-top: 10px;
                margin-bottom: 15px;
            }
        </style>
    </head>
    <body>
    
    <div>好好好</div>
    <div></div>
    <p></p>
    <div>棒棒棒</div>
    
    </body>
    // 答案：15px

1.  margin负值  
    （1）margin-top、margin-left负值，元素分别向上向左移动  
    （2）margin-right负值，自身不动，右侧元素左移  
    （3）margin-bottom负值，自身不动，下侧元素上移
2.  BFC相关问题（[BFC详细讲解看这里][BFC].）  
    （1）形成BFC常见条件  
    overflow 值不为 visible 的元素  
    float不是none  
    display 值为 flow-root 的元素  
    position 为 absolute 或 fixed  
    （2）BFC常见使用场景  
    两个BFC可以避免margin重叠（但是BFC内部相邻容器不能避免）  
    可以用来自适应两栏布局（BFC的区域不会与float box重叠）  
    包含有浮动的元素，不会造成高度塌陷  
    （3）BFC的布局规则  
    BFC内部的盒子会垂直排列  
    BFC区域不会和float盒子重叠  
    BFC即页面上独立的容器，不会影响外部布局
3.  手写clearfix

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

1.  flex布局  
    感觉比较简单，这里就不细说了哈，有需要看这里（[阮一峰的flex语法][flex].）
2.  定位  
    （1）relative和absolute  
    relative：相对自己定位  
    absolute：相对上级relative元素，如果没有上级，则相对当前窗口  
    （2）居中对齐  
    水平居中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70]  
    垂直居中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70 1]  
    还有flex布局可以实现flex-direction和justify-content搭配
3.  响应式  
    （1）line-height继承

*  具体数值（eg：20px），直接继承；
 *  比例（eg：2），则继承比例
 *  百分比（eg：200%），则继承计算后的值

// 比例：p的line-height为16 * 200% = px
    		body {
                font-size: 20px;
                line-height: 200%;
            }
            p {
                background-color: #ccc;
                font-size: 16px;
            }

// 百分比：p的line-height为20 * 200% = 40px
    		body {
                font-size: 20px;
                line-height: 200%;
            }
            p {
                background-color: #ccc;
                font-size: 16px;
            }

（2）rem和em区别  
都是相对长度，  
但rem相对于根元素来定，在根元素中设定font-size后，即可自动相应；  
em是相对于父元素来定，常用于padding和margin这些，可以随着font-size变化  
（3）响应式常用方案（用过哪些说哪些，结合自己项目就行，这里大概罗列一下）

*  百分比；
 *  rem搭配media query（注意：iphone 6/7/8/x 375-414px）
 *  vw、vh使用（也可以称作vmax、vmin）  
    ![在这里插入图片描述][20210225181705324.png]

1.  浏览器的兼容问题
2.  Css动画：[菜鸟教程解释的很全面][Link 2]

// 一个简单的栗子
    {
    	background:red;
    	animation:mymove 5s infinite;
    	/*Safari 和 Chrome:*/
    	-webkit-animation:mymove 5s infinite;
    }
    
    @keyframes mymove
    	{
    	from {background-color:red;}
    	to {background-color:blue;}
    }

[Link 1]: https://www.runoob.com/css/css-pseudo-classes.html
[BFC]: https://blog.csdn.net/sinat_36422236/article/details/88763187
[flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70]: /images/20221022/cea9fad7ca5f4d4cbf56a22a7795225e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70 1]: /images/20221022/33e0db14dbae439da6b3e29182403b82.png
[20210225181705324.png]: /images/20221022/9c84f6de6d0a444291260cb0b40c3f15.png
[Link 2]: https://www.w3school.com.cn/css/css3_animations.asp