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

第8节课：CSS布局与样式——掌握盒模型与定位的艺术

news 2025/12/25 15:47:58

目录

    • 盒模型：网页布局的基础
      • 盒模型的属性
      • 盒模型的示例
    • 定位：控制元素位置
      • 定位的类型
      • 定位的示例
    • 实践：使用CSS布局创建响应式网页
    • 结语

CSS布局是网页设计中的基石，它决定了网页元素的排列和分布。盒模型和定位是CSS布局中的两个核心概念。本节课将深入探讨CSS的盒模型、边距、内边距、边框以及定位技术，帮助你构建专业且响应式的网页布局。

盒模型：网页布局的基础

CSS盒模型是所有HTML元素的默认布局模式。每个盒子由以下几个部分组成：

  • 内容（Content）：盒子的实际内容，由元素的width和height属性定义。
  • 内边距（Padding）：内容与边框之间的空间。
  • 边框（Border）：围绕内边距和内容的一条线。
  • 外边距（Margin）：边框与相邻盒子之间的空间。

盒模型的属性

  • margin：外边距，可以是单个值（如margin: 10px;）或四个值（如margin: 10px 15px 20px 5px;，分别对应上、右、下、左）。
  • padding：内边距，用法与margin类似。

盒模型的示例

.box {width: 300px;height: 200px;margin: 20px;padding: 15px;border: 5px solid #333;
}

定位：控制元素位置

定位是CSS中控制元素位置的机制。通过position属性，我们可以将元素从文档流中取出，并使用top、right、bottom、left属性来定位。

定位的类型

  • static：默认值，元素按照正常文档流排列。
  • relative：元素相对于其正常位置进行偏移。
  • absolute：元素相对于其最近的已定位（非static）祖先元素进行定位。
  • fixed：元素相对于浏览器窗口进行定位。
  • sticky：元素根据用户的滚动位置进行定位，类似于relative和fixed的结合。

定位的示例

.relative-box {position: relative;top: 10px;left: 20px;
}.absolute-box {position: absolute;top: 30px;right: 0;
}.fixed-box {position: fixed;bottom: 0;left: 0;
}

实践：使用CSS布局创建响应式网页

下面是一个示例，展示如何使用CSS盒模型和定位来创建一个简单的响应式网页布局。

<!DOCTYPE html>
<html>
<head><title>CSS布局示例</title><style>* {box-sizing: border-box;}body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 15px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}header, footer {background: #333;color: #fff;text-align: center;padding: 20px 0;margin-bottom: 15px;}footer {margin-top: 15px;}.main-content {display: flex;flex-wrap: wrap;gap: 15px;padding: 15px;}.sidebar {flex: 1;margin: 15px;padding: 15px;border: 1px solid #ddd;}.main {flex: 3;margin: 15px;padding: 15px;border: 1px solid #ddd;}@media (max-width: 768px) {.main-content {flex-direction: column;}.sidebar, .main {flex: none;margin: 15px 0;}}</style>
</head>
<body><header><h1>学问小小谢的响应式网页</h1></header><div class="container"><div class="main-content"><div class="sidebar"><h2>侧边栏</h2><p>这里是侧边栏内容。</p></div><div class="main"><h2>主要内容</h2><p>这里是主要内容区域。</p></div></div></div><footer><p>版权所有 &copy; 2024</p></footer>
</body>
</html>

结语

通过本节课的学习，你应该对CSS盒模型和定位有了深入的理解。掌握这些基础知识，你将能够创建出结构清晰、布局合理的网页。CSS布局是一个不断学习和实践的过程，随着经验的积累，你将能够解决越来越复杂的布局问题。继续探索CSS的高级特性，如Flexbox和Grid，你将能够创建出更加灵活和强大的网页布局。

相关文章：

第8节课：CSS布局与样式——掌握盒模型与定位的艺术

目录 盒模型&#xff1a;网页布局的基础盒模型的属性盒模型的示例 定位&#xff1a;控制元素位置定位的类型定位的示例 实践&#xff1a;使用CSS布局创建响应式网页结语 CSS布局是网页设计中的基石&#xff0c;它决定了网页元素的排列和分布。盒模型和定位是CSS布局中的两个核心…...

编程日记 2024/7/30 19:01:04

electron 主进程和渲染进程

最近在整理electron 相关的项目问题&#xff0c;对自己来说也是温故知新&#xff0c;也希望能对小伙伴们有所帮助&#xff0c;大家共同努力共同进步。加油&#xff01;&#xff01;&#xff01;&#xff01; 虽然最近一年前端大环境不好&#xff0c;但是大家还是要加油鸭&#…...

编程日记 2024/7/30 19:00:03

redis的高可用及性能管理和雪崩

redis的高可用 redis当中&#xff0c;高可用概念更宽泛一些。 除了正常服务以外&#xff0c;数据量的扩容&#xff0c;数据安全。 实现高可用的方式&#xff1a; 1、持久化 最简单的高可用方法&#xff0c;主要功能就是备份数据。 把内存当中的数据保存到硬盘当中。 2、主…...

编程日记 2024/7/30 18:59:02

php基础语法

文章目录 1. PHP(1) 安装php 2. 基础语法(1) 格式(2) 输出语法(3) 注释(4) 变量(无变量类型自动识别)(5) 输入获取(6) 定界符(7) 换行 3. 基本数据类型(1) 字符串(2) 整数(3). 浮点数(4). boolean类型(5). 数组(6). null值 4. 运算符(1) 算术运算符(2) 比较运算符(3) 逻辑运算符…...

编程日记 2024/7/30 18:58:01

js抓取短信验证码发送

油猴（Tampermonkey）是一个流行的浏览器扩展，它允许用户在浏览器中运行自定义的JavaScript脚本。下面是一个简单的示例脚本，用于收集网站上发送短信验证码的API请求，并以JSON格式存储这些信息。请注意，这个脚本需要根据实际网站的API请求进行调整，因为不同的网站可能有不…...

编程日记 2024/7/30 18:54:58

视频怎么加密？常见的四种视频加密方法和软件

视频加密是一种重要的技术手段&#xff0c;用于保护视频内容不被未经授权的用户获取、复制、修改或传播。在加密过程中&#xff0c;安企神软件作为一种专业的加密工具&#xff0c;可以发挥重要作用。 以下将详细介绍如何使用安企神软件对视频进行加密&#xff0c;并探讨视频加密…...

编程日记 2024/7/30 18:53:57

聚焦全局应用可用性的提升策略，详解GLSB是什么

伴随互联网的快速发展和全球化趋势的深入&#xff0c;企业对网络应用的需求日渐增长。为满足全球范围内用户大量的访问需求&#xff0c;同时解决容灾、用户就近访问以及全球应用交付等问题&#xff0c;GLSB&#xff08;全局负载均衡&#xff09;也因此应运而生。那么GLSB是什么…...

编程日记 2024/7/30 18:52:56

无水印下载视频2——基于tkinter完成头条视频的下载

在数字化时代的浪潮中&#xff0c;视频内容以其丰富性和便捷性&#xff0c;逐渐成为了我们获取信息和娱乐的重要途径。尤其是在短视频平台上&#xff0c;各种创意十足、内容精彩的视频层出不穷&#xff0c;更是吸引了数以亿计的用户。然而&#xff0c;随着视频内容的增加&#…...

编程日记 2024/7/30 18:51:55

Java学习Day17：基础篇7

继承 Java中的继承是面向对象编程中的一个核心概念&#xff0c;它允许我们定义一个类&#xff08;称为子类或派生类&#xff09;来继承另一个类&#xff08;称为父类或基类&#xff09;的属性和方法。继承提高了代码的复用性&#xff0c;使得我们不必从头开始编写所有的代码&a…...

编程日记 2024/7/30 18:47:51

Vue3 Pinia的创建与使用代替Vuex 全局数据共享 同步异步

介绍 提供跨组件和页面的共享状态能力&#xff0c;作为Vuex的替代品&#xff0c;专为Vue3设计的状态管理库。 Vuex&#xff1a;在Vuex中&#xff0c;更改状态必须通过Mutation或Action完成&#xff0c;手动触发更新。Pinia&#xff1a;Pinia的状态是响应式的&#xff0c;当状…...

编程日记 2024/7/30 18:46:49

手撕数据结构02--二分搜索（附源码）

一、理论基础 二分搜索&#xff0c;也称折半搜索、对数搜索&#xff0c;是一种在有序数组中查找某一特定元素的搜索算法。 二分搜索是一种高效的查找算法&#xff0c;适用于在已排序的数组中查找特定元素。它的基本思想是通过不断将搜索区间对半分割&#xff0c;从而快速缩小…...

编程日记 2024/7/30 18:43:46

单片机工程师继续从事硬件设计还是涉足 Linux 开发？

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「linux的资料从专业入门到高级教程」&#xff0c;点个关注在评论区回复“666”之后私信回复“666”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 怎么说呢&#xff0c;感觉绝…...

编程日记 2024/7/30 18:40:44

《昇思25天学习打卡营第25天|第28天》

今天是打卡的第二十八天&#xff0c;实践应用篇中的计算机视觉中Vision Transformer图像分类。 从Vision Transformer&#xff08;ViT&#xff09;简介开始了解&#xff0c;模型结构&#xff0c;模型特点&#xff0c;实验的环境准备和数据读取&#xff0c;模型解析&#xff08…...

编程日记 2024/7/30 18:38:42

Flutter Dio网络请求报错FormatException: Unexpected character

最近开发Flutter项目&#xff0c;网络请求采用的是Dio框架&#xff0c;在发起网络请求的时候报错&#xff1a; 网络请求返回的数据为&#xff1a; var returnCitySN {"cip": "127.0.0.1", "cid": "00", "cname": "未…...

编程日记 2024/7/30 18:37:40

关于@JsonSerialize序列化与@JsonDeserialize反序列化注解的使用（密码加密与解密举例）

注&#xff1a;另一种方式参考 关于TableField中TypeHandler属性&#xff0c;自定义的类型处理器的使用&#xff08;密码加密与解密举例&#xff09;http://t.csdnimg.cn/NZy4G 1.简介 1.1 序列化与反序列化 学习注解之前&#xff0c;我们可以先了解一下什么是序列化与反序列…...

编程日记 2024/7/30 18:36:39

第二届世界科学智能大赛逻辑推理赛道：复杂推理能力评估 #大模型技术之逻辑推理方向 #Datawhale #夏令营 ＜二＞

第二届世界科学智能大赛逻辑推理赛道&#xff1a;复杂推理能力评估 #大模型技术之逻辑推理方向 #Datawhale #夏令营-CSDN博客 这里在上一篇的基础上&#xff0c;已经充分理解了一遍baseline的流程&#xff0c;并修复了一些后处理的问题&#xff0c;包括答案抽取&#xff0c;中间…...

编程日记 2024/7/30 18:35:38

C# 关于Linq延迟查询

demo: int Count 0;string[] obj { "item1", "item2", "item3", "item4", "item5", "item6" };var query obj.Where(item > IsTrue(item));// 第一次遍历foreach (var item in query){Console.WriteLine(it…...

编程日记 2024/7/30 18:34:37

Navicat For Mysql连接Mysql8.0报错：客户端不支持服务器请求的身份验证协议

windows通过navicat连接本地mysql时报错：Client does not support authentication protocol requested by server; consider upgrading MySQL client 一、问题原因二、解决方法1--失败1. 连接mysql客户端2. 修改加密方式3.正确的解决方法1.查找my.ini文件2.修改my.ini文件3.重…...

编程日记 2024/7/30 18:33:35

以西门子winCC为代表的组态界面，还是有很大提升空间的。

组态界面向来都是功能为主&#xff0c;美观和体验性为辅的&#xff0c;这也导致了国内的一些跟随者如法炮制&#xff0c;而且很多操作的工程师也是认可这重模式&#xff0c;不过现在一些新的组态软件可是支持精美的定制化界面&#xff0c;还有3D交互效果&#xff0c;这就是确实…...

编程日记 2024/7/30 18:31:32

HomeServer平台选择，介绍常用功能

​​ 平台选择 HomeServer 的性能要求不高&#xff0c;以下是我的硬件参数&#xff0c;可供参考&#xff1a; ‍ 硬件&#xff1a; 平台&#xff1a;旧笔记本CPU&#xff1a;i5 4210u内存 8G硬盘&#xff1a;128G 固态做系统盘&#xff0c;1T1T 机械盘组 RAID1 做存储。硬…...

编程日记 2024/7/30 18:29:30

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

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

编程新知 2025/12/25 5:23:55

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/12/14 5:13:32

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2025/12/15 17:58:16

Ubuntu系统复制（U盘-电脑硬盘）

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

编程新知 2025/12/10 20:24:30