08 css补充知识

最新推荐文章于 2024-05-26 20:46:36 发布

枫頔

最新推荐文章于 2024-05-26 20:46:36 发布

阅读量112

点赞数

分类专栏： CSS 文章标签： BFC 浏览器前缀背景渐变 css验证与压缩

本文链接：https://blog.csdn.net/fengdi_yuxi/article/details/101216807

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. BFC简介

BFC（block formatting context）意为块级格式化上下文。BFC是一个独立的渲染区域，只有Block-level box参与，其规定了内部的Block-level box如何布局，这个区域与外部毫不相干。

元素的显示模式

之前我们学过元素的显示模式使用display属性定义，常用值如下：

none; (不显示，不占有位置)
block; (块级)
inline; (行内)
inline-block; (行内块)
flex; (伸缩布局)

其完整属性值很多如下图：

可以产生BFC的元素

w3c 规范以下元素可以产生BFC：

display属性为 block, list-item, table 的元素，会产生BFC。

可以发现可以产生BFC的元素都是用来布局最为合理的元素，因为他们就是用来可视化布局。

如何触发BFC（让元素产生BFC）

给元素添加以下特性可以使元素产生BFC：

float属性不为none（浮动即可）
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible。（一般使用hidden，没有副作用）

注意：BFC为块级格式化上下文，其重点在于块级。由上面触发BFC的条件可以看出，让元素浮动或者进行绝对定位、固定定位都会让元素进行显示模式的转换（转换为行内块）。

BFC元素特性

BFC布局规则特性：

在BFC（闭合区域）中，盒子从顶端开始垂直地一个接一个地排列。
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生合并现象。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)内侧。
BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

BFC用途

①清除元素内部浮动

之前说过如果一个父盒子没有指定高度，其内部的子元素浮动后脱标即不会撑开父元素，此时父元素的高度就变为0。与父元素同级的元素就会上移，造成布局混乱。此时我们需要清除浮动或者叫做闭合浮动，其中一种方法就是给父元素添加overflow: hidden；方法。

其实质为添加该属性会触发父元素产生BFC，BFC特性之一就是计算BFC的高度时，自然也会检测浮动或者定位的盒子高度，此时父盒子的高度就会正常。

②解决外边距合并问题

之前说过当元素垂直排列或者嵌套排列时，元素可能会发生外边距合并的问题。由于同一BFC的盒子外边距会发生合并，那我们将其中一个元素外边包含一个元素，使其触发BFC，两个元素就不会发生外边距合并。

③右侧自适应的盒子问题

默认情况下，两个兄弟元素，前一个元素浮动后，后面元素会贴上来与前一个元素产生交集。当我们给第二个元素触发BFC后，该元素不会与浮动的盒子产生交集，紧贴浮动元素的边缘（且能实现右侧自适应）。

2. 优雅降级和渐进增强

渐进增强

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级

一开始就针对高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：渐进增强是向上兼容，优雅降级是向下兼容。

3. 浏览器前缀

在编写CSS样式时，有时候为了浏览器兼容，会使用常用的浏览器私有前缀。如下表：

浏览器前缀	浏览器
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

4. 背景渐变

背景线性渐变是指颜色沿着一条直线过渡，但是兼容性问题较差。语法如下：

background: -webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色)；
background: -webkit-linear-gradient(渐变的起始位置, 颜色 位置, 颜色 位置....)；

渐变起始位置可以使用top left等关键字
可以使用百分比定义变化过程中的颜色（可定义多个）

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 300px;
				height: 50px;
				margin: 200px auto;
				/* 定义背景渐变效果(线性渐变,兼容性较差,需要加浏览器私有前缀) */
				background: -webkit-linear-gradient(top, red, green);
			}
			section {
				width: 400px;
				height: 80px;
				margin: 100px auto;
				background: -webkit-linear-gradient(left, red 0%, green 20%, hotpink 50%, pink 80%);
			}
		</style>
	</head>
	<body>
		<div></div>
		<section></section>
	</body>
</html>