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

CSS（盒子模型，定位，浮动，扩展）

news 2025/9/17 1:00:36

CSS

盒子模型：
- 外边距：
- 内边距：
- 水平居中：
定位：
- 相对定位：
- 绝对定位：
- 固定定位：
浮动：
扩展：

盒子模型：

盒子模型(Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

标签：div

外边距：

margin-top: 50px;设置外边距 - 上边距。

margin-left: 50px;设置外边距 - 左边距。

margin-right: 50px;设置外边距 - 右边距。

margin-bottom: 50px;设置外边距 - 下边距。

上下左右的外边距都相同，简化为 margin: 50px;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** 	margin-top: 50px;设置外边距 - 上边距margin-left: 50px;设置外边距 - 左边距margin-right: 50px;设置外边距 - 右边距margin-bottom: 50px;设置外边距 - 下边距*/margin: 50px;}			</style></head><body><div>今天天气真好</div></body>
</html>

内边距：

padding-top: 50px;设置内边距 - 上边距
padding-left: 50px;设置内边距 - 左边距
padding-right: 50px;设置内边距 - 右边距
padding-bottom: 50px; 设置内边距 - 下边距

上下左右的内边距都相同，简化为 padding: 50px;

注意：能不使用内边距就不使用，因为老版本的IE浏览器不支持，而且会把盒子撑变形！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** 	padding-top: 50px;padding-left: 50px;padding-right: 50px;padding-bottom: 50px; */padding: 50px;}			</style></head><body><div>今天天气真好</div></body>
</html>

水平居中：

水平居中：margin: 0 auto;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;margin: 0 auto;/*水平居中*/}			</style></head><body><div>今天天气真好</div></body>
</html>

定位：

相对定位：

相对定位：保留原有位置，相对于原有位置进行位移。

position: relative;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;/*相对定位：保留原有位置，相对于原有位置进行位移*/position: relative;/*距离定位位置上边缘50px*/top: 50px;/*距离定位位置左边缘50px*/left: 50px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

绝对定位：

绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移。

position: absolute;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;position: relative;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;/*绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移*/position: absolute;/*距离定位位置上边缘50px*/top: 50px;/*距离定位位置左边缘50px*/left: 50px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

固定定位：

固定定位：将元素固定到页面的某个位置，一直保持不变。

position: fixed;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{/*固定定位：将元素固定到页面的某个位置*/position: fixed;top: 80%;left: 90%;}</style></head><body><div><a href="#top">置顶</a></div><a name="top"></a><!--下锚点--><a href="#new01">法治</a><!--定位到锚点处--><a href="#new02">国际</a><!--定位到锚点处--><a href="#new03">娱乐</a><!--定位到锚点处--><a name="new01"></a><!--下锚点--><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><a name="new02"></a><!--下锚点--><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><a name="new03"></a><!--下锚点--><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1></body>
</html>

浮动：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 50%;height: 100px;float: left;}#box02{width: 50%;height: 100px;float: right;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>

扩展：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;}input{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 5px;/*圆角属性*/box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}img{/*圆形*/border-radius: 50%;}</style></head><body><input type="button" value="普通按钮" /><br /><img src="../img/花.jpg" width="100px" height="100px" /></body>
</html>

CSS（盒子模型，定位，浮动，扩展）

CSS 盒子模型：外边距：内边距：水平居中： 定位：相对定位：绝对定位：固定定位： 浮动：扩展： 盒子模型： 盒子模型(Box Model) 规定了元素框处理元素内容…...

编程日记 2024/6/5 7:19:06

AIGC如何改变人类生活20240529

AIGC如何改变人类生活随着人工智能技术的不断发展，人类生活正经历着前所未有的变革。在这个过程中，AIGC（人工智能生成内容）的概念应运而生，它已经在很多领域产生了深远的影响。本文将探讨AIGC如何改变人类生活&#…...

编程日记 2024/6/5 7:18:05

【python】成功解决“TypeError: ‘method’ object is not subscriptable”错误的全面指南

成功解决“TypeError: ‘method’ object is not subscriptable”错误的全面指南一、引言在Python编程中，TypeError: method object is not subscriptable错误是一个常见的陷阱，特别是对于初学者来说。这个错误通常意味着你尝试像访问列表、元组、字典…...

编程日记 2024/6/5 7:17:04

1. 修改 LoginBody，添加登录类型字段 Data public class LoginBody {/*** 用户名*/private String username;/*** 用户密码*/private String password;/*** 验证码*/private String code;/*** 唯一标识*/private String uuid;/*** 登录类型*/private String logi…...

编程日记 2024/6/5 7:14:00

Web 网页性能优化

Web 网页性能及性能优化一、Web 性能 Web 性能是 Web 开发的一个重要方面，侧重于网页加载速度以及对用户输入的响应速度通过优化网站来改善性能，可以在为用户提供更好的体验网页性能既广泛又非常深入 1. 为什么性能这么重要？ 1. 性能…...

编程日记 2024/6/5 7:12:59

JDBC-MySQL

JDBC-MySQL 1.JDBC 操作步骤1.1 DriverManager1.2.Connection对象1.3 Statement1.4 PreparedStatement 1.JDBC 操作步骤 public void quickStart() throws ClassNotFoundException, SQLException {//1、注册驱动 （确认要使用哪个数据库）Class.forName(&…...

编程日记 2024/6/5 7:11:58

MySQL经典练习50题(上)（解析版）

所有笔记、生活分享首发于个人博客想要获得最佳的阅读体验（无广告且清爽），请访问本篇笔记 MySQL经典练习50题（上） 创建数据库和表 -- 建表 -- 学生表 CREATE TABLE Student( s_id VARCHAR(20), s_name VARCHAR(2…...

编程日记 2024/6/5 7:10:57

每日一题33：数据统计之广告效果

一、每日一题返回结果示例如下： 示例 1： 输入： Ads 表: ------------------------- | ad_id | user_id | action | ------------------------- | 1 | 1 | Clicked | | 2 | 2 | Clicked | | 3 | 3 | Viewed…...

编程日记 2024/6/5 7:07:53

52、有边数限制的最短路

有边数限制的最短路题目描述给定一个n个点m条边的有向图，图中可能存在重边和自环， 边权可能为负数。请你求出从1号点到n号点的最多经过k条边的最短距离，如果无法从1号点走到n号点，输出impossible。注意：图中可…...

编程日记 2024/6/5 7:06:52

Spring boot实现基于注解的aop面向切面编程

Spring boot实现基于注解的aop面向切面编程背景从最开始使用Spring，AOP和IOC的理念就深入我心。正好，我需要写一个基于注解的AOP，被这个注解修饰的参数和属性，就会被拿到参数并校验参数。一，引入依赖当前sprin…...

编程日记 2024/6/5 7:03:46

MySQL之查询性能优化(四)

查询性能优化 MySQL客户端/服务器通信协议一般来说，不需要去理解MySQL通信协议的内部实现细节，只需要大致理解通信协议是如何工作的。MySQL客户端和服务器之间的通信协议是"半双工"的，这意味着，在任何一个时刻&#…...

编程日记 2024/6/5 6:59:42

定时任务详解

文章目录定时任务详解JDK自带第三方任务调度框架java有哪些定时任务的框架为什么需要定时任务定时任务扫表的方案有什么缺点Quartzxxl-jobxxl-job详解 elastic-job 定时任务详解在定时任务中，操作系统或应用程序会利用计时器或定时器来定期检查当前时间是否达到了…...

编程日记 2024/6/5 6:58:41

OnlyOffice DocumentServer 8.0.1编译破解版本（￥100）

OnlyOffice DocumentServer 8.0.1编译破解版本（￥100） 破解20人数限制更换中文字体修改源码，根据业务自定义服务根据源码在本机启动项目，便于开发将编译好的服务打包docker镜像运行提供各种docker镜像包&…...

编程日记 2024/6/5 6:57:40

Android 应用权限

文章目录权限声明uses-permissionpermissionpermission-grouppermission-tree其他uses-feature 权限配置权限声明 Android权限在AndroidManifest.xml中声明，<permission>、 <permission-group> 、<permission-tree> 和<uses-permission>…...

编程日记 2024/6/5 6:56:39

MATLAB 匿名函数

定义匿名函数定义匿名函数的基本语法如下：示例示例 1：简单数学运算示例 2：字符串操作示例 3：作为参数传递匿名函数的高级用法使用函数句柄定义多输出函数使用局部变量使用嵌套匿名函数注意事项匿名函数（ Anonymous…...

编程日记 2024/6/5 6:55:38

Java 新手入门：基础知识点一览

Java 新手入门：基础知识点一览想要踏入 Java 的编程世界？别担心，这篇文章将用简单易懂的表格形式，带你快速了解 Java 的基础知识点。一、Java 是什么？ 概念解释Java一种面向对象的编程语言，拥有跨平台、…...

编程日记 2024/6/5 6:54:37

三维模型轻量化工具：手工模型、BIM、倾斜摄影等皆可用！

老子云是全球领先的数字孪生引擎技术及服务提供商，它专注于让一切3D模型在全网多端轻量化处理与展示，为行业数字化转型升级与数字孪生应用提供成套的3D可视化技术、产品与服务。老子云是全球领先的数字孪生引擎技术及服务提供商，它专注于让…...

编程日记 2024/6/5 6:53:36

小程序CI/CD之自动化打包预览并钉钉通知发布进程

小程序打包方式分为两种：手动打包、自动打包那如何实现自动打包呐？我们今天就来聊一聊！ 首先，很重要，看官方文档这里提到今天我们要聊的“主角” miniprogram-ci miniprogram-ci 是从微信开发者工具中抽离的关于…...

编程日记 2024/6/5 6:52:35

C++使用QtHttpServer开发服务端Server的Http POST接口和客户端Client示例

Client HTTP POST 假设http://127.0.0.1:8888/post/是一个能够接受POST请求的路径，我们想要向它提交一段json数据，用Qt可以这样实现： Suppose we want to make an HTTP POST with json body to http://127.0.0.1:8888/post/. QCoreApplica…...

编程日记 2024/6/5 6:50:33

计算机基础（8）——音频数字化（模电与数电）

💗计算机基础系列文章💗 👉🍀计算机基础（1）——计算机的发展史🍀👉🍀计算机基础（2）——冯诺依曼体系结构🍀👉&#x1f34…...

编程日记 2024/6/5 6:49:32

地震勘探——干扰波识别、井中地震时距曲线特点

目录干扰波识别反射波地震勘探的干扰波井中地震时距曲线特点干扰波识别有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。地震勘探中，有效波和干扰波是相对的。例如，在反射波…...

编程新知 2025/9/15 5:17:34

PHP和Node.js哪个更爽?

先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...

编程新知 2025/9/14 7:59:52

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/8/19 20:22:44

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时，你可能需要保留重要的数据，例如通讯录。好在，将通讯录从 iPhone 转移到 Android 手机非常简单，你可以从本文中学习 6 种可靠的方法，确保随时保持连接，不错过任何信息。第 1…...

编程新知 2025/8/10 12:51:07

汇编常见指令

汇编常见指令一、数据传送指令指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/20 13:23:05

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

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

编程新知 2025/9/11 11:06:07

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...

编程新知 2025/9/6 0:10:01