当前位置： 首页 > news >正文

前端学习＜三＞CSS进阶——0102-CSS布局样式

news 2026/2/9 2:59:51

前言

css 进阶的主要内容如下。

1、css 非布局样式

  • html 元素的分类和特性

  • css 选择器

  • css 常见属性（非布局样式）

2、css 布局相关

  • css 布局属性和组合解析

  • 常见布局方案

  • 三栏布局案例

3、动画和效果

属于 css 中最出彩的内容。

  • 多背景多投影特效

  • 3D特效编写实践

  • 过渡动画和关键帧动画实践

  • 动画细节和原理深入解析

4、框架集成和 css 工程化

  • 预处理器作用和原理

  • less/sass 代码实践

  • Bootstrap 原理和用法

  • css 工程化的的实践方式

  • js 框架中的 css 集成实践

常见问题

不会 css 的前端称之为伪前端。

Vue 中模拟Scoped CSS的方式

方案一：随机选择器。css modules。

方案二：随机属性。<div abcd>、div[adcd]{}

其他问题

  • html 元素的嵌套关系是怎么确定的？哪些嵌套不可以发生？

  • 比如说，为什么 div 可以放在 a 标签里面？

  • css 选择器的权重是如何计算的？写代码时要注意什么？

  • 浮动布局是怎么回事？有什么优缺点？国内用的多吗？

  • css 可否做逐帧动画吗？性能如何？

  • Bootstrap 怎么做响应式布局？

  • 如何解决 css 模块化过程中的选择器互相干扰的问题？

单独看 css 属性并不难，难的是需要把这些思路和思想，想到它的应用场景。

01-CSS中的非布局样式：

前言

CSS中，有很多非布局样式，这些样式（属性）和与布局无关，包括：

  • 字体、字重、颜色、大小、行高

  • 背景、边框

  • 滚动、换行

  • 装饰性属性（粗体、斜体、下划线）等。

这篇文章，我们来对上面的部分样式做一个回顾。

边框

如何用边框画一个三角形？详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。

文字换行

  • ovferflow-wrap：通用的属性。用来说明当一个不能被分开的字符串（单词）太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

  • word-break：指定了怎样在单词内断行。这里涉及到CJK（中文/日文/韩文）的文字换行。

  • white-space：空白处是否换行。

上面这三个 css 属性进行组合，可以设置各种不同的属性。

当然，如果想让一段很长的文本不换行，可以直接设置white-space: nowrap 这一个属性即可。如果想换行，可以试试white-space: pre-wrap。

CSS Hack

  • CSS Hack 的方式：不合法但可以生效的写法。

  • 可以用来解决一些浏览器的兼容性问题。

  • 缺点：难理解、难维护、易失效（比如浏览器升级后，hack可能会失效）。

  • 替代方案：特性检测。

  • 替代方案：针对性加 class

CSS 效果

我们可以利用 CSS 实现各种效果，常见的效果属性有：

  • box-shadow：盒子的阴影

  • text-shadow：文本的阴影

  • border-radius

  • background

  • clip-path

02-CSS布局：

前言

常见的布局属性

（1）display 确定元素的显示类型：

  • block：块级元素。

  • inline：行内元素。

  • inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

（2）position 确定元素的位置：

  • static：默认属性值。

  • relative：相对定位。相对于元素本身进行偏移，不会改变它所占据的空间。

  • absolute：绝对定位。相对于父元素中最近的 relative/absolute 进行偏移，会脱离文档流。音标：[ˈæbsəluːt]。

  • fixed：固定定位。相对于可视区域固定，会脱离文档流。

relative、absolute、fixed这三个属性，可以结合 z-index 来设置层级。

常见的布局方法

1、table 表格布局：早期使用的布局，如今用得很少。

2、float 浮动 + margin：为了兼容低版本的IE浏览器，很多网站（比如腾讯新闻、网易新闻、淘宝等）都会采用 float 布局。

3、inline-block 布局：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

4、flex 布局：为布局而生，非常灵活，是最为推荐的布局写法。

唯一的缺点是兼容性问题：

上图中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。

flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。

5、响应式布局。

float 布局

是 CSS 中一种比较麻烦的属性，涉及到 BFC 和清除浮动（面试的重点）。

float 属性的特点

  • 元素浮动

  • 脱离文档流，但不脱离文本流

代码举例：

下面这两个并列的div1和div2，默认是在标准流中的：

在此基础之上，如果给div1增加float: left属性后，效果如下：

上图中，可以看到，div1设置为浮动后，会脱离文档流，不会对div2的布局造成影响；但是div1不会脱离文本流，它会影响div2中文字的排列。

其实，这正是 float 属性的作用。float 本身是用来做图文混排、文字环绕的效果。

float 所带来的影响

1、对自身的影响：

  • 形成“块”（BFC）

  • 位置尽量靠上

  • 位置尽量靠左/右

下面这两个并列的div1和div2，设置为浮动之后的效果：（都是尽量靠左显示的）

在上方代码的基础之上，增加 div2的宽度之后，会发现，div2掉下来了：

2、对兄弟元素的影响：

  • 不影响其他块级元素的位置

  • 影响其他块级元素的内部文本

3、对父级元素的影响：

  • 从父级的布局中“消失”

  • 造成父级元素的高度塌陷：父级元素撑开 div1 之后（父级元素里没有其他元素的情况下），如果设置 div1 为 float 之后，，会让父级元素的高度变为0。

inline-block 布局

对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

思路：像文本一样去排列 block 元素，没有清除浮动等问题。

存在的问题：需要处理间隙。代码举例如下：

 <!DOCTYPE html><html lang="en">​<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.container{width: 300px;height: 300px;background: pink;}​.div1{width: 100px;height: 100px;background: green;display: inline-block;}​.div2{width: 100px;height: 100px;background: yellowgreen;display: inline-block;}​.div3{background: yellow;}</style>​<body><div class="container"><div class="div1">div1的inline-block 属性</div><div class="div2">div2的inline-block 属性</div><div class="div3">琴棋书画不会，洗衣做饭嫌累。</div></div></body>​</html>

上面的代码，存在两个问题。

问题一：如果设置div2的宽度为 200px 之后，div2 掉下来。

问题二：div1和div2设置为 inline-block之后，这两个盒子之间存在了间隙。这是因为，此时的 div1和div2 已经被当成文本了。文本和文本之间，本身就会存在间隙。

为了去掉这个间隙，可以有几种解决办法：

办法1：设置父元素container的字体大小为0，即font-size: 0，然后设置子元素 div1、div2的字体font-size: 12px。

办法2：在写法上，去掉div1和div2之间的换行。改为：

 <div class="div1">div1的inline-block 属性</div><div class="div2">div2的inline-block 属性</div>

响应式布局

移动端用得较多，本文暂时先不讲。

相关文章：

前端学习＜三＞CSS进阶——0102-CSS布局样式

前言 css 进阶的主要内容如下。 1、css 非布局样式 html 元素的分类和特性 css 选择器 css 常见属性&#xff08;非布局样式&#xff09; 2、css 布局相关 css 布局属性和组合解析 常见布局方案 三栏布局案例 3、动画和效果 属于 css 中最出彩的内容。 多背景多投影特…...

编程日记 2024/4/9 22:56:16

关于51单片机TMOD定时器的安全配置

定时器介绍&#xff1a; -------------------------------------------------------------------------------------------------------------------------- 首先配置的是控制寄存器 TCON 说直白点&#xff0c;这个寄存器就是用来计数的&#xff0c;打开计时器&#xff0c;关…...

编程日记 2024/4/9 22:55:15

Unity 主线程和其他线程之间的数据访问

在Unity中&#xff0c;主线程和其他线程之间的数据访问需要小心处理&#xff0c;因为在多线程环境下&#xff0c;不当的数据访问可能导致竞争条件和数据不一致性。 在Unity中&#xff0c;主线程通常用于处理用户输入、更新游戏逻辑和渲染。其他线程通常用于执行耗时的计算、加…...

编程日记 2024/4/9 22:54:14

电商系列之风控安全

> 插&#xff1a;AI时代&#xff0c;程序员或多或少要了解些人工智能&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家…...

编程日记 2024/4/9 22:44:03

计算机网络针对交换机的配置

实验 目的 交换机的基本配置&#xff0c;交换机VLAN配置 实验条件 Windows&#xff0c;Cisco packet tracer 实验 内容 交换机的基本配置&#xff0c;交换机VLAN配置 实验 过程 一、交换机的基本配置 进入特权模式 Switch>enable 进入配置模式 Switch#configure ter…...

编程日记 2024/4/9 22:41:00

Python爬虫之分布式爬虫

分布式爬虫 1.详情介绍 分布式爬虫是指将一个爬虫任务分解成多个子任务&#xff0c;在多个机器上同时执行&#xff0c;从而加快数据的抓取速度和提高系统的可靠性和容错性的技术。 传统的爬虫是在单台机器上运行&#xff0c;一次只能处理一个URL&#xff0c;而分布式爬虫通过将…...

编程日记 2024/4/9 22:38:58

服务器硬件基础知识解析

导言 在当今信息化时代&#xff0c;服务器扮演着至关重要的角色&#xff0c;它们是存储、处理和传输数据的关键设备。本文将介绍服务器硬件的基础知识&#xff0c;包括服务器的组成部分、硬件选型和性能评估等内容&#xff0c;旨在帮助读者更好地理解和应用服务器技术。 服务…...

编程日记 2024/4/9 22:37:57

【芯片设计- RTL 数字逻辑设计入门 1.1 -- Verdi 使用入门介绍 1】

请阅读【芯片设计 RTL 数字逻辑设计扫盲 】 文章目录 Verdi 介绍Verdi 特点和功能Verdi 基本操作Verdi -elab与-dbdir区别-elab 参数介绍-dbdir 参数介绍区别总结Verdi 介绍 Verdi 是由Synopsys公司开发的一款业界领先的自动化电子设计自动化（EDA）工具，主要用于功能验证和调…...

编程日记 2024/4/9 22:33:51

ssm034学生请假系统+jsp

学生请假系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本学生请假系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处…...

编程日记 2024/4/9 22:32:50

Leetcode 165. 比较版本号

给你两个版本号 version1 和 version2 &#xff0c;请你比较它们。 版本号由一个或多个修订号组成&#xff0c;各修订号由一个 ‘.’ 连接。每个修订号由 多位数字 组成&#xff0c;可能包含 前导零 。每个版本号至少包含一个字符。修订号从左到右编号&#xff0c;下标从 0 开…...

编程日记 2024/4/9 22:29:46

LeetCode-279. 完全平方数【广度优先搜索 数学 动态规划】

LeetCode-279. 完全平方数【广度优先搜索 数学 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;Python 动态规划五部曲&#xff08;完全平方数就是物品&#xff08;可以无限件使用&#xff09;&#xff0c;凑个正整数n就是背包&#xff0c;问凑满这个背包最少有多少物品…...

编程日记 2024/4/9 22:24:41

rust项目组织结构和集成测试举例

概述 在学习rust的过程中&#xff0c;当项目结构略微复杂的时候&#xff0c;写集成测试的时候发现总是不能引用项目中的代码&#xff0c;导致编写测试用例失败。查阅了教程&#xff0c;一般举例都很简单。查阅了谷歌和百度以及ai&#xff0c;也没有找到满意的答案。这里记录一…...

编程日记 2024/4/9 22:20:36

软件文档交付清单（直接套用合集）

软件文档交付清单是指在软件开发项目完成后&#xff0c;开发团队需要准备的一份详细清单&#xff0c;用于确保交付的软件产品符合客户需求并达到预期的质量标准。以下是软件文档交付清单中可能包含的一些关键要素 软件开发文档&#xff1a;这包括需求文档、设计文档、测试文档等…...

编程日记 2024/4/9 22:19:34

ModuleNotFoundError: No module named ‘ultralytics.utils‘

项目场景he 问题描述 提示&#xff1a;这里简述项目相关背景&#xff1a; model YOLO(modelr./yolov8m-cls.pt) 加载预训练模型时报错。 ModuleNotFoundError: No module named ultralytics.utils warning: bug: 原因分析&#xff1a; 很可能是提前下载的预训练模型出了…...

编程日记 2024/4/9 22:18:31

2024智能计算、大数据应用与信息科学国际会议(ICBDAIS2024)

2024智能计算、大数据应用与信息科学国际会议(ICBDAIS2024) 会议简介 智能计算、大数据应用与信息科学之间存在相互依存、相互促进的关系。智能计算和大数据应用的发展离不开信息科学的支持和推动&#xff0c;而信息科学的发展又需要智能计算和大数据应用的不断拓展和应用。智…...

编程日记 2024/4/9 22:17:30

秋招复习笔记——八股文部分：操作系统

笔试得刷算法题&#xff0c;那面试就离不开八股文&#xff0c;所以特地对着小林coding的图解八股文系列记一下笔记。 这一篇笔记是图解系统的内容。 硬件结构 CPU执行程序 计算机基本结构为 5 个部分&#xff0c;分别是运算器、控制器、存储器、输入设备、输出设备&#xf…...

编程日记 2024/4/9 22:16:29

每日一题：C语言经典例题之杨辉三角

题目描述 输出杨辉三角形。 输入 第一行输入一个整数 n (1<n<10)。 输出 输出杨辉三角形的前n行&#xff0c;每个数字占8格左对齐。 样例输入 4 样例输出 1 1 1 1 2 1 1 3 3 1 代码&#xff1a; #inc…...

编程日记 2024/4/9 22:14:27

1. TypeScript: JavaScript 的超集，为大型应用而生

引言 在现代的前端开发领域&#xff0c;JavaScript 无疑是一门极其流行的语言。然而&#xff0c;随着前端项目的日益复杂&#xff0c;JavaScript 本身的一些特性使得维护和扩展大型代码库变得困难。这就是 TypeScript 应运而生的背景。TypeScript 是一种由微软开发的开源语言&…...

编程日记 2024/4/9 22:13:25

vex-table—— 获取插入或修改数据后的tableData

例子来自vxe-table。在开发过程中发现新增数据后&#xff0c;输出this.tableData&#xff0c;发现数据并没有被修改 想要获取更新的数据方式为 mounted () {const $table this.$refs.xTableconsole.log("&#x1f680; ~ mounted ~ $table:", $table.tableData)},...

编程日记 2024/4/9 22:11:22

通俗易懂地解释Go语言不同版本中垃圾回收机制的演进过程

完整课程请点击以下链接 Go 语言项目开发实战_Go_实战_项目开发_孔令飞_Commit 规范_最佳实践_企业应用代码-极客时间 Go 1.3时代 - 标记清除算法 这就像一个人要打扫房间,首先需要暂停其他活动。然后开始查看房间里的每件物品,对于自己仍需要使用的物品做上记号。查看完毕后…...

编程日记 2024/4/9 22:09:20

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2026/2/8 4:37:08

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2026/2/8 20:41:53

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2026/2/3 12:56:31

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2026/1/31 7:25:57

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

HTTPS证书一年多少钱？

HTTPS证书作为保障网站数据传输安全的重要工具&#xff0c;成为众多网站运营者的必备选择。然而&#xff0c;面对市场上种类繁多的HTTPS证书&#xff0c;其一年费用究竟是多少&#xff0c;又受哪些因素影响呢&#xff1f; 首先&#xff0c;HTTPS证书通常在PinTrust这样的专业平…...

编程新知 2026/1/24 23:35:51