前端面试之html与css总结（作业帮一面）

本文链接：https://blog.csdn.net/m0_43391490/article/details/99642380

前端面试之html与css总结（作业帮一面）

第一次面试，面试过程有点尴尬，很多基础东西不到位，理解模棱两可，希望后面能好一些吧

1.html语义化理解

语义化：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。

举例：段落用 p，边栏用 aside，主要内容用 main 标签。

好处：

便于开发者阅读和维护
有利于SEO：让浏览器的爬虫和辅助技术更好的解析，

语义化标签介绍：

在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。

preview

2.CSS盒模型

（1）基本概念：content、padding、margin。

（2）标准盒模型、IE盒模型的区别。（IE的content包括border和padding）

（3）CSS如何设置这两种模型（box-sizing：content-box/border-box）？

（4）JS如何设置、获取盒模型对应的宽和高？

通过DOM节点的 style 样式获取:element.style.width/height;(只能获取行内样式)
通用型：window.getComputedStyle(element).width/height;（兼容Firefox，chrome，都可）
IE独有的：element.currentStyle.width/height;（行内、内嵌、外链都可）
element.getBoundingClientRect().width/height;（获取一个元素的视窗 viewport 左上角的绝对位置。）

（5）实例题：根据盒模型解释边距重叠。

margin塌陷/margin重叠：

标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin
水平方向的margin是可以叠加的，即水平方向没有塌陷现象
脱标两个盒子之间是没有margin重叠的现象的。
使用父亲的padding，而不是儿子的margin（儿子的margin会变成父亲无border的margin）

前四个方面是逐渐递增，第五个方面，却鲜有人知。

3.BFC（边距重叠解决方案）

1.BFC概念：块级格式化上下文。你可以把它理解成一个独立的区域。

2.BFC 的原理/BFC的布局规则：

（1）BFC 内部的子元素，在垂直方向，边距会发生重叠。

（2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。

（3）BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。

（4）计算BFC的高度时，浮动的子元素也参与计算。

3.如何生成BFC

方法1：overflow: 不为visible，可以让属性是 hidden、auto。【最常用】
方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。
方法4：display为inline-block, table-cell, table-caption, flex, inline-flex

4.解决问题

自适应两栏布局
防止垂直margin塌陷
清除浮动

4.浮动float

1.浮动性质：元素脱标，互相贴靠，字围效果，收缩

2.float属性有四个值：Left和Right，None（默认的）使元素不浮动，Inherit将会从父级元素获取float值。

3.清除浮动：

给浮动元素的祖先增加高度
clear：both—>问题：margin失效
隔墙法：隔div加clear：both
- 内墙法：父内放个div为内墙，clear：both撑出高度
overflow:hidden（清除溢出）—>父亲加overflow：hidden能撑出高度

5.页面布局

5.1左右两栏固定，中间自适应

实现方法：

浮动：左右浮动，中间不管（兼容性好，浮动会脱标）
定位：子绝父相，左0右0，中间设置左右
弹性布局：容器设置为display：flex，两侧设宽，中间设置flex:1(flex-grow flex-shrink flex-basis)
表格布局：容器100%宽，display：table；div—>display:table-cell,左右设置宽，中间不管

网格布局：容器100%宽，display：grid；

grid-template-rows:100px;
grid-template-columns:300px auto 300px

5.2居中问题

标准流

1、行内元素：（文字、图片等水平居中）

给父亲设置：（必须行内元素，display：inline/inline-block）

    text-align: center;

另外，让文字的行高等于盒子的高度，可以让单行文本垂直居中。

 	line-height:盒子高度；

2、块级元素：（让标准流中的盒子水平居中）

给元素设置：（让当前元素在父亲里居中）

	//方式一
 	margin: auto;

	方式二
	margin: 0 auto;

上面的代码， margin: auto相当于margin: auto auto auto auto。margin: 0 auto相当于margin: 0 auto 0 auto，四个值分别对应上右下左。

垂直方向：根据规范，margin-top: auto 和 margin-bottom: auto，其计算值为0。
水平方向：水平方向的 auto，其计算值取决于可用空间（剩余空间）。

非标准流

元素高度已知

方法：绝对定位 + margin-top/margin-left

如果盒子是绝对定位的，此时已经脱标了，margin:auto无效。如果还想让其居中（位于父亲的正中间）

我们先让这个高度为100px的盒子，上边线居中，然后向上移动自己宽度宽度的一半(50px)，就达到了垂直居中的效果。水平居中的原理类似。

			top: 50%;（顶线到父的一半）
            left: 50%;（左线到父的中间）
            margin-left: -100px;（左移自己的一半）
            margin-top: -50px;（上移自己的一半）

元素高度未知

方法1:模拟表格法

将父元素设置为display:table，然后将子元素也（就是要垂直居中显示的元素）设置为display:table-cell，然后加上vertical-align:middle来实现。此时子元素设置宽高无效

display:table-cell；
vertical-align: middle; /*来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/

方式2:绝对定位 + margin:auto

.element {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

方式3:用绝对定位 + translate 位移来做

    div {
        background-color: red;
        position: absolute;       绝对定位的盒子
        top: 50%;               首先，让上边线居中（垂直居中）
        transform: translateY(-50%);    然后，利用translate，往上走自己宽度的一半【推荐写法】
        
        left:50%;   水平居中
        transform: translateX(-50%);
    }

方式4：flex 布局

    .parent{
        display: flex;/*Flex布局*/
        display: -webkit-flex; /* Safari */
        align-items: center;/*设置子元素在侧轴方向上的布局*/
    }

6.CSS层叠性与继承性

CSS的继承性
CSS的层叠性
- 计算权重
- 权重问题大总结
- CSS样式表的冲突的总结
权重问题深入
- 同一个标签，携带了多个类名
- !important标记

继承性

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。

层叠性（权重计算）

层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器

1、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
2、对于相同类型的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

总结：就近原则。ID选择器优先级最大。

权重计算：先看是否选上；id选择器，类选择器，标签选择器；就近原则

总结

选择器越具体，优先级越高。 #xxx 大于 .yyy
同样优先级，写在后面的覆盖前面的。
color: red !important; 优先级最高。
- !important提升的是一个属性，而不是一个选择器
- !important无法提升继承的权重，该是0还是0
- important不影响就近原则

选择器

总结：就近原则。ID选择器优先级最大。

权重计算：先看是否选上；id选择器，类选择器，标签选择器；就近原则

总结

选择器越具体，优先级越高。 #xxx 大于 .yyy
同样优先级，写在后面的覆盖前面的。
color: red !important; 优先级最高。
- !important提升的是一个属性，而不是一个选择器
- !important无法提升继承的权重，该是0还是0
- important不影响就近原则