HTML之CSS定位、浮动、盒子模型

ops/2025/2/11 14:36:59/

HTML之CSS定位、浮动、盒子模型

定位

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>css">.outDiv{width: 500px;height: 300px;background-color: lightblue;border: 1px solid green;margin: 0 auto;}.innerDiv{width: 100px;height: 100px;background-color: lightcoral;border: 1px solid red;margin: 10px;/* display: inline; block 默认 表示块元素 ; inline 行内元素 */}/* position: static  默认值fixed    相对定位  相对于浏览器窗口 relative 相对定位  相对于自己原来的位置，元素原本位置不会被其他元素占用absolute 绝对定位left跟right是一对，top跟bottom是一对，用时只用一对中的某一个left right top bottom*/.d1{position: relative;top: 100px;right: 100px;}</style>
</head>
<body><div class="outDiv"><div class="innerDiv d1">div1</div><div class="innerDiv d2">div2</div><div class="innerDiv d3">div3</div></div>
</body>
</html>

浮动

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>css">.outDiv{width: 500px;height: 300px;background-color: lightblue;border: 1px solid green;margin: 0 auto;}.innerDiv{width: 100px;height: 100px;background-color: lightcoral;border: 1px solid red;margin: 10px;/* display: inline; block 默认 表示块元素 ; inline 行内元素 *//* float: left; */}/* 浮动设置的初衷 就是为了不隐藏文字 *//* 当d1设置左浮动，而其他两个没设置浮动时，d1会盖住下面飘上来的div模块，但是不会盖住其中的文字，文字会被挤到div模块下面 */.d1{float: right;}</style>
</head>
<body><div class="outDiv"><div class="innerDiv d1">div1</div><div class="innerDiv d2">div2</div><div class="innerDiv d3">div3</div></div>
</body>
</html>

盒子模型

在这里插入图片描述

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>css">.outDiv{width: 500px;height: 300px;background-color: lightblue;border: 1px solid green;margin: 0px auto;}.innerDiv{width: 100px;height: 100px;background-color: lightcoral;border: 1px solid red;margin: 10px;  /* 外边距 四方位 *//* display: inline; block 默认 表示块元素 ; inline 行内元素 */float: left;}/* width:100px; height:100px; div中设置width和height 表示元素div的容量是100*100border:1px; 表示边线，边线不侵占容量； 设置边线之后 div元素的实际占用高度为：容量 100 + 边线（上下）  1*2 = 102边距：即元素留白margin:10px; 表示外边距，外边距不侵占容量； 设置外边距之后 div元素的实际占用高度为：容量 100 + 边线（上下）  1*2 + 外边距（上下） 10*2 = 122写法：margin: 10px;  margin:10px 20px;（上下 左右）  margin:10px 20px 30px 40px;(从上边距开始顺时针转)  margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px;padding:10px; 表示内边距，内边距不侵占容量;也是会是原本的元素变大，可以通过设置box-sizing:border-box使元素本身不变；写法：padding: 10px;  padding:10px 20px;（上下 左右）  padding:10px 20px 30px 40px;(从上边距开始顺时针转)  padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px;*/.d1{/* float: right; */padding: 20px; /* 内边距 四方位  或者padding-top 等... ...*/box-sizing: border-box; /* 设置盒子模型为border-box，设置之后，padding不会增加元素的实际占用高度 */margin-right: 20px;}</style>
</head>
<body><div class="outDiv"><div class="innerDiv d1">div1</div><div class="innerDiv d2">div2</div><div class="innerDiv d3">div3</div></div>
</body>
</html>

http://www.ppmy.cn/ops/157546.html

相关文章

Kafka的架构解析

Kafka的架构解析

目录 1 背景2 kafka的架构来源2.1 增加消息队列2.2 高性能2.3 高可用2.4 持久化和过期策略2.5 Consumer Group2.6 Zookeeper 3 Kafka架构图4 Kafka的应用场景 1 背景 场景&#xff1a; A服务每秒发送200个消息 B服务每秒处理100个消息 问题&#xff1a; B服务会被压垮&#xf…
阅读更多...
微信小程序如何使用decimal计算金额

微信小程序如何使用decimal计算金额

第三方库地址&#xff1a;GitHub - MikeMcl/decimal.js: An arbitrary-precision Decimal type for JavaScript 之前都是api接口走后端计算&#xff0c;偶尔发现这个库也不错&#xff0c;计算简单&#xff0c;目前发现比较准确 上代码 导入js import Decimal from ../../uti…
阅读更多...
用 Python 给 Excel 表格截图（20250207）

用 Python 给 Excel 表格截图（20250207）

我搜索了网络上的方案&#xff0c;感觉把 Excel 表格转换为 HTML 再用 platwright 截图是比较顺畅的路径&#xff0c;因为有顺畅的工具链。如果使用的是 Windows 系统则不需要阅读此文&#xff0c;因为 win32com 库更方便。这篇文章中 Excel 转 HTML 的方案&#xff0c;主要弥补…
阅读更多...
8、Python 面试题解析：实例方法、静态方法和类方法的区别

8、Python 面试题解析：实例方法、静态方法和类方法的区别

Python 实例方法、静态方法和类方法详解 在 Python 中&#xff0c;实例方法、静态方法和类方法是三种不同类型的方法&#xff0c;它们的主要区别在于调用方式、参数传递和使用场景。以下从定义、语法、使用场景等方面全面解析&#xff0c;并附代码示例。 一、核心区别 方法类…
阅读更多...
信创领域的PostgreSQL管理员认证

信创领域的PostgreSQL管理员认证

信创产业&#xff0c;全称为信息技术应用创新产业&#xff0c;是中国为应对国际技术竞争、保障信息安全、实现科技自立而重点发展的战略性新兴产业。其核心目标是通过自主研发和生态构建&#xff0c;逐步替代国外信息技术产品&#xff0c;形成自主可控的国产化信息技术体系。 发…
阅读更多...
计算机毕业设计SpringBoot+Vue.js遗传算法自动排课系统（源码+文档+运行视频+讲解视频）

计算机毕业设计SpringBoot+Vue.js遗传算法自动排课系统（源码+文档+运行视频+讲解视频）

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…
阅读更多...
深入剖析 JVM 垃圾收集器之 CMS 和 G1

深入剖析 JVM 垃圾收集器之 CMS 和 G1

在 Java 虚拟机&#xff08;JVM&#xff09;的世界里&#xff0c;垃圾收集器是一个至关重要的组件&#xff0c;它负责自动回收不再被使用的内存空间&#xff0c;保证应用程序的稳定运行。本文将着重介绍两种具有代表性的垃圾收集器&#xff1a;CMS&#xff08;Concurrent Mark …
阅读更多...
【含文档+PPT+源码】基于微信小程序的校园志愿者管理系统的设计与实现

【含文档+PPT+源码】基于微信小程序的校园志愿者管理系统的设计与实现

项目介绍 本课程演示的是一款 基于微信小程序的校园志愿者管理系统的设计与实现&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本…
阅读更多...
最新文章

Copyright @ 2022~2023