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

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

news 2025/6/29 8:39:51

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

定位

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

浮动

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

盒子模型

在这里插入图片描述

<!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>.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.lryc.cn/news/533989.html

相关文章：

  • LQB（1）-python-各种基础排序
  • 解锁国内主流前端与后端框架
  • 使用OBS推流，srs服务器播放
  • 【鸿蒙HarmonyOS Next实战开发】多媒体视频播放-ijkplayer
  • GRU 和 LSTM 公式推导与矩阵变换过程图解
  • 现在中国三大运营商各自使用的哪些band频段
  • 使用Jenkins实现鸿蒙HAR应用的自动化构建打包
  • AI时代，职场人如何开启学习之旅
  • MIT6.824 Lecture 2-RPC and Threads Lecture 3-GFS
  • MySQL第五次作业
  • 【PDF提取内容】如何批量提取PDF里面的文字内容，把内容到处表格或者批量给PDF文件改名，基于C++的实现方案和步骤
  • 智慧机房解决方案（文末联系，领取整套资料，可做论文）
  • 【C编程问题集中营】使用数组指针时容易踩得坑
  • 【Redis】Linux、Windows、Docker 环境下部署 Redis
  • 反函数定义及其推导
  • 2025.2.9机器学习笔记：PINN文献阅读
  • Oracle数据连接 Dblink
  • fetch请求总结,fastadmin中后台接口强制返回json数据
  • 基于STM32的智能鱼缸水质净化系统设计
  • JAVA安全—FastJson反序列化利用链跟踪autoType绕过
  • 格式化字符串漏洞（Format String Vulnerability）
  • C++--iomanip库
  • Redis 集群原理、主从复制和哨兵模式的详细讲解
  • 基于Java的远程视频会议系统(源码+系统+论文)
  • springboot 事务管理
  • 深度学习-神经机器翻译模型
  • .NET周刊【2月第1期 2025-02-02】
  • 【合集】Java进阶——Java深入学习的笔记汇总 amp； 再论面向对象、数据结构和算法、JVM底层、多线程
  • GPU、CUDA 和 cuDNN 学习研究【笔记】
  • 【5】阿里面试题整理