【牛牛前端面试每天练】一，HTML与CSS专项

文章目录

• • • 一，说一下BFC

    • • 1.1 解题思路

      • 1.2 作答

    • 二，说一下样式优先级的规则

    • • 2.1 解题思路

      • 2.2 作答

    • 三，说一下浮动

    • • 3.1 解题思路

      • 3.2 作答

    • 四，说一说HTML语义化

    • 五，说一说盒模型

    • • 5.1 解题思路

      • 5.2 作答

一，说一下BFC

1.1 解题思路

• 概念特点

• 形成条件

• 用途

• 加分项：清除浮动详论、IFC和GFC

1.2 作答

BFC全称为块级格式化上下文，在web页面作为一个独立的渲染区域，内部元素的渲染不会影响到边界以外的元素。计算BFC高度时，浮动元素也会参与计算。属于在同一个BFC中的两个垂直相邻的盒子margin会发生塌陷重叠。

形成条件有：

1. 设置float为leftorright。

2. 固定定位或绝对定位

3. overflow值非visible，而是auto，scroll，hidden

4. 元素显示模式为flex或者inline-block等

用途：清除浮动

BFC的方式都可以清除浮动，不过常使用的清除浮动的BFC方法只有overflow:hidden，原因是当我们使用float或者position方式清除时，虽然父级本身浮动清除，但父级脱离文档流，对后面父级的兄弟盒子的布局会造成影响。而设置父级为display: flex，父级内部的浮动又会失效，因此通常只用overflow:hidden清除浮动。

IFC:内联格式上下文，高度由其包含行内元素中最高的实际高度计算

GFC:网络布局格式化上下文，当一个元素设置display为grid时，该元素也会得到一个独立的渲染区域

FFC自适应格式上下文，对应的就是flex布局，形成自适应容器。

---

二，说一下样式优先级的规则

2.1 解题思路

• 按优先级顺序回答

• 加分项：!important

2.2 作答

样式优先级为!important、行内样式、嵌入样式、外联样式、id选择器、类选择器、标签选择器、符合选择器、通配符选择器、继承样式。

使用!important时需谨慎，优先考虑使用样式规则的优先级来解决问题，而不是!important，只有在需要覆盖全站或外部CSS的特定页面中使用!important

---

三，说一下浮动

3.1 解题思路

• 特点

• 用途

• 清除浮动

• 加分项：三种浮动的特点影响

3.2 作答

设置浮动后，该元素脱标，表现为不占位置，如果父级盒子本来是由该元素撑起高度，设置浮动后，会导致父级塌陷，影响后面盒子布局。

浮动作用有实现文字环绕图片，设置浮动的块级元素可以排列在同一行，设置浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

清除浮动：

1. 使用伪元素清除浮动

2. 格外标签法清除浮动

3. overflow:hidden

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。