HTML---网页布局

目录

文章目录

一.常见的网页布局

二.标准文档流 

 标准文档流常见标签

 三.display属性

四.float属性

总结


一.常见网页布局

二.标准文档流 

 标准文档流常见标签

标准文档流的组成
块级元素<div>、<p>、<h1>-<h6>、<ul>、<ol>等
内联元素<span>、<a>、<strong>、<em>、<img>等

 三.display属性

 在HTML中,display属性用于指定元素的展示方式。该属性可以接受以下几种值:

案例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border: 1px seagreen solid;width: 100px; height: 100px;}span{border: 1px red solid;}</style></head><body><div>我是元素</div><span>我是Span元素</Span></body>
</html>

 

  • none属性

设置的元素不会被显示。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: none;}

 

  •  inline

元素被视为内联元素,并在同一行内显示。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline;}

 

  •  inline-block

该元素被视为内联块级元素同时具有块元素和行元素的属性。即可设置宽度也可并行排列。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline-block;}

  •  总结--display特性

 实现块级元素与行级元素的转变,控制块级元素排到一行,控制元素的显示和隐藏。

四.float属性

 


总结

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

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

相关文章

国内chatGPT3.5升级到chatGPT4.0的教程

1、准备一个3.5的账号 2、准备一个美元虚拟信用卡 这里默认您是有账号的 1、注册办理卡 2、按图片步骤就可以开卡成功 3、卡片cvc在卡中心cvc安全码里面 4、登录ChatGPT 第三步:升级 Plus 完成了上面步骤 小白朋友连账号都么有的&#xff0c;可以使用谷歌邮箱直接在open…

房顶漏水啦【算法赛】

问题描述 小蓝家的房顶是一个边长为 n 的正方形&#xff0c;可以看成是由 nn 个边长为 1 的小正方形格子组成。 从上到下第 i 行、从左到右第 j 列的格子用 (i,j) 表示。 小蓝的家由于年久失修&#xff0c;导致房顶有一些地方漏水。总共有 m 处漏水的地方&#xff0c;我们用…

K8s攻击案例:Privileged特权容器导致节点沦陷

01、概述 特权容器&#xff08;Privileged Container&#xff09;是一种比较特殊的容器&#xff0c;在K8s中运行特权容器&#xff0c;需要将 Privileged 设为 true &#xff0c;容器可以执行几乎所有可以直接在主机上执行的操作。 基于此&#xff0c;利用容器的特权配置可以获取…

Vue 实现响应式布局

实现响应式布局是工作中必不可少 客户需要 若是使用vue element ui 的方式实现 浏览器宽度为760的情况 浏览器宽度为360的情况 手机上的显示的情况 一、对于屏幕尺寸的定义 element UI参照Bootstrap的解决方案提供了五种屏幕大小尺寸&#xff1a;xs、sm、md、lg 和 xl。并对…

Vue+ElementUI+nodejs学生宿舍报修管理系统68ozj

本站是一个B/S模式系统&#xff0c;采用vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得学生宿舍信息管理系统管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中…

实用干货:公司规定所有接口都用 POST请求,为什么?

大家好&#xff0c;我是大澈&#xff01; 本文约1000字&#xff0c;整篇阅读大约需要2分钟。 感谢关注微信公众号&#xff1a;“程序员大澈”&#xff0c;免费领取"面试礼包"一份&#xff0c;然后免费加入问答群&#xff0c;从此让解决问题的你不再孤单&#xff01…

在k8s中使用Helm安装harbor并将Chart推送到私有仓库harbor

使用Helm安装harbor并将Chart推送到私有仓库harbor 注意&#xff1a;如果你的harbor是之前docker-compose安装的&#xff0c;还需要额外做一个动作&#xff0c;让它支持chart docker-compose stop ./install.sh --with-chartmuseum1&#xff09;下载harbor的chart包 Harbor的…

「数据结构」二叉树2

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;初阶数据结构 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 文章目录 &#x1f349;前言&#x1f349;链式结构&#x1f349;遍历二叉树&#x1f34c;前序遍历&#x1f34c;中序遍历&#x…

MySQL升级版本(Linux环境)

摘要 由于我们在做部署的时候会部署MySQL&#xff0c;但是版本可能各种各样&#xff0c;而且我们服务器会定期的进行漏洞扫描&#xff0c;因此我们在遇到MySQL的相关漏洞时&#xff0c;一般漏洞报告中会提示出解决方案&#xff0c;一般来时就是升级软件的版本&#xff0c;因此…

C# WPF上位机开发(从demo编写到项目开发)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 C# WPF编程&#xff0c;特别是控件部分&#xff0c;其实学起来特别快。只是后面多了多线程、锁、数据库、网络这部分稍微复杂一点&#xff0c;不过…

CAD制图

CAD制图 二维到三维 文章目录 CAD制图前言一、CAD制图二、机械设计三、二维图纸四、三维图纸总结前言 CAD制图可以提高设计效率和准确性,并方便文档的存档和交流,是现代工程设计中不可或缺的一部分。 一、CAD制图 CAD(Computer-Aided Design)是利用计算机技术辅助进行设计…

欠采样对二维相位展开的影响

1.前言 如前所述&#xff0c;相位展开器通过计算两个连续样本之间的差来检测图像中包裹的存在。如果这个差值大于π或小于-π&#xff0c;则相位展开器认为在这个位置存在包裹。这可能是真正的相位包络&#xff0c;也可能是由噪声或采样不足引起的伪包络。 对欠采样的相位图像…

【自营版】物流系统+取件员收件员/运营级快递系统小程序源码

后端php前端原生小程序 mysql数据库 主要功能&#xff1a; 寄快递 查快递 多门店 市内取送 取件员中心在线接单 提前预约 也可 立即下单 门店入住 取件员入住

交叉熵损失(Cross-Entropy loss)

在处理机器学习或深度学习问题时&#xff0c;损失/成本函数用于在训练期间优化模型。目标几乎总是最小化损失函数。损失越低&#xff0c;模型越好。交叉熵损失是最重要的成本函数。它用于优化分类。对交叉熵的理解取决于对 Softmax 激活函数的理解。 一、softmax激活函数 激活…

屏幕颜色吸取器

前言 屏幕颜色吸取器。 前端工程师的福音&#xff0c;获取全屏幕上所有位置的颜色。 运行在window上的软件 屏幕颜色吸取器 前言1 下载解压2 使用 1 下载解压 下载地址&#xff1a;https://download.csdn.net/download/qq_44850489/11943229 下载下来之后解压 如下图&#…

python算法例23 落单的数Ⅰ

1. 问题描述 给出2n1个非负整数元素的数组&#xff0c;除其中一个数字之外&#xff0c;其他每个数字均出现两次&#xff0c;找到这个数字。 2. 问题示例 给出[1&#xff0c;2&#xff0c;2&#xff0c;1&#xff0c;3&#xff0c;4&#xff0c;3]&#xff0c;返回4。 3. 代…

使用函数式接口对代码简化,完成代码重复性使用

&#x1f4da;目录 &#x1f4da;简介&#x1f4a8;优化前原代码:⚙️ 函数编程简化&#x1f384; JDK自带的函数式接口✨ 改造调用方式&#x1f38a; 时间范围执行&#x1f389;时间范围每天执行 &#x1f4da;简介 因为公司的使用Xxl-Job作为任务调度平台,其中我们大部分的报…

camera同步信号

基本概念 PCLK&#xff1a;pixel clock是像素点同步时钟信号, 主频。也就是每个PCLK对应一个像素点。 HSYNC&#xff1a;horizonal synchronization是行同步信号&#xff0c;水平同步信号。就是在告诉接收端&#xff1a;“HSYNC”有效时段内接收端接收到的所有的信号输出属同…

系列二十八、如何在Oracle官网下载JDK的api文档

一、官网下载JDK的api文档 1.1、官网地址 https://www.oracle.com/java/technologies/javase-jdk21-doc-downloads.html 1.2、我分享的api.chm 链接&#xff1a;https://pan.baidu.com/s/1Bf55Fz-eMTErmQDtZZcewQ?pwdyyds 提取码&#xff1a;yyds 1.3、参考 https://ww…

C语言——高精度除法

一、引子 1、引言 高精度除法相较于加减乘法更加复杂&#xff0c;它需要处理的因素更多&#xff0c;在这里我们先探讨高精度数除以低精度数&#xff0c;即大数除小数。这已满足日常所需&#xff0c;如需大数除以大数&#xff0c;可以使用专门的库&#xff0c;例如&#xff1a…