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

DIV布局页面 - -王心雨

DIV:

单标签”<br/“规范

<table><tr><th>Header</th></tr></table>相当于<div><th>Header</th></div>

块元素、行内元素、行内块元素 区别 :
① 块元素 Block-level element
独占一行,自动换行,宽度默认撑满父容器100%
可设置宽高、内外边距(margin/padding)
可包含块元素、行内元素
常见:div、p、h1~h6、ul、li、section
② 行内元素Inline element
不换行,多个并排显示
宽高由内容决定,不能设置宽高
上下 margin/padding 无效/不占空间
常见:span、a、strong、em、i
③ 行内块元素Inline-block element
不换行,像行内一样并排
可设置宽高、内外边距,像块一样可控
元素间会有默认空白间隙
常见:img、input、button、select
\3. 一句话总结
Block:独占一行,可设尺寸
Inline:同行排列,不能设尺寸

1、DIV由四层做成,从外往内依次是:margin(边界)、border(边框)、podding(填充)、contnt(内容)

2、除了contnt其他三层有4层方向从上方开始顺时针方向依次是:margin-top、margin-right、margin-bottom、margin-left

3、背景颜色会应用到除了margin的所有区域

4、定义DIV的尺寸是contnt的尺寸

5、四个方向跟的值可以跟1/2/3/4个数,一个数:上、下

​ 两个数:左、右

​ 三个数:上、左右、下

​ 四个数:上、右、下、左

dotted(圆形虚线),border(实线),soild(虚线)

http://www.jsqmd.com/news/601543/

相关文章:

  • OpenClaw环境隔离:Qwen3-14b_int4_awq多项目配置管理方案
  • 告别手动翻查:基于快马平台构建你的mc高效指令工作流
  • Gemma-3-12b-it效果展示:古籍扫描页识别+繁体转简体+白话文翻译
  • AI辅助开发:让快马平台智能生成期刊官网架构与核心业务代码
  • SE Office:5个核心优势打造浏览器办公新体验
  • OpenClaw对接Qwen3-32B私有部署镜像:RTX4090D 24G显存优化实战
  • CountDownLatch、CyclicBarrier、Semaphore 的区别?
  • 网站seo优化服务收费标准是如何制定的
  • ESP32 LoRaWAN深度睡眠状态持久化方案
  • 暗黑破坏神2存档编辑:从复杂二进制到可视化操作的蜕变之路
  • SEO外推如何实现长期持续的效果
  • 3个技巧解决窗口尺寸控制难题:WindowResizer开源工具全解析
  • 本科论文初稿怎么写?实测四款写论文的AI工具教程,从开题报告到答辩讲稿全覆盖 - 掌桥科研-AI论文写作
  • AssetStudio深度解析:Unity资源逆向工程的实战技巧与高级应用
  • 原生PDF与扫描件PDF的区别:3秒自测法+提取策略
  • 助你省钱!瑞祥卡线上回收的隐藏福利揭秘 - 团团收购物卡回收
  • AI辅助开发:让快马AI教你如何优化调用openmaic网页版的代码与提示词
  • 云容笔谈多场景落地:出版社AI辅助古籍插画复原与风格化再创作
  • 告别盲目选型:最新跨网文件安全交换系统排名与选购避坑指南 - 飞驰云联
  • 3步构建抖音内容自动化采集流水线
  • LTSC-Add-MicrosoftStore解决方案:Windows 11 24H2 LTSC应用商店高效部署指南
  • 从选题到答辩:毕业之家如何帮你搞定毕业论文?
  • 5分钟掌握阿里云盘Refresh Token扫码获取终极实战指南
  • 股票实时行情-外汇行情-期货行情-全球股市行情-港股行情查询-美股行情-股票价格查询API接口介绍 - Jumdata
  • 终极跨平台游戏串流方案:Sunshine让你在任何设备畅玩PC大作
  • 深度学习模型nli-distilroberta-base解析:从Matlab视角看Transformer
  • 如何用Spek音频频谱分析器轻松掌握音频质量检测:新手入门终极指南
  • G-Helper:华硕笔记本硬件控制的轻量级替代方案与开源工具深度评测
  • 隐私优先方案:OpenClaw+本地Gemma-3-12b-it处理敏感财务数据
  • PROJECT MOGFACE代码理解:辅助阅读与解析复杂Python源码项目