编程笔记 html5cssjs 044 CSS显示

编程笔记 html5&css&js 044 CSS显示

  • 一、display 属性
  • 二、块级元素(block element)
  • 三、行内元素(inline element)
  • 四、disply属性设置
    • (一)Display: none;
    • (二)覆盖默认的 Display 值
    • (三)隐藏元素 - display:none 还是 visibility:hidden?
  • 五、disply属性的值
    • 六、练习
  • 小结

CSS 布局 - display 属性。display 属性是用于控制布局的最重要的 CSS 属性。

一、display 属性

display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

二、块级元素(block element)

块级元素总是从新行开始,并占据可用的全部宽度(尽可能向左和向右伸展)。
这个 <div> 元素属于块级元素。
块级元素的一些例子:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

三、行内元素(inline element)

内联元素不从新行开始,仅占用所需的宽度。
这是段落中的行内 <span> 元素。
行内元素的一些例子:

<span>
<a>
<img>

四、disply属性设置

(一)Display: none;

display: none; 通常与 JavaScript 一起使用,以隐藏和显示元素,而无需删除和重新创建它们。如果您想知道如何实现此目标,请查看本页面上的最后一个实例。
默认情况下,<script> 元素使用 display: none;。

(二)覆盖默认的 Display 值

如前所述,每个元素都有一个默认 display 值。但是,您可以覆盖它。
将行内元素更改为块元素,反之亦然,对于使页面以特定方式显示同时仍遵循 Web 标准很有用。
一个常见的例子是为实现水平菜单而生成行内的 <li> 元素:

li {display: inline;
}

设置元素的 display 属性仅会更改元素的显示方式,而不会更改元素的种类。因此,带有 display: block; 的行内元素不允许在其中包含其他块元素。下例将 元素显示为块元素:

span {display: block;
}

下例将 <a> 元素显示为块元素:

a {display: block;
}

(三)隐藏元素 - display:none 还是 visibility:hidden?

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏,并且页面将显示为好像该元素不在其中。
visibility:hidden; 也可以隐藏元素。但是,该元素仍将占用与之前相同的空间。元素将被隐藏,但仍会影响布局:

五、disply属性的值

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素,此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block	行内块元素。(CSS2.1 新增的值)
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker	CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table	此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group	此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group	此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row	此元素会作为一个表格行显示(类似 <tr>)。
table-column-group	此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column	此元素会作为一个单元格列显示(类似 <col>)
table-cell	此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption	此元素会作为一个表格标题显示(类似 <caption>)
inherit	规定应该从父元素继承 display 属性的值。

六、练习

<!DOCTYPE html>
<html lang="zh-cn"><title>CSS显示 编程笔记 html5&css&js</title><meta charset="utf-8" /><style>body {display: block;color: cyan;background-color: teal;margin: 0;text-align: center;}.container {margin: 0 auto; /* 将左右边距设置为自动 */text-align: center;}span {display: block;}p {display: inline;}</style><body><br /><div class="container"><span>把 span 元素设置为块级元素。</span><span>这是第二个 span 元素,本来这个元素是不换行的,现改成换行显示。</span></div><hr /><div class="container"><p>把段落元素设置为内联元素。</p><p>这里第二个p元素,但却被显示到一行了。</p></div><br /></body>
</html>

小结

disply属性可以灵活处理块的实际形态,把自动换行的元素可以改为不换行,反之亦然。这对网页的整体而已就很重要,因此设计网页布局时就一定要配合该属性的设置。

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

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

相关文章

C++学习笔记——指针

1&#xff0c;指针的基本概念 指针的作用&#xff1a;可以通过指针间接访问内存 内存的编号是从0开始记录的&#xff0c;一般用十六进制数字表示可以利用指针变量保存地址 上图中的p就是a变量的指针&#xff0c;也可以记作*a 2&#xff0c;指针变量的定义和使用 指针变量定…

Linux操作系统——理解文件系统

预备知识 到目前为止&#xff0c;我们所学习到的关于文件的操作&#xff0c;全部都是基于文件被打开&#xff0c;被访问&#xff0c;访问期间比较重要的有重定向&#xff0c;缓冲区&#xff0c;一切皆文件&#xff0c;当我们访问完毕的时候需要将文件关闭&#xff0c;关闭时那…

3.RHCSA脚本配置及通过node2改密码

运行脚本发现node2不成功 脚本破解 选第二个 Ctrl x 换行 破解成功后做node2的改密码题 回到redhat, 发现检测程序检测密码题成功,得了8分.

DBA技术栈MongoDB: 数据增改删除

该博文主要介绍mongoDB对文档数据的增加、更新、删除操作。 1.插入数据 以下案例演示了插入单个文档、多个文档、指定_id、指定多个索引以及插入大量文档的情况。在实际使用中&#xff0c;根据需求选择适合的插入方式。 案例1&#xff1a;插入单个文档 db.visitor.insert({…

集成显卡和普通显卡的区别?

问题描述&#xff1a;集成显卡和普通显卡的区别&#xff1f; 问题解答&#xff1a; 集成显卡和独立显卡&#xff08;普通显卡&#xff09;是两种不同类型的图形处理单元&#xff0c;它们在计算机系统中负责处理图形和视频输出&#xff0c;但它们有一些关键的区别&#xff1a;…

【蓝桥杯冲冲冲】动态规划初步[USACO2006 OPEN] 县集市

蓝桥杯备赛 | 洛谷做题打卡day13 文章目录 蓝桥杯备赛 | 洛谷做题打卡day13题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示样例说明数据规模与约定 思路&#xff1a;方程&#xff1a; 题解代码我的一些话 [USACO2006 OPEN] 县集市 The County Fair 题目描述 每年…

Threejs实现立体3D园区解决方案及代码

一、实现方案 单独贴代码可能容易混乱&#xff0c;所以这里只讲实现思路&#xff0c;代码放在最后汇总了下。 想要实现一个简单的工业园区、主要包含的内容是一个大楼、左右两片停车位、四条道路以及多个可在道路上随机移动的车辆、遇到停车位时随机选择是否要停车&#xff0…

解决ssh登录Permission denied, please try again

现象截图如下&#xff1a; 确定root的密码是正确的&#xff0c;最后的原因找到了&#xff0c;是远程的服务器&#xff0c;禁用了root账户可以被远程访问的权限。开启操作如下&#xff1a; 1.编辑配置文件 vi /etc/ssh/sshd_config 2.文件中找到PermitRootLogin #PermitRoo…

seaborn可视化示例详解

目录 1、散点图 2、散点图回归线 3、折线图 4、频数柱状图 5、分组散点图 6、箱型图 7、数值分布柱状图 8、频数分布图 9、联合分布图 10、数值分布柱状图 11、相关系数热力图 划重点 少走10年弯路 Seaborn是一个基于Python的数据可视化库&#xff0c;Seaborn提供了许多用…

8-Docker网络命令之ls

1.ls介绍 docker网络命令ls是用来列出当前docker中默认的及自定义的网络 2.ls用法 docker network ls [参数] [root@centos79 ~]# docker network ls --helpUsage: docker network ls [OPTIONS]List networksAliases:docker network ls, docker network listOptions:-f, -…

链表|数据结构|C语言深入学习

什么是链表 离散&#xff0c;就是“分离的、散开的” 链表是什么样子的&#xff1a; 有限个节点离散分配 彼此间通过指针相连 除了首尾节点&#xff0c;每个节点都只有一个前驱节点和一个后继节点 首节点没有前驱结点&#xff0c;尾节点没有后继节点 基本概念术语&#xf…

C 练习实例38

题目&#xff1a;求一个3*3矩阵对角线元素之和 程序分析&#xff1a;利用双重for循环控制输入二维数组&#xff0c;再将a[i][i]累加后输出。 代码&#xff1a; #include <stdio.h> int main() {int a[3][3];int i; //行序列int j; //列序列int k; //对角线序列int cnt…

1.使用分布式文件系统Minio管理文件

分布式文件系统DFS分类 文件系统 文件系统是操作系统用于组织管理存储设备(磁盘)或分区上文件信息的方法和数据结构,负责对文件存储设备空间进行组织和分配,并对存入文件进行保护和检索 文件系统是负责管理和存储文件的系统软件&#xff0c;操作系统通过文件系统提供的接口去…

Docker五部曲之五:通过Docker和GitHub Action搭建个人CICD项目

文章目录 项目介绍Dockerfile解析compose.yml解析Nginx反向代理到容器以及SSL证书设置MySQL的准备工作Spring和环境变量的交互 GitHub Action解析项目测试结语 项目介绍 该项目是一个入门CICD-Demo&#xff0c;它由以下几部分组成&#xff1a; Dockerfile&#xff1a;用于构建…

「 典型安全漏洞系列 」05.XML外部实体注入XXE详解

1. XXE简介 XXE&#xff08;XML external entity injection&#xff0c;XML外部实体注入&#xff09;是一种web安全漏洞&#xff0c;允许攻击者干扰应用程序对XML数据的处理。它通常允许攻击者查看应用程序服务器文件系统上的文件&#xff0c;并与应用程序本身可以访问的任何后…

【ARM 嵌入式 编译系列 3.6 -- 删除lib中的某个文件】

请阅读【嵌入式开发学习必备专栏 之 ARM GCC 编译专栏】 文章目录 删除lib中的某个文件 删除lib中的某个文件 比如&#xff0c;如果要删除 libc.a 静态库中的特定对象文件并重新使用这个静态库&#xff0c;在终端中可以使用 ar 命令。ar 是一个归档工具&#xff0c;它可以创建…

【Unity小技巧】3D人物移动脚步和跳跃下落音效控制

文章目录 单脚步声多脚步声&#xff0c;跳跃落地音效播放不同材质的多脚步声完结 单脚步声 public AudioClip walkingSound; public AudioClip runningSound;//移动音效 public void MoveSound() {// 如果在地面上并且移动长度大于0.9if (isGround && moveDirection.s…

动物免疫(羊驼免疫)-泰克生物

在过去几十年里&#xff0c;抗体研究和应用的领域已经经历了革命性的变化。在这个进程中&#xff0c;一种特殊来源的抗体 —— 来自骆驼科动物&#xff08;包括羊驼&#xff09;的单链抗体&#xff08;也称纳米抗体&#xff09;引起了全球科学家的广泛关注。 羊驼等骆驼科动物…

Java NIO (四)NIO Selector类

1 选择器与注册 选择器是什么&#xff1f;选择器和通道关系是什么&#xff1f; 简单的说&#xff0c;选择器的使用是完成IO的多路复用&#xff0c;其主要工作是通道的注册、监听、事件查询。一个通道代表一条连接通路&#xff0c;通过选择器可以同时监听多个通道的IO(输入输出)…

长拖尾数据的采样方法

以下内容来自于ChatGPT长拖尾数据的采样方式&#xff1a; 对于具有长拖尾&#xff08;长尾&#xff09;分布的数据&#xff0c;通常使用传统的随机抽样方法可能不太适用&#xff0c;因为这样的分布意味着有一些极端值&#xff08;outliers&#xff09;会对整体分布产生较大影响…