文章目录
-
-
-
一,说一下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
会发生塌陷重叠。
形成条件有:
-
设置
float
为left
orright
。 -
固定定位或绝对定位
-
overflow
值非visible
,而是auto
,scroll
,hidden
-
元素显示模式为
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 作答
设置浮动后,该元素脱标,表现为不占位置,如果父级盒子本来是由该元素撑起高度,设置浮动后,会导致父级塌陷,影响后面盒子布局。
浮动作用有实现文字环绕图片,设置浮动的块级元素可以排列在同一行,设置浮动的行内元素可以设置宽高,同时可以按照浮动设置的方向对齐排列盒子。
清除浮动:
-
使用伪元素清除浮动
-
格外标签法清除浮动
-
overflow:hidden
最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。