前端基础知识点总结CSS篇（基础回顾）

最新推荐文章于 2024-12-18 15:38:14 发布

原创最新推荐文章于 2024-12-18 15:38:14 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #前端总结

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文深入解析CSS的盒模型、BFC、浮动、清除浮动、单位、transform等关键概念及其实用技巧，帮助读者理解并掌握CSS布局的核心原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

Cascading Style Sheet 层叠样式表

CSS选择器

盒模型

盒模型有两种， IE 怪异盒子模型、W3C标准盒子模型；

盒模型是由：内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。

标准模型的宽高是指的content区宽高；
IE盒模型的宽高是指的content+padding+border的宽高。

在这里插入图片描述

CSS如何设置这两种盒模型？

标准盒模型：

box-sizing: content-box;

怪异盒模型：

box-sizing: border-box;

BFC

什么是BFC

W3C对BFC定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC作用：

利用BFC避免外边距折叠
清除内部浮动（撑开高度）
1. 原理: 触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内
避免文字环绕
分属于不同的BFC时，可以阻止margin重叠
多列布局中使用BFC

如何生成BFC：（脱离文档流，满足下列的任意一个或多个条件即可）

根元素，即HTML元素（最大的一个BFC）
float的值不为none
position的值为absolute或fixed
overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
display的值为inline-block、table-cell、table-caption

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
属于同一个BFC的两个相邻的Box的margin会发生重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float
BFC的区域不会与float box重叠。
计算BFC的高度，浮动元素也参与计算

float

元素"浮动"
脱离文档流
不脱离文本流
位置尽量靠上，并靠左或右

对自己的影响

形成"块"(BFC)
这个块会负责自己的布局，宽高由自己决定

比如 span 中用 float 这个span就形成了一个BFC，就可以设置宽高了

对兄弟元素的影响

上面一般贴非float元素
靠边贴float元素或边
不影响其他块级元素位置
影响其他块级元素文本

对父级元素的影响

从布局上"消失"
高度塌陷

清除浮动

浮动的元素布局时不会占据父元素的布局空间，即父元素布局时不会管浮动元素，浮动元素有可能超出父元素，从而对其他元素造成影响。

方法一：使用带 clear 属性的空元素在浮动元素后使用一个空元素如

，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
或

来进行清理。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法二：使用 CSS 的 overflow 属性给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

方法三：给浮动的元素的容器添加浮动给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理什么都不做，给浮动元素后面的元素添加 clear 属性。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>

方法五：使用 CSS 的:after 伪元素结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

inline-block的间隙

两个并列的inline-block中间会有一条裂缝，这个的原因是两个标签之间有空格，浏览器把这些空格当成文字中空格，所以这两个块中间多少有间隙。

解决办法：

删除两个标签间的空格，但是这样html排版不好
容器元素font-size: 0 然后再在里面再重新设置字体大小

文字换行

overflow-wrap(word-wrap)通用换行控制
- 是否保留单词
word-break 针对多字节文本文字
- 中文句子也是单词
white-space 空白处是否换行

装饰属性及其他

字重（粗体） font-weight
斜体 font-style: itatic
下划线 text-decoration
指针 cursor

单行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;

多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

display: none; 与 visibility: hidden; 的区别

相同：它们都能让元素不可见

区别：

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式
修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘
读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容
无论是 display:none; 还是 visibility: hidden; 他们都依然可以被 JS 所获取到

外边距折叠(collapsing margins)

外边距重叠就是 margin-collapse

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和

新手在做导航栏的时候发现页面整体掉下来一截就是这个原因。

CSS单位

px 绝对单位。传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。
% 父元素宽度的比例。
1. 如果对 html 元素设置 font-size 为百分比值，则是以浏览器默认的字体大小16px为参照计算的（所有浏览器的默认字体大小都为 16px），如62.5%即等于10px（62.5% * 16px = 10px）。
em 相对单位。不同的属性有不同的参照值。
1. 对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小
2. border, width, height, padding, margin, line-height）在这些属性中，使用em单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。
rem 是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。
1. 好处：rem 只需要修改 html 的 font-size 值即可达到全部的修改，即所谓的牵一发而动全身。
vw, vh, vmin, vmax 相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。
1. vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
2. vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
3. vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一
4. vmax：基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一