在线阅读网站开发教程/疫情防控数据

在线阅读网站开发教程,疫情防控数据,广东省住房和城乡建设局网站首页,可以找人帮忙做设计的网站一、块元素(Block Elements) 1.定义与特点 独占一行:默认情况下,块元素会从新的一行开始,并且其后的元素也会被推到下一行。可设置宽高:可以自由设置宽度(width)和高度&#xff08…

一、块元素(Block Elements)

1.定义与特点

  1. 独占一行:默认情况下,块元素会从新的一行开始,并且其后的元素也会被推到下一行。
  2. 可设置宽高:可以自由设置宽度(width)和高度(height),并控制内外边距(marginpadding)。
  3. 默认宽度:宽度默认为父容器的100%(即占满父容器的宽度)。
  4. 内容包容性:可以包含其他块元素或行内元素。
  5. 常见块元素

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <nav>, <article>, <section>等。

2.示例代码

<div style="width: 200px; background: lightblue;">这是一个块元素(div)</div>
<p style="background: lightgreen;">段落(p)也是块元素</p>

效果:两个元素分别独占一行,且div的宽度为200px,p默认宽度为父容器100%。

3.块元素的默认行为

宽度:默认占父容器的 100%(即父容器的宽度)。

高度:默认由内容撑开(即内容的高度决定,不会自动占满父容器的高度)。

4.. 示例 1:有父容器的情况

HTML 结构

<div class="parent"><div class="child">这是一个块元素(div)</div>
</div>

CSS 样式

    .parent {width: 50%;/* 父容器宽度为父级的50%(假设父级是body) */background: lightblue;height: 200px;/* 父容器高度固定为200px */border: 3px solid black;}.child {/* 默认宽度:父容器的100%(即50%的body宽度) *//* 默认高度:由内容决定(文字高度) */background: lightgreen;border: 3px dashed red;}

运行结果:

效果说明

  • 宽度.child 的宽度占父容器 .parent 的 100%(即 50% 的 body 宽度)。
  • 高度.child 的高度仅由内容(文字)决定,不会自动占满父容器的 200px 高度。
  • 父容器高度:父容器 .parent 的高度是固定的 200px,子元素不会撑开它。

5. 示例 2:无父容器的情况

HTML 结构

<div class="child-no-parent">这是一个块元素(div)</div>

CSS 样式

.child-no-parent {/* 默认宽度:占浏览器视口的100%(因为父容器是body/html) *//* 默认高度:由内容决定(文字高度) */background: lightgreen;border: 1px dashed red;margin: 0 auto; /* 居中演示 */
}

效果说明

  • 宽度.child-no-parent 的宽度占浏览器视口的 100%(因为父容器是 <body> 或 <html>)。
  • 高度:高度仅由内容(文字)决定,不会自动撑满整个浏览器高度。
  • 父容器影响:此时父容器是 <body>,如果 <body> 的高度未设置,子元素的高度也不会撑开整个页面的高度。

6. 关键点总结

场景宽度高度
有父容器父容器的 100%由内容决定,不自动撑满父容器高度
无父容器(直接 body)浏览器视口的 100%由内容决定,不自动撑满页面高度

7.示例代码2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 设置 html 和 body 的高度为 100% */html,body {height: 100%;margin: 0;background-color: rgb(30, 210, 135);}/* 父容器设置高度为 100px */.parent {height: 100px;background-color: lightblue;}/* 子块元素高度占满父容器 */.child {height: 50%;background-color: lightcoral;}</style>
</head><body><div class="parent"><div class="child">这个子元素的高度占满了父容器。</div></div>
</body></html>

二、行内元素(Inline Elements)

1.定义与特点

  1. 水平排列:多个行内元素会水平排列在同一行,直到行内空间用完才会换行。
  2. 无法设置宽高:直接设置widthheight无效,元素宽度由内容决定。
  3. 垂直对齐问题:行内元素默认以基线(baseline)对齐,可能导致布局不整齐。
  4. 只能容纳文本或行内元素:不能包含块元素。
  5. 常见行内元素

<span>, <a>, <strong>, <em>, <i>, <b>, <img>(特殊,实为行内块),<input>(特殊,实为行内块)等。

2.示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style></style>
</head><body><p>这是一个段落,里面包含行内元素:<span style="color: red;">红色文本(span)</span><a href="#" style="color: blue;">蓝色链接(a)</a></p>
</body></html>

效果:span和a在同一行显示,且无法设置宽高。

三、行内块元素(Inline-Block Elements)

1.定义与特点

行内块元素兼具块元素和行内元素的特点:

  1. 水平排列:与行内元素或行内块元素在同一行显示。
  2. 可设置宽高:可以自由设置widthheightmarginpadding
  3. 默认宽度由内容决定:宽度和高度默认由内容撑开,但可以手动调整。
  4. 常见行内块元素

<img>, <input>, <button>, <textarea>, <select>等。

2.示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style></style>
</head><body><img src="image.jpg" style="width: 100px; height: 100px; display: inline-block;"><button style="width: 120px; height: 40px; display: inline-block;">按钮</button>
</body></html>

效果:图片和按钮水平排列,且可以设置宽高。

四、三者的核心区别对比

特性块元素(Block)行内元素(Inline)行内块元素(Inline-Block)
是否独占一行
能否设置宽高否(无效)
默认宽度父容器100%内容宽度内容宽度
内容包容性可包含块元素和行内元素仅能包含文本或行内元素可包含其他元素(取决于具体标签)
常见标签<div><p><h1><span><a><em><img><input><button>

五、关键注意事项

  1. 元素嵌套规则

    • 块元素可以包含块元素或行内元素。
    • 行内元素只能包含文本或行内元素(如<p>中不能直接放<div>)。
    • 特殊情况:<a>标签在HTML5中允许包含块元素,但需谨慎使用。
  2. 行内元素的空白间隙

    • 行内元素或行内块元素(如<img>)之间默认会因HTML中的换行或空格产生微小间隙,可通过以下方式解决:
      • 使用font-size: 0在父元素上消除空白。
      • 将HTML标签写在一行上,避免换行。
      • 使用vertical-align: top调整对齐方式。
  3. display属性转换

    • display: block:将元素转为块元素。
    • display: inline:将元素转为行内元素。
    • display: inline-block:将元素转为行内块元素(常用技巧)。
    • display: none:隐藏元素(不占用空间)。

六、应用场景

  1. 块元素:用于布局容器(如导航栏、侧边栏、文章区块)。
  2. 行内元素:用于文本样式控制(如高亮、链接、强调)。
  3. 行内块元素:用于需要同时水平排列和设置宽高的场景(如按钮组、图片网格)。

七、常见问题解答

  1. 为什么行内元素的margin-topmargin-bottom无效?

    • 行内元素的高度由内容决定,垂直方向的外边距会被忽略,但水平方向的margin-leftmargin-right有效。
  2. 如何让行内元素垂直居中?

    • 使用vertical-align: middle(需与其他行内元素配合)或转换为块元素后用margin: auto
  3. 如何让块元素水平居中?

    • 设置margin: 0 auto(需指定宽度)。

总结

  • 块元素:独占一行,适合布局容器。
  • 行内元素:水平排列,适合文本和链接。
  • 行内块元素:结合两者优势,适合需要灵活布局的场景(如按钮、图片排列)。

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

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

相关文章

Word 小黑第22套

对应大猫23 续编号&#xff08;编号断了&#xff0c;从一开始&#xff09;&#xff1a;点编号&#xff0c;再设置编号值 插入以图标方式显示的文档&#xff1a;插入 -对象 -由文件创建 &#xff08;这里要链接到文件也要勾选 不然扣一分&#xff09; 一个页面设为横向不影响上…

平面波扬声器 VS球面波扬声器的原理与优缺点对比

一、核心定义与原理 1、平面波扬声器 1.1、平面波扬声器的定义‌&#xff1a;通过“相控阵”技术控制声波相位&#xff0c;使声波以平行线&#xff08;面&#xff09;定向传播的扬声器&#xff0c;声波近似平面振动&#xff0c;能量集中且衰减缓慢‌。 1.2、平面波扬声器的原…

设计模式之命令设计模式

命令设计模式&#xff08;Command Pattern&#xff09; 请求以命令的形式包裹在对象中&#xff0c;并传给调用对象。调用对象寻找可以处理该命令的对象&#xff0c;并把该命令传给相应的对象执行命令&#xff0c;属于行为型模式命令模式是一种特殊的策略模式&#xff0c;体现的…

力扣hot100二刷——二叉树

第二次刷题不在idea写代码&#xff0c;而是直接在leetcode网站上写&#xff0c;“逼”自己掌握常用的函数。 标志掌握程度解释办法⭐Fully 完全掌握看到题目就有思路&#xff0c;编程也很流利⭐⭐Basically 基本掌握需要稍作思考&#xff0c;或者看到提示方法后能解答⭐⭐⭐Sl…

从“自习室令牌”到线程同步:探秘锁与条件变量

目录 互斥 为什么需要锁 锁的原理--互斥 锁的使用 同步 锁的问题 条件变量 互斥 为什么需要锁 先看结果&#xff1a; 以下代码是我模拟创建线程抢票&#xff0c;由于不加锁导致票抢到了负数 main.cc: #include<vector> #include<iostream> #include"…

字符串哈希从入门到精通

一、基本概念 字符串哈希是将任意长度的字符串映射为固定长度的哈希值&#xff08;通常为整数&#xff09;的技术&#xff0c;核心目标是实现O(1)时间的子串快速比较和高效查询。其本质是通过数学运算将字符串转换为唯一性较高的数值&#xff0c;例如&#xff1a; ​​​​​​…

什么是数学建模?数学建模是将实际问题转化为数学问题

数学建模是将实际问题转化为数学问题&#xff0c;并通过数学工具进行分析、求解和验证的过程。 一、数学建模的基本流程 问题分析 • 明确目标&#xff1a;确定需要解决的核心问题。 • 简化现实&#xff1a;识别关键变量、忽略次要因素。 • 定义输入和输出&#xff1a;明确模…

搭建主从服务器

任务需求 客户端通过访问 www.nihao.com 后&#xff0c;能够通过 dns 域名解析&#xff0c;访问到 nginx 服务中由 nfs 共享的首页文件&#xff0c;内容为&#xff1a;Very good, you have successfully set up the system. 各个主机能够实现时间同步&#xff0c;并且都开启防…

AlexNet 有哪些首创?

现在大家每逢讨论人工智能&#xff0c;都离不开深度学习&#xff0c;这轮深度学习的热潮&#xff0c;追根溯源可以到2012年 AlexNet 的横空出世。后来&#xff0c;大家开始发现深度学习越来越强的能力。 AlexNet 的首创贡献 AlexNet&#xff08;2012年&#xff09;作为现代深…

【Linux我做主】基础命令完全指南上篇

Linux基础命令完全指南【上篇】 Linux基础命令完全指南github地址前言命令行操作的引入Linux文件系统树形结构的根文件系统绝对路径和相对路径适用场景Linux目录下的隐藏文件 基本指令目录和文件相关1. ls2. cd和pwdcdpwd 3. touch4. mkdir5. cp6. mv移动目录时覆盖写入的两种特…

OceanBase 用户问题精选答疑:OceanBase 版本升级解析

背景 此篇博客的源自于OceanBase社区论坛内一位名为皇甫侯的热心用户所提的建议&#xff0c;希望向OceanBase的用户介绍OceanBase的版本升级路径。本文以一个版本升级为示例&#xff0c;汇总了对用户而言比较重要的版本升级要点&#xff0c;期望通过这份分享&#xff0c;能让读…

Docker Desktop 安装与使用详解

目录 1. 前言2. Docker Desktop 安装2.1 下载及安装2.2 登录 Docker 账号2.3 进入 Docker Desktop 主界面 3. Docker 版本查看与环境检查3.1 查看 Docker Desktop 支持的 Docker 和 Kubernetes 版本3.2 检查 Docker 版本 4. Docker Hub 和常用镜像管理方式4.1 使用 Docker Hub4…

推理大模型的后训练增强技术-Reasoning模型也进化到2.0了,这次居然学会用工具了

论文题目&#xff1a;START: Self-taught Reasoner with Tools 论文链接&#xff1a;https://arxiv.org/pdf/2503.04625 论文简介 Reasoning模型也进化到2.0了&#xff0c;这次居然学会用工具了&#xff01;✨ 最近有个叫START的方法&#xff0c;让大模型也能学着用工具&#…

基于llama.cpp的QwQ32B模型推理

基于llama.cpp的QwQ32B模型推理 llama.cpp项目主页&#xff1a; https://github.com/ggml-org/llama.cpp# llama.cpp源码下载 cd /root/lanyun-tmpgit clone https://github.com/ggml-org/llama.cpp#llama.cpp编译 llama.cpp是个C语言项目&#xff0c;实际调用过程需要先构建项…

如何使用Spring AI提示词模板PromptTemplate?

如何使用Spring AI提示词模板PromptTemplate 目录 如何使用Spring AI提示词模板PromptTemplate 1、提示词Prompt介绍 2、Spring Boot集成Spring AI框架 3、提示词模板PromptTemplate用法 4、开发代码使用PromptTemplate 5、启动Springboot工程并验证 本文章节介绍Prompt…

Windows Server中的NTP服务器部署(NTP Srver Deployment in Windows Server)

构建稳定内网时间同步&#xff1a;Windows Server中的NTP服务器部署指南 服务简介 NTP&#xff08;Network Time Protocol&#xff09;服务器是用于同步计算机网络中各设备时间的服务器。它通过网络协议与标准时间源&#xff08;如原子钟、GPS系统等&#xff09;进行时间同步&…

【 <二> 丹方改良:Spring 时代的 JavaWeb】之 Spring Boot 的自动配置:约定优于配置的设计美学

<前文回顾> 点击此处查看 合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、Spring…

SourceTree的安装与使用

SourceTree的安装与使用 一、前言 作为可视化Git管理工具&#xff0c;SourceTree可以避免我们使用命令进行常规的代码拉取&#xff0c;更新&#xff0c;合并等操作。 鼠标点点就可以完成代码管理的工作。所以强烈推荐可视化的工具。不过SourceTree还是有点bug&#xff0c;比…

JMeter 性能测试

Jmeter 用户手册 名词解释&#xff1a; RPS&#xff1a;每秒请求数-每秒向服务器发送多少请求数&#xff08;一个场景&#xff0c;系统面临多大的压力&#xff09; TPS&#xff1a;每秒事务数-每秒能够处理多少请求/事务数性能评价标准&#xff08;其中的一个核心指标&#x…

【Mac 从 0 到 1 保姆级配置教程 09】09. 快速配置终端复用工具 tmux 和 oh-my-tmux

文章目录 1. 前言2. 安装 tmux3. 配置 tmux4. 安装 oh-my-tmux5. 最后6. 参考资料7. 系列教程 Mac 从 0 到 1 保姆级配置教程目录&#xff0c;点击即可跳转对应文章&#xff1a; 【Mac 从 0 到 1 保姆级配置教程 00】 - 教程说明 【Mac 从 0 到 1 保姆级配置教程 01】 - 安装无…