在css中遇到的好玩儿之处03

最新推荐文章于 2022-02-22 17:01:38 发布

西小贝先森

最新推荐文章于 2022-02-22 17:01:38 发布

阅读量113

点赞数

分类专栏：趣玩CSS 文章标签： css面试题 flex布局 BFC 渐进增强优雅降级

本文链接：https://blog.csdn.net/luckyht/article/details/102406504

版权

趣玩CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本篇继续分享在css中的好玩儿之处以及面试常见问题：flex布局 BFC 以及对渐进增强优雅降级的理解

1. flex布局

flex的基本知识
flex布局又称为伸缩布局，在响应式开发中发挥着极大作用
主轴：flex容器的主轴用来配置flex项目
侧轴：与主轴方向垂直
方向：默认主轴从左向右，侧轴默认是垂直方向的
主轴侧轴通过flex-direction来进行交换
各属性详解

a、flex-direction调整主轴方向（默认为水平方向）

 flex-direction:row 沿水平主轴让元素从左向右排列
 flex-direction：column 沿水平主轴让元素从左向右排列
 flex-direction:row-reverse;沿水平主轴让元素从右向左排列

b、justify-content调整主轴对齐

 justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列
 justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列
 justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
 justify-content : space-around;每个元素两侧的间隔相等。

c、align-items调整侧轴对齐

align-items : flex-start; 
align-items : flex-end; 
align-items : center;

d、flex-wrap控制是否换行

flex-wrap: nowrap; (默认)元素不换行,
flex-wrap: wrap; 元素换行

e、align-content堆栈（由flex-wrap产生的独立行）对齐

align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。
align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。
align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。
align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内

f、flex-flow是flex-direction、flex-wrap的简写形式

g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

h、order控制子项目的排列顺序，正序方式排序，从小到大

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值

2. BFC(块级格式化上下文)

BFC的概念
BFC是块级格式化上下域
（简单来说 BFC就是一块区域，这块区域里面的内容想怎么放都ok，但不能影响到BFC外面的盒子）
元素具有BFC条件：

首先元素得是块级元素
块级元素触发BFC的属性有以下几种，只要给块级元素添加属性之一即可触发BFC
- float 属性不为none
- position 为absolute 或 flex
- display为inline-block table-cell table-caption flex inline-flex
- overflow不为visible

BFC具有的特性

在BFC中，盒子从顶端一个个垂直的排列
盒子的垂直方向通过margin决定，属于同一个bfc的两个相邻盒子的margin会发生重叠
在BFC中每一个盒子的左外边缘会触碰到父盒子的border-left
BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
计算BFC高度的时候，自然也会检测到浮动盒子的高度

BFC的主要用途
因为BFC具有以上特性，所以BFC具有以下功能

清除元素内部浮动
块级元素具有 overflow 不为visible 属性时触发BFC 在计算BFC高度是浏览器会自动检测到浮动盒子的高度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin:0; padding:0;}
		.father{
			width: 300px;/*高度由内容决定*/
			background-color: black;
			overflow: hidden;  /*触发BFC属性*/
		}
		.son1, .son2{
			width: 100px;
			height: 100px;
			float: left;
			background-color: hotpink;
		}
		.son2{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
</body>
</html>

未加bfc属性时和加了之后
在这里插入图片描述

在这里插入图片描述

解决了外边距合并的问题
在同一个BFC中的两个相邻盒子的外边距会发生重叠现象，那么只要这两个盒子不在同一个BFC区域内就不会发生外边距重叠问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	   .father{
	   	overflow: hidden;
	   }
		.son1{
			width: 200px;
			height: 100px;
			background-color: hotpink;
			margin-bottom: 20px;

		}
		.son2{
			width: 200px;
			height: 80px;
			background-color: #000;
			margin-top: 30px;
		}
	</style>
</head>
<body>
   <div class="father">
		<div class="son1"></div>
   </div>
   <div class="son2"></div>
</body>
</html>

未添加BFC属性和添加之后的在这里插入图片描述

制作右侧盒子自适应
一般情况下浮动元素脱离标准流不占位，相邻盒子会与浮动盒子产生交集，但当相邻盒子具有BFC属性时，就不会与浮动元素产生交集，而是紧贴浮动边缘

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin:0; padding:0;}
		.father{
			/*高度由内容决定*/
			overflow: hidden; /*触发BFC属性*/
		}
		.son1{
			width:300px;
			height: 50px;
			background-color: hotpink;
			float: left;
		}
		.son2{
			height: 200px;
			background-color: skyblue;
			overflow: hidden;
		}
		
	</style>
</head>
<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2">我是自适应的</div>
	</div>
</body>
</html>

未添加BFC属性和添加之后的在这里插入图片描述

在这里插入图片描述

3.渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建的页面，保证最基本的功能，然后再针对高版本浏览器进行效果，交互等改进和追加功能从而达到更好的用户体验
优雅降级：针对高版本浏览器进行构建的页面与渐进增强相反
-简答来说渐进增强就像是爬山上楼、优雅降级就像是蹦极下楼。我们无法将二者进行比较，究竟是那一种能够更好的构建页面，只需要我们根据具体的项目受众人群等因素来进行判断选择