CSS总结

BFC（块级格式上下文）是 CSS 中一个重要的概念，它是一个独立的渲染区域，可以防止元素之间发生相互影响的问题。当元素形成 BFC 时，它们会被放置在一个独立的矩形框中，并且计算它们的位置和大小时，不会受到外部元素的影响。以下是关于 BFC 的一些详细解释：

BFC 的形成条件

BFC 的形成有以下条件：

根元素或其他包含它的元素。
浮动元素（元素的 float 属性不是 none）。
绝对定位元素（元素的 position 属性为 absolute 或 fixed）。
行内块元素（元素的 display 属性为 inline-block）。
表格单元格（元素的 display 属性为 table-cell，HTML 表格单元格默认为这种属性）。
表格标题（元素的 display 属性为 table-caption，HTML 表格标题默认为这种属性）。
overflow 值不为 visible 的块级元素。

BFC 的特性

BFC 具有以下特性：

BFC 内部的元素会在垂直方向上一个接一个地放置，形成一个垂直的流。
BFC 的区域不会与浮动元素重叠。
BFC 内部的元素不会影响外部元素的布局，外部元素也不会影响 BFC 内部元素的布局。
BFC 内部的元素会包含浮动元素，即 BFC 可以清除浮动。
BFC 的高度会包含浮动元素的高度。

如何创建 BFC

有以下方法可以创建 BFC：

为元素设置 overflow 属性为 auto、hidden 或 scroll。
为元素设置 position 属性为 absolute 或 fixed。
为元素设置 display 属性为 inline-block、table-cell、table-caption 或 flex。
创建一个新的块级元素，将其作为 BFC 的容器，可以通过设置 overflow 属性来实现。
总之，BFC 是一个重要的 CSS 概念，可以用来解决布局问题，避免元素之间相互影响。了解 BFC 的特性和创建方法，可以更好地掌握 CSS 的布局技巧。

CSS 选择器及其优先级

选择器	格式	优先级权重
!important	n/a	infinity
ID 选择器	#id	100
类选择器	.class	10
属性选择器	[attribute=value]	10
子选择器	parent > child	10
相邻兄弟选择器	previous + sibling	10
通用兄弟选择器	previous ~ siblings	10
伪类选择器	:pseudo-class	n/a
伪元素选择器	::pseudo-element	n/a
继承样式	n/a	0
元素选择器	element	1
后代选择器	ancestor descendant	1

注意，虽然 !important 关键字具有最高优先级权重，但它是应该谨慎使用的，因为它可能会破坏样式表的层叠性。最好的做法是尽量避免使用 !important 关键字，而是使用正确的选择器和层叠规则来管理样式。

css盒子模型

CSS 盒子模型指的是 Web 页面中每个 HTML 元素被描绘为矩形盒子的模型，它由四个部分组成：内容（content）、填充（padding）、边框（border）和外边距（margin）。这些部分一起构成了一个 HTML 元素的盒子，决定了元素在页面上所占的空间和如何与其他元素交互。

在 CSS 盒子模型中，每个部分的大小由以下属性来控制：

• content：元素的实际内容区域，包括文本、图片、媒体等。
• padding：元素的内容区域与边框之间的空间。
• border：元素的边框区域，包括边框线的样式、宽度和颜色。
• margin：元素与其他元素之间的空间。

在标准的盒子模型中，盒子的总宽度等于 content、padding、border 和 margin 的宽度之和。而在 IE 盒子模型中，盒子的总宽度只包括 content 和 border，而 padding 和 margin 的宽度则会增加盒子的宽度。

可以使用 CSS 的 box-sizing 属性来改变盒子模型的行为，该属性有两个值：

• content-box（默认值）：元素的宽度和高度只包括 content，而 padding、border 和 margin 的宽度将增加盒子的总宽度和高度。
• border-box：元素的宽度和高度包括 content、padding 和 border，而 margin 的宽度将增加盒子的总宽度和高度。这种模型更符合人们对盒子模型的直觉理解，也更适合用于响应式布局。

css页面布局

常用的 CSS 页面布局方式：

1. 盒子布局
盒子布局是一种基于盒子模型的页面布局方式，通过将 HTML 元素分为一个个盒子来实现。可以使用 CSS 的 display、position、float、clear、margin、padding 和 border 等属性来定义和布局盒子。

2. 栅格布局
栅格布局是一种基于栅格系统的页面布局方式，通过将页面划分为多个等宽的列来实现。可以使用 CSS 框架如 Bootstrap 和 Foundation 等提供的栅格系统来快速实现栅格布局。

3. 弹性布局
弹性布局是一种基于弹性盒子模型的页面布局方式，通过将 HTML 元素分为一个个弹性盒子来实现。可以使用 CSS 的 display、flex-direction、justify-content、align-items 和 flex-wrap 等属性来定义和布局弹性盒子。

4. 网格布局
网格布局是一种基于网格系统的页面布局方式，通过将 HTML 元素划分为多个网格来实现。可以使用 CSS 的 display、grid-template-columns、grid-template-rows、grid-column 和 grid-row 等属性来定义和布局网格。

5. 多列布局
多列布局是一种基于 CSS 多列属性的页面布局方式，通过将文本和其他元素排列成多列来实现。可以使用 CSS 的 column-count、column-width、column-gap、column-rule 等属性来定义和布局多列。

css定位浮动

CSS 定位和浮动是用来控制元素位置和布局的重要属性。
1. 定位属性

CSS 定位属性用来控制元素的位置，常见的定位属性有 position、top、bottom、left、right 等。常见的定位方式有：

• 静态定位（position: static）：元素默认定位方式，不会受到其他定位属性的影响，无法通过 top、bottom、left、right 属性进行位置调整。
• 相对定位（position: relative）：相对于元素原来的位置进行定位，通过 top、bottom、left、right 属性进行位置调整。
• 绝对定位（position: absolute）：相对于父元素进行定位，若父元素没有设置定位，则相对于文档进行定位，通过 top、bottom、left、right 属性进行位置调整。
• 固定定位（position: fixed）：相对于浏览器窗口进行定位，通过 top、bottom、left、right 属性进行位置调整。

2. 浮动属性

CSS 浮动属性用来控制元素在文档流中的位置，常见的浮动属性有 float、clear 等。常见的浮动方式有：

• 左浮动（float: left）：元素向左浮动，其他元素会环绕在其右侧。
• 右浮动（float: right）：元素向右浮动，其他元素会环绕在其左侧。
• 清除浮动（clear）：用于清除浮动对后续元素的影响，常见的取值有 left、right、both。

需要注意的是，使用浮动会让元素脱离文档流，可能会对页面布局产生影响，需要适当设置 clear 属性进行调整。

常用的清除浮动的方式有以下几种：

1. 空元素法（clearfix）

在浮动元素的父元素上添加一个空的 <div> 元素，并设置 clear: both 属性，使其能够把父元素撑开，从而清除浮动。

HTML 代码示例：

<div class="parent">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
  <div class="clearfix"></div>
</div>

CSS 代码示例：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

2. 使用 overflow 属性

在浮动元素的父元素上添加 overflow: hidden 或 overflow: auto 属性，使其生成一个新的 BFC（块级格式化上下文），从而清除浮动。

HTML 代码示例：

<div class="parent">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

CSS 代码示例：

.parent {
  overflow: hidden;
  /* 或者 */
  overflow: auto;
}

3. 使用伪元素清除浮动

在浮动元素的父元素上使用 ::after 伪元素，并设置 clear: both 属性，从而清除浮动。

HTML 代码示例：

<div class="parent">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

CSS 代码示例：

.parent::after {
  content: "";
  display: block;
  clear: both;
}