HTML_CSS_盒子模型

盒子模型组成 

  1. 内容区域(comtent)
  2. 内边距区域(padding)
  3. 边框区域(border)
  4. 外边距区域(margin)

 布局标签

 标签:<div>  </div>        和        <span>  </span>

  1. 特点:<div>一行只显示一个        宽度默认是父亲宽度        高度由内容撑开        可以设置宽高        <span>一行可以显示多个        高度由内容撑开        不可以设置宽高 
  2. 应用:
    <!DOCTYPE html>
    <html><head><meta charset="utf-8"><title></title><style>#nav-max {width: 1200px;margin: 0px auto;box-sizing: border-box;}#nav-max1 {width: 600px;margin: 0px auto;box-sizing: border-box;position: relative;}#nav-max2 {width: 1200px;margin: 0px auto;box-sizing: border-box;}#nav-max3 {width: 1200px;height: 500px;margin: 15px 15px;padding: 10px;margin: 0px auto;box-sizing: border-box;border: 1px red solid;}#nav-min1 {background-color: beige;float: left;padding: 10px 43px;}#nav-min1:hover {background-color: coral;color: #fd0000;}#nav-min2 {width: 300px;height: 500px;margin: 15px 15px;padding: 10px;border: 1px red solid;float: left;background-color: bisque;}#nav-min3 {width: 440px;height: 500px;margin: 15px 15px;float: left;}#img1 {position: absolute;width: 82px;right: 700px;}#img2 {width: 440px;height: 520px;position: relative;}#box_img2_left {top: 300px;background-color: #fd0000;position: absolute;}#box_img2_right {top: 300px;right: 0px;background-color: #fd0000;position: absolute;}</style></head><body><div id="nav-max"><div id="nav-max1"><img id="img1"src="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png" /><div id="nav-min1">网站首页</div><div id="nav-min1">产品案例</div><div id="nav-min1">公司介绍</div><div id="nav-min1">联系我们</div><div style="clear:left"></div></div><div id="nav-max2"><div id="nav-min2"><ul><li></li><li></li><li></li><li></li><li></li></ul></div><div id="nav-min3"><img id="img2"src="https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100071377749/FocusFullshop/CkJqZnMvdDEvMjM1MDcwLzgvMTQyOTUvMjcyMDYvNjVkYjkyZmNGYjlmMGYxYjgvOWQ5NTA0NjI5YjVkY2FmMC5wbmcSCTMtdHlfMF81NDACOO6LekIQCgzlsI_nsbPmiYvmnLoQAUITCg_niannvo7ku7fmm7TkvJgQAkIQCgznq4vljbPmiqLotK0QBkIKCgbkvJjpgIkQB1jVluDl9AI/cr/s/q.jpg"alt="显示失败" /><div><span id="box_img2_left">< </span></div><div><span id="box_img2_right">></span></div></div><div id="nav-min2">123</div><div style="clear:left"></div></div><div id="nav-max3">123456</div></div></body>
    </html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/734607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode笔记——二叉树的迭代遍历

中序遍历&#xff1a; 定义一个 保存中间量的栈 和一个 结果数组 1. 模板写法 注释版&#xff1a; 背诵版&#xff1a; 前序遍历 1. 中 右 左 的顺序遍历 2. 模板写法&#xff0c;按中 左 右 的顺序遍历 后序遍历 1. 模板写法&#xff0c;按左 右 中 的顺序遍历 注释版&am…

FreeRTOS操作系统学习——同步互斥与通信

同步&#xff08;Synchronization&#xff09; 同步是一种机制&#xff0c;用于确保多个任务能够按照特定的顺序协调执行或共享数据。当一个任务需要等待其他任务完成某个操作或满足某个条件时&#xff0c;同步机制可以帮助任务进行协调和等待。 在FreeRTOS中&#xff0c;常见…

深入了解 Java 方法和参数的使用方法

Java 方法 简介 方法是一块仅在调用时运行的代码。您可以将数据&#xff08;称为参数&#xff09;传递到方法中。方法用于执行特定的操作&#xff0c;它们也被称为函数。 使用方法的原因 重用代码&#xff1a;定义一次代码&#xff0c;多次使用。提高代码的结构化和可读性。…

Spring官网中查看MongoDB的API文档的详细步骤

目录 Spring官网中查看MongoDB的API文档的详细步骤1、进入 Spring 官网2、选择 Mongodb的文档介绍3、点击API文档4、进入文档查询页面 Spring官网中查看MongoDB的API文档的详细步骤 1、进入 Spring 官网 首先进入Spring的官网&#xff0c;然后点击【Spring Data】 2、选择 Mon…

Java二叉树 (2)

&#x1f435;本篇文章将对二叉树的一些基础操作进行梳理和讲解 一、操作简述 int size(Node root); // 获取树中节点的个数int getLeafNodeCount(Node root); // 获取叶子节点的个数int getKLevelNodeCount(Node root,int k); // 获取第K层节点的个数int getHeight(Node r…

hadoop 总结

1.hadoop 配置文件 core-site hdfs-site yarn-site.xml worker hdfs-site.xml <?xml version"1.0" encoding"UTF-8"?> <?xml-stylesheet type"text/xsl" href"configuration.xsl"?> <configuration><pr…

P1958 上学路线

难度&#xff1a;普及- 题目描述 你所在城市的街道好像一个棋盘&#xff0c;有 a 条南北方向的街道和 b 条东西方向的街道。南北方向的 a 条街道从西到东依次编号为 1 到 a&#xff0c;而东西方向的 b 条街道从南到北依次编号为 1 到 b&#xff0c;南北方向的街道 i 和东西方…

Java中常用的函数式接口

Java中常用的函数式接口 在Java中&#xff0c;函数式接口&#xff08;Functional Interface&#xff09;是一种只有一个抽象方法的接口。Java 8引入了函数式接口和Lambda表达式&#xff0c;使得编写简洁、易读的代码成为可能。Java中常用的函数式接口包括&#xff1a; Runnab…

单数码管(arduino)

1.连接方法 挨个点亮每个灯 #include <Arduino.h>int pin_list[] {4, 5, 19, 21, 22, 2, 15, 18}; int num_pins sizeof(pin_list) / sizeof(pin_list[0]); // 计算数组中的元素数量void setup() {// 设置每个引脚为输出for(int i 0; i < num_pins; i) {pinMode(p…

C语言:ctype和string库中的部分常用函数的应用和实现

在编程过程中&#xff0c;我们经常要处理字符和字符串&#xff0c;C语言标准库中就提供了一系列的库函数&#xff0c;便于我们操作库函数。 字符分类函数 C语⾔中有⼀系列的函数是专⻔做字符分类的&#xff0c;也就是⼀个字符是属于什么类型的字符的。这些函数的使⽤都需要包含…

Springboot 集成kafka 消费者实现ssl方式连接监听消息实现消费

证书准备&#xff1a;springboot集成kafka 消费者实现 如何配置是ssl方式连接的时候需要进行证书的转换。原始的证书是pem, 或者csr方式 和key方式的时候需要转换&#xff0c;因为kafka里面是jks 需要通过openssl进行转换。 证书处理&#xff1a; KeyStore 用于存储客户端的证…

分类预测 | Matlab基于TTAO-CNN-LSTM-Attention三角拓扑聚合优化算法优化卷积神经网络-长短期记忆网络-注意力机制的数据分类预测

分类预测 | Matlab基于TTAO-CNN-LSTM-Attention三角拓扑聚合优化算法优化卷积神经网络-长短期记忆网络-注意力机制的数据分类预测 目录 分类预测 | Matlab基于TTAO-CNN-LSTM-Attention三角拓扑聚合优化算法优化卷积神经网络-长短期记忆网络-注意力机制的数据分类预测分类效果基…

ABC344 A-E题解

文章目录 A题目AC Code&#xff1a; B题目AC Code&#xff1a; C题目AC Code&#xff1a; D题目AC Code&#xff1a; E题目AC Code&#xff1a; 不易不难&#xff0c;写到5题很简单&#xff0c;但是要有足够的思维能力。 A 题目 我们用一个 flag 变量记录我们是不是在两个竖…

python根据文件路径获取文件名

如果你想要获取文件路径中的文件名但不包括后缀名&#xff0c;你可以使用os.path.splitext()函数来分割文件名和后缀名&#xff0c;然后只取第一个部分。下面是一个例子&#xff1a; import os# 假设你有一个文件路径 file_path "/path/to/your/file.txt"# 使用os.…

人工智能、深度学习、机器学习书目推荐

AI入门书籍 人工智能基础 《Python神经网络编程》[英]塔里克拉希德(TariqRashid)中国工信部出版社入门强推&#xff0c;非常清晰的描述基于神经网络的人工智能基本原理&#xff0c;入门必看书目《统计学习方法》李航清华大学出版社人工智能必备数学基础&#xff0c;需要一定的…

【MacOS 上安装 Homebrew 】讲解

macOS 安装 Homebrew macOS 上安装 Homebrew 是一个相对简单的过程&#xff0c;Homebrew 是一款开源的软件包管理工具&#xff0c;它可以让你在 Mac 上轻松安装、更新和管理软件包。以下是安装 Homebrew 的步骤&#xff1a; 1. 打开终端&#xff1a; 你可以通过在 Finder 中…

CCF-CSP真题201403-2《窗口》(结构体+数组)

问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域。窗口的边界上的点也属于该窗口。窗口之间有层次的区别,在多于一个窗口重叠的区域里,只会显示位于顶层的窗口里的内容。   当你点击屏幕上一个点的时候,你就选择了处于被点击位置的…

前端发展史与优秀编程语言

前端开发是互联网技术领域中的一个重要分支&#xff0c;负责构建用户直接交互的网页和应用程序界面。随着互联网的发展&#xff0c;前端技术经历了多个阶段的演变&#xff0c;从最初的简单静态页面到如今的复杂交互式应用&#xff0c;不断推动着用户体验的提升和网页功能的丰富…

Vue3 重置覆盖 reactive 数组数据的方法

核心要点&#xff1a; 通过splice删除原数组内的所有数据&#xff0c;并添加新的数据进去。潜在影响&#xff1a;大数据量下&#xff0c;splice重置数组和 ref 的.value重新赋值重置数组&#xff0c;哪个耗时短还需自行测试。 通过 splice 传入0 和 Infinity 来删除原数组从头…

【Python】进阶学习:OpenCV--一文详解cv2.namedWindow()

【Python】进阶学习&#xff1a;OpenCV–一文详解cv2.namedWindow() &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望…