html&css极简面试题HTML&CSS面试题，可以在面试前温故知新，保证在与面试官的对线中不落下风，答出自己的风采和

1. 如果理解 HTML 语义化

思考下面两段代码谁更有语义？

语义化标签是⼀种写 HTML 标签的⽅法论（⽅式）

增加代码可读性，利于维护
让搜索引擎更容易读懂（SEO）

2. 块状元素&内联元素？

块级元素：display:block/table 的有 div h1-h6 table ulolli p 等

内联元素：display:inline/inline-block 的有 span img input button strong等

3.知道的网页制作会用到的图片格式有哪些？

png，jp(e)g，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。

4. 盒模型宽度计算

offsetWidth = (内容宽度+内边距+边框)，无外边距

下面举例计算其 offsetWidth ：

div{
	with:100px;
	padding:10px
	border 1px solid #ccc;
	margin: 10px;
}

其offsetWidth 为122px

注意:如果让offsetWidth等于100px如何做

div{
    box-sizing:border-box;
    with:100px;
    padding:10px
    border 1px solid #ccc;
    margin: 10px;
}

5.如何简单实现一个三角形

首先我们需要把宽度为0
其次我们就可以设置边框
最后只要将其三块边框设置为透明色就可以达到想要的效果

#triangle{
    width: 0;
    border: 30px solid transparent;
    border-bottom-color: tomato;
}

6.如何实现一个扇形

实现扇形跟上个实现三角形是一样的，无非多加了边框圆角，其次把不需要的设置为透明色

#sector{
    width: 0;
    border-top: 100px solid red;
    border-bottom: 100px solid yellow;
    border-left: 100px solid green;
    border-right: 100px solid blue;
    border-radius: 100px;
}

<div id="sector"></div>

7.margin纵向重叠问题

p{
    font-size: 16px;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 15px;
}

<p>aaa</p>
<p></p>
<p></p>
<p></p>
<p>bbb</p>

按道理来讲：aaa到bbb之间15px + (10px + 15px )*3+10px = 100px

但事实上aaa到bbb之间的距离为：15px

8.对margin的top left right bottom设置为负值，有何效果？

聊这这个问题我们需要知道

margin-top left是平移元素自身
margin-right bottom 平移其他元素

效果:

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

9. 什么是BFC？如何应用？

块格式化上下文（block formatting context）
一块独立渲染区域，内部元素的渲染不会影响边界以为的元素。

那么形成BFC的常见条件：

float属性不为none
position的值不是static或者relative;
overflow不为visible
display为inline-block, table-cell,table-caption,flex,inline-flex

开启BFC特点作用

开启BFC的元素不会被浮动元素覆盖
开启BFC的元素父子外边距不会合并
开启BFC的元素可以包含浮动的子元素（解决浮动高度塌陷）

11.float布局

并排一行
破坏文档流
包裹块状化

手写clearfix(清除浮动)

.clearfix::after{
	content:"";
	display:block;
	clear:both;
}

12. flex布局实现三个点的色子

聊这个问题之前必须得对flex有一个基本认识

思路：

首先画出三个点和最大的盒子
使用flex布局，且用justify-content分配容器的空间，两端对齐space-between
那么在第二个设置垂直居中
第三个点设置垂直居下

.box{
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;

    display: flex;
    justify-content: space-between;
    /* flex-direction: row-reverse;  */
}
.item{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #666;
}
.item:nth-child(2){
    align-self: center;
}
.item:nth-child(3){
    align-self: flex-end;
}


<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

13.定位有哪些? 分别参照什么定位？

static 无定位
relative 参照自身定位
absolute 参照最近一层有定位属性的祖先元素
fixed 参照视口定位
sticky 参照最近有滚动的祖先元素

14.如何使一个元素水平垂直居中

行内元素

定位元素

Flex布局

Grid布局

单元格

行内元素

块级元素

15.line-height如何继承

写具体数值,如30px,则继承该值(比较好理解)
写比例,如2/1.5 ,则继承该比例(比较好理解)
写百分比,如200% ,则继承计算出来的值(考点)

16.哪些属性能继承

文本字体相关的属性普遍具有继承性，如

color
font-开头的
list-开头的
text-开头的
line-开头的

17.消除图片底部间隙的方法

图片块状化 - 无基线对齐：img { display: block; }
图片底线对齐：img { vertical-align: bottom; }
父级设置font-size:0;
行高足够小 - 基线位置上移：.box { line-height: 0; }

18.单行多行文字溢出隐藏

单行文字：

#box1 {
    border: 1px solid #ccc;
    width: 100px;
    white-space: nowrap; /* 不换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出省略 */
}

多行文字：

#box2 {
    border: 1px solid #ccc;
    width: 100px;
    overflow: hidden;
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置子元素排列方式 */
    -webkit-line-clamp: 3; /* 显示几行，超出的省略 */
}

19.rem是什么及 px、em、rem、%、vw/vh的区别？

px 像素。绝对单位，像素px是相当于于显示器屏幕分辨率而言的
em 相对长度单位，相对于父元素，不常用
- font-size设置em是相当于父元素的字体大小，
- 而 width 和 height 是相对自身的字体大小
rem 相对于根元素html的字体大小，常用于移动端布局
- font-size、width和height始终相对于根字体大小
% 相对于父元素的尺寸
vw 屏幕宽度的 1%
vh 屏幕高度的 1%
vmin 两者最小值
vmax 两者最大值

20.响应式布局常见的方案？

响应式是通过媒体查询技术使得一个网站兼容多种屏幕尺寸的设备

通过响应式实现rem布局

/* 断点 320px 414px 540px 768px 992px 1200px */
html {
    font-size: 4px;
}
@media (min-width: 320px) {
    html {
        font-size: 5px;
    }
}
@media (min-width: 414px) {
    html {
        font-size: 6px;
    }
}
@media (min-width: 540px) {
    html {
        font-size: 8px;
    }
}
@media (min-width: 768px) {
    html {
        font-size: 11px;
    }
}
@media (min-width: 992px) {
    html {
        font-size: 14px;
    }
}
@media (min-width: 1200px) {
    html {
        font-size: 18px;
    }
}

通过js来实现rem布局

{
    const docEl = document.documentElement;

    const setHtmlFontSize = () => {
        const viewWidth = docEl.clientWidth;
        // 1rem = 10px
        docEl.style.fontSize = `${viewWidth / 75}px`;
    };

    setHtmlFontSize();
    window.addEventListener('resize', setHtmlFontSize, false);
}

21.使用一个元素显示以及隐藏的方式？

display:none; 元素不占据空间且无法点击 株连九族性能消耗大
opacity: 0; 元素占据空间可以点击 株连九族性能消耗小
visibility:hidden; 其占据的空间依旧会保留;无法点击
通过移动元素位置比如margin 移动到屏幕外面进行隐藏
设置height，width等盒模型属性为0
- 影响元素盒模型的属性设置成0
- 如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素