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

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

目录

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

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

盒模型:网页布局的基础

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

  • 内容(Content):盒子的实际内容,由元素的widthheight属性定义。
  • 内边距(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属性,我们可以将元素从文档流中取出,并使用toprightbottomleft属性来定位。

定位的类型

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

定位的示例

.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布局中的两个核心…...

electron 主进程和渲染进程

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

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

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

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) 逻辑运算符…...

js抓取短信验证码发送

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

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

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

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

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

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

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

Java学习Day17:基础篇7

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

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

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

手撕数据结构02--二分搜索(附源码)

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

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

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

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

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

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

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

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

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

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

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

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…...

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.重…...

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

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

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

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

记录一个k8s集群zookeeper部署过程

由于网管中心交维要求必须是支持高可用配置&#xff0c;原先单节点的zookeeper不被允许。所以在k8s集群中做了一个高可用版本的zookeeper。 期间有点小波折&#xff0c;官方给的镜像版本太老&#xff0c;业务不支持&#xff0c;所以手动做了下处理&#xff0c;重新打了一个镜像…...

TapData 信创数据源 | 国产信创数据库 TiDB 数据迁移指南,加速国产化进程,推进自主创新建设

随着国家对自主可控的日益重视&#xff0c;目前在各个行业和区域中面临越来越多的国产化&#xff0c;采用有自主知识产权的国产数据库正在成为主流。长期以来&#xff0c;作为拥有纯国产自研背景的 TapData&#xff0c;自是非常重视对于更多国产信创数据库的数据连接器支持&…...

开始写人工智能

文章目录 概述 概述 开始写人工智能模块。既然决定开始写这些&#xff0c;那就开始吧&#xff01;...

盘点.软件测试模型

软件开发模型   软件开发模型(Software Development Model)是指软件开发全部过程、活动和任务的结构框架。软件开发包括需求、设计、编码和测试等阶段&#xff0c;有时也包括维护阶段。 软件开发模型能清晰、直观地表达软件开发全过程&#xff0c;明确规定了要完成的主要活动…...

燃气安全无小事,一双专业劳保鞋让你步步安心!

燃气作为我们日常生活中不可或缺的能源之一&#xff0c;为我们的生活提供了极大便利&#xff0c;其安全性往往被忽视在忙碌的日常生活背后。然而&#xff0c;燃气事故一旦发生&#xff0c;后果往往不堪设想&#xff0c;轻则财产损失&#xff0c;重则危及生命。因此&#xff0c;…...

springboot校园服装租赁系统-计算机毕业设计源码30824

目 录 摘要 1 绪论 1.1 研究背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2 校园服装租赁系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例…...

线性回归和逻辑回归揭示数据的隐藏模式:理论与实践全解析

机器学习之线性回归和逻辑回归 1. 简介1.1 机器学习概述1.2 监督学习的定义与重要性1.3 线性回归和逻辑回归在监督学习中的作用1.3.1 线性回归1.3.2 逻辑回归 2. 线性回归&#xff08;Linear Regression&#xff09;2.1 定义与目标2.1.1 回归问题的定义2.1.2 预测连续目标变量 …...

掌握采购询价软件:高效比较供应商报价的技巧

在企业运营中&#xff0c;获取所需的产品往往是一项复杂且耗时的任务&#xff0c;这涉及多个环节和流程。然而&#xff0c;借助电子采购询价&#xff08;RFQ&#xff09;系统&#xff0c;许多原本需要采购员手动完成的任务可以自动化运行&#xff0c;从而提高了效率。 那么问题…...

AMQP-核心概念-终章

本文参考以下链接摘录翻译&#xff1a; https://www.rabbitmq.com/tutorials/amqp-concepts 连接&#xff08;Connections&#xff09; AMQP 0-9-1连接通常是长期保持的。AMQP 0-9-1是一个应用级别的协议&#xff0c;它使用TCP来实现可靠传输。连接使用认证且可以使用TLS保护…...

在WPF中使用WebView2详解

Microsoft Edge WebView2 Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎&#xff0c;以在本机应用中显示 web 内容。 使用 WebView2 可以在本机应用的不同部分嵌入 Web 代码&…...

僵尸进程的例子

以下是一个简单的C语言程序示例&#xff0c;该程序将创建一个子进程&#xff0c;然后子进程退出&#xff0c;但是父进程不会调用wait()或waitpid()来回收子进程的状态&#xff0c;从而使得子进程成为僵尸进程。 #include <stdio.h> #include <stdlib.h> #include …...

消息中间件分享

消息中间件分享 1 为什么使用消息队列2 消息队列有什么缺点3 如何保证消息队列的高可用4 如何处理消息丢失的问题?5 如何保证消息的顺序性1 为什么使用消息队列 解耦、异步、削峰 解耦 不使用中间件的场景 使用中间件的场景 异步 不使用中间件 使用中间件 削峰 不使…...

12. kubernetes调度——污点Taint和容忍Toleration

kubernetes调度——污点Taint和容忍Toleration 一、通过节点属性调度1、节点名称2、节点标签2.1 查看节点标签2.2 添加标签2.3 修改标签2.4 删除标签2.5 通过节点标签进行调度 二、污点Taint和容忍Toleration1、污点Taint1.1 查看Master节点的污点1.2 添加污点1.3 删除污点 2、…...

第100+18步 ChatGPT学习:R实现SVM分类

基于R 4.2.2版本演示 一、写在前面 有不少大佬问做机器学习分类能不能用R语言&#xff0c;不想学Python咯。 答曰&#xff1a;可&#xff01;用GPT或者Kimi转一下就得了呗。 加上最近也没啥内容写了&#xff0c;就帮各位搬运一下吧。 二、R代码实现SVM分类 &#xff08;1&a…...

react函数学习——useState函数

在 React 中&#xff0c;useState 是一个钩子&#xff08;hook&#xff09;&#xff0c;用于在函数组件中添加状态管理功能。它返回一个数组&#xff0c;包含两个元素&#xff1a; 当前状态值&#xff08;selectedValue&#xff09;&#xff1a;这是状态的当前值。更新状态的函…...

方天云智慧平台系统 GetCompanyItem SQL注入漏洞复现

0x01 产品简介 方天云智慧平台系统,作为方天科技公司的重要产品,是一款面向企业全流程的业务管理功能平台,集成了ERP(企业资源规划)、MES(车间执行系统)、APS(先进规划与排程)、PLM(产品生命周期)、CRM(客户关系管理)等多种功能模块,旨在通过云端服务为企业提供…...

C语言同时在一行声明指针和整型变量

如果这么写&#xff0c; int *f, g; 并没有声明2个指针&#xff0c;编译器自己会识别&#xff0c;f是一个指针&#xff0c;g是一个整型变量&#xff1b; void CTszbView::OnDraw(CDC* pDC) {CTszbDoc* pDoc GetDocument();ASSERT_VALID(pDoc);// TODO: add draw code for nat…...

thinkphp框架远程代码执行

一、环境 vulfocus网上自行下载 启动命令&#xff1a; docker run -d --privileged -p 8081:80 -v /var/run/docker.sock:/var/run/docker.sock -e VUL_IP192.168.131.144 8e55f85571c8 一定添加--privileged不然只能拉取环境首页不显示 二、thinkphp远程代码执行 首页&a…...

【公式】博弈论中的核心算法:纳什均衡公式解析

博弈论中的核心算法:纳什均衡公式解析 纳什均衡的基本概念 纳什均衡是博弈论中的一个核心概念,它描述了一个博弈中所有参与者都无法通过单方面改变自己的策略来增加收益的状态。在纳什均衡状态下,每个参与者的策略都是对其他参与者策略的最优反应。纳什均衡的公式可以表示…...

计算机网络面试题2

WebSocket相关知识 什么是WebSocket? WebSocket是一种基于TCP连接的全双工通信协议&#xff0c;即客户端和服务器可以同时发送和接收数据 WebSocket和HTTP有什么区别&#xff1f; 1.WebSocket是双向通信协议&#xff0c;HTTP是单向通信协议 2.WebSocket使用ws://或者wss:/…...

Linux网络——深入理解传入层协议TCP

目录 一、前导知识 1.1 TCP协议段格式 1.2 TCP全双工本质 二、三次握手 2.1 标记位 2.2 三次握手 2.3 捎带应答 2.4 标记位 RST 三、四次挥手 3.1 标记位 FIN 四、确认应答(ACK)机制 五、超时重传机制 六 TCP 流量控制 6.1 16位窗口大小 6.2 标记位 PSH 6.3 标记…...

快速搞定分布式RabbitMQ---RabbitMQ进阶与实战

本篇内容是本人精心整理&#xff1b;主要讲述RabbitMQ的核心特性&#xff1b;RabbitMQ的环境搭建与控制台的详解&#xff1b;RabbitMQ的核心API&#xff1b;RabbitMQ的高级特性;RabbitMQ集群的搭建&#xff1b;还会做RabbitMQ和Springboot的整合&#xff1b;内容会比较多&#…...

5万字长文吃透快手大数据面试题及参考答案(持续更新)

目录 Flink为什么用aggregate()不用process() 为什么使用aggregate() 为什么不用process() 自定义UDF, UDTF实现步骤,有哪些方法?UDTF中的ObjectInspector了解吗? 自定义UDF实现步骤 自定义UDTF实现步骤 UDTF中的ObjectInspector Spark Streaming和Flink的区别 Flu…...

WordPress原创插件:启用关闭经典编辑器和小工具

WordPress原创插件&#xff1a;启用关闭经典编辑器和小工具 主要功能 如图所示&#xff0c;用于启用或禁用经典编辑器和经典小工具&#xff0c;以替代Gutenberg编辑器。 插件下载 https://download.csdn.net/download/huayula/89592822...

萝卜快跑:自动驾驶的先锋与挑战

萝卜快跑&#xff1a;自动驾驶的先锋与挑战 萝卜快跑作为自动驾驶领域的重要参与者&#xff0c;被视为自动驾驶的先锋。它代表了自动驾驶技术在实际应用中的重要突破&#xff0c;为人们的出行方式带来了革新。萝卜快跑的发展展示了自动驾驶技术的巨大潜力&#xff0c;如提高交通…...

得到xml所有label 名字和数量 get_xml_lab.py,get_json_lab.py

import os import xml.etree.ElementTree as ETrootdir2 r"F:\images3\xmls" file_list os.listdir(rootdir2) # 列出文件夹下所有的目录与文件# 初始化字典 classes_dict {}for file_name in file_list:path os.path.join(rootdir2, file_name)if os.path.isfi…...

数据结构算法-排序(二)

插入排序 插入排序核心 假设数组中的一部数据已经排好序&#xff0c;要插入的数据和这些数据进行比较&#xff0c;直到找到合适的位置插入新数据。 插入排序步骤 插入排序主要有以下步骤构成&#xff1a; 假设有序&#xff0c;我们假设**a[0]**已经排好序待插入的数据为a[j]…...

Linux安装与配置

下载VMware 首先我们需要下载一个叫VMware的软件&#xff1a; 进入官方下载&#xff0c;地址&#xff1a;https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html选择与自己电脑版本适配的VMware版本【 输入许可证密钥 MC60H-DWHD5-H80U9-6V85…...

AI赋能交通治理:非机动车监测识别技术在城市街道安全管理中的应用

引言 城市交通的顺畅与安全是城市管理的重要组成部分。非机动车如自行车、电动车、摩托车等在城市交通中扮演着重要角色&#xff0c;但同时也带来了管理上的挑战。尤其是在机动车道上误入非机动车的现象&#xff0c;不仅影响交通秩序&#xff0c;还可能引发交通事故。思通数科…...

水电站泄洪放水预警广播系统解决方案

一、背景 在现代水利工程管理中&#xff0c;水电站泄洪放水预警广播系统扮演着至关重要的角色。这一系统不仅关系到水电站的安全运行&#xff0c;也直接关系到下游地区人民群众的生命财产安全。因此&#xff0c;设计一套完善、高效、可靠的泄洪放水预警广播系统显得尤为必要。…...