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

前端知识速记--CSS篇:display

前端知识速记–CSS篇:display

一、什么是 display 属性?

display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式,还对元素的布局、结构以及与其他元素之间的关系产生重要影响。

二、常用 display 属性值

1. block

block 级元素独占一行,宽度默认占满父容器。常见的 block 元素有 <div><h1><h6><p> 等。其特点是可以设置宽高,并且可以在上、下方添加外边距。

实例:
<div style="display: block; background-color: lightblue;">这是一个块级元素</div>

2. inline

inline 元素不独占一行,它的宽度默认为内容宽度。常见的 inline 元素有 <span><a><strong> 等。与 block 元素不同,inline 元素不能设置宽高,只能在内容上方和下方添加外边距。

实例:
<span style="display: inline; color: red;">这是一个行内元素</span>

3. inline-block

inline-block 结合了 blockinline 的特点,元素在同一行内显示,但可以设置宽高,这意味着可以在一行中排列多个 inline-block 元素,并同时拥有块级元素的特性。

实例:
<div style="display: inline-block; width: 100px; height: 100px; background-color: green;">块状行内元素</div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: yellow;">另一个块状行内元素</div>

4. none

none 值会使元素完全隐藏,不再占据空间。这在需要动态控制元素显示与隐藏时非常有用。

实例:
<div style="display: none;">这个元素不会显示</div>

5. table

table 将元素表现为表格的行行为。这适合需要展现表格数据的场景,能够保持表格的布局特性。

实例:
<div style="display: table;">这是一个表格元素</div>

6. flex

flex 值允许使用弹性盒布局,可以高效地分配空间和对齐子元素,是现代布局的热门选择。

实例:
<div style="display: flex;">这是一个弹性盒布局元素</div>

7. grid

grid 是一种强大的布局系统,允许将元素安排在一个二维网格中。可以为每个元素定义位置,并控制它们在列和行中的大小。grid 布局非常适合复杂的网页布局。

实例:
<div style="display: grid; grid-template-columns: 100px 100px; grid-gap: 10px;"><div style="background-color: lightcoral;">网格单元格 1</div><div style="background-color: lightblue;">网格单元格 2</div><div style="background-color: lightgreen;">网格单元格 3</div><div style="background-color: lightyellow;">网格单元格 4</div>
</div>

8. inherit

inherit 表示继承父元素的 display 属性值。这在需要确保子元素与父元素一致时非常有用。

实例:
<div style="display: block;"><div style="display: inherit;">这个元素继承了父元素的 display 属性</div>
</div>

三、display 属性汇总表

属性作用
block独占一行,宽度默认占满父元素,并且可以设置宽高
inline不独占一行,宽度默认为内容宽度,不可以设置宽高
inline-block行内显示,可设置宽高
none隐藏元素,不占空间
table表现为表格元素
flex提供弹性布局
grid提供网格布局,可以在二维空间中安排元素
inherit继承父元素的 display 属性

相关文章:

前端知识速记--CSS篇:display

前端知识速记–CSS篇&#xff1a;display 一、什么是 display 属性&#xff1f; display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式&#xff0c;还对元素的布局、结构以及与其他元素之间的关系产生重要影响。 二、常用 display 属性值 1. block …...

51单片机 01 LED

一、点亮一个LED 在STC-ISP中单片机型号选择 STC89C52RC/LE52RC&#xff1b;如果没有找到hex文件&#xff08;在objects文件夹下&#xff09;&#xff0c;在keil中options for target-output- 勾选 create hex file。 如果要修改编程 &#xff1a;重新编译-下载/编程-单片机重…...

WPF进阶 | WPF 动画特效揭秘:实现炫酷的界面交互效果

WPF进阶 | WPF 动画特效揭秘&#xff1a;实现炫酷的界面交互效果 前言一、WPF 动画基础概念1.1 什么是 WPF 动画1.2 动画的基本类型1.3 动画的核心元素 二、线性动画详解2.1 DoubleAnimation 的使用2.2 ColorAnimation 实现颜色渐变 三、关键帧动画深入3.1 DoubleAnimationUsin…...

分页按钮功能

前言 在前端开发中&#xff0c;分页功能是一个常见的需求&#xff0c;特别是当需要展示大量数据时&#xff0c;它能有效提升用户体验。该文章结合运用了HTML&#xff0c;CSS&#xff0c;JS实现网页的分页按钮功能&#xff0c;并且可以选择每页显示的条数试试更新总页数及显示当…...

数据分析系列--⑦RapidMiner模型评价(基于泰坦尼克号案例含数据集)

一、前提 二、模型评估 1.改造⑥ 2.Cross Validation算子说明 2.1Cross Validation 的作用 2.1.1 模型评估 2.1.2 减少过拟合 2.1.3 数据利用 2.2 Cross Validation 的工作原理 2.2.1 数据分割 2.2.2 迭代训练与测试 ​​​​​​​ 2.2.3 结果汇总 ​​​​​​​ …...

集合通讯概览

集合通信概览 &#xff08;1&#xff09;通信的算法 是根据通讯的链路组成的 &#xff08;2&#xff09;因为通信链路 跟硬件强相关&#xff0c;所以每个CCL的库都不一样 芯片与芯片、不同U之间是怎么通信的 多卡训练&#xff1a;多维并行&#xff08;xxx并行在上一期已经讲述…...

【FreeRTOS 教程 八】直达任务通知

目录 一、FreeRTOS 直达任务通知&#xff1a; &#xff08;1&#xff09;直达任务通知基本介绍&#xff1a; &#xff08;2&#xff09;更新目标通知的值&#xff1a; &#xff08;3&#xff09;性能优势和使用限制&#xff1a; 二、直达任务通知 API&#xff1a; &#…...

Ubuntu 18.04安装Emacs 26.2问题解决

个人博客地址&#xff1a;Ubuntu 18.04安装Emacs 26.2问题解决 | 一张假钞的真实世界 no X development libraries were found checking for X... no checking for X... true configure: error: You seem to be running X, but no X development libraries were found. You …...

nodejs:js-mdict 的下载、安装、测试、build

js-mdict 项目的目录结构&#xff1a;js-mdict 项目教程 js-mdict 下载地址: js-mdict-master.zip 先解压到 D:\Source\ js-mdict 6.0.2 用了 ts (TypeScript) 和 Jest&#xff0c;增加了应用开发的难度&#xff0c;因为先要了解 ts 和 Jest。 参阅&#xff1a;测试与开发&a…...

CSS关系选择器详解

CSS关系选择器详解 学习前提什么是关系选择器&#xff1f;后代选择器&#xff08;Descendant Combinator&#xff09;语法示例注意事项 子代选择器&#xff08;Child Combinator&#xff09;语法示例注意事项 邻接兄弟选择器&#xff08;Adjacent Sibling Combinator&#xff0…...

Python在线编辑器

from flask import Flask, render_template, request, jsonify import sys from io import StringIO import contextlib import subprocess import importlib import threading import time import ast import reapp Flask(__name__)RESTRICTED_PACKAGES {tkinter: 抱歉&…...

蓝桥杯备考:高精度算法之除法

我们除法的高精度其实也不完全是高精度&#xff0c;而是一个高精度作被除数除以一个低精度 模拟我们的小学除法 由于题目中我们的除数最大是1e9&#xff0c;当它真正是1e9的时候&#xff0c;t是有可能超过1e9的&#xff0c;所以要用long long...

笔试-业务逻辑4

应用 小明在玩一个数字加减游戏&#xff0c;输入4个正整数&#xff1a;s、t、a、b&#xff0c;其中s>1&#xff0c;b<105&#xff0c;a!b。只使用加法或者减法&#xff0c;使得st。 每回合&#xff0c;小明用当前的数字&#xff0c;加上或减去一个数字&#xff1b;目前有…...

《Linux服务与安全管理》| 数据库服务器安装和配置

《Linux服务与安全管理》| 数据库服务器安装和配置 目录 《Linux服务与安全管理》| 数据库服务器安装和配置 任务一&#xff1a; 安装PostgreSQL数据库&#xff0c;设置远程登录&#xff0c;客户端可以成功登录并操作数据库。 任务二&#xff1a; 安装MySQL数据库&#xf…...

麦芯 (MachCore) 应用开发教程 6:一台设备中多台电脑主从机的设置

麦芯是构建在windows系统上的设备应用操作系统&#xff0c;利用该系统可以快速高效的开发一款设备专用软件。希望进一步了解请email: acloud163.com 黄国强 2025/02/03 在麦芯&#xff08;MachCore&#xff09;应用开发过程中&#xff0c;多机协同工作的场景十分常见&#xf…...

RAG 与历史信息相结合

初始化模型 # Step 4. 初始化模型, 该行初始化与 智谱 的 GLM - 4 模型进行连接&#xff0c;将其设置为处理和生成响应。 chat ChatZhipuAI(model"glm-4",temperature0.8, ) 此提示告诉模型接收聊天历史记录和用户的最新问题&#xff0c;然后重新表述问题&#x…...

99,[7] buuctf web [羊城杯2020]easyphp

进入靶场 <?php// 使用 scandir 函数扫描当前目录&#xff08;即脚本所在目录&#xff09;下的所有文件和文件夹// 该函数会返回一个包含目录下所有文件和文件夹名称的数组$files scandir(./); // 遍历扫描得到的文件和文件夹名称数组foreach($files as $file) {// 使用 …...

BUUCTF_[安洵杯 2019]easy_web(preg_match绕过/MD5强碰撞绕过/代码审计)

打开靶场&#xff0c;出现下面的静态html页面&#xff0c;也没有找到什么有价值的信息。 查看页面源代码 在url里发现了img传参还有cmd 求img参数 这里先从img传参入手&#xff0c;这里我发现img传参好像是base64的样子 进行解码&#xff0c;解码之后还像是base64的样子再次进…...

Vue05

目录 一、学习目标 1.自定义指令 2.插槽 3.综合案例&#xff1a;商品列表 4.路由入门 二、自定义指令 1.指令介绍 2.自定义指令 3.自定义指令的语法 三、自定义指令-指令的值 1.需求 2.语法 3.代码示例 五、插槽-默认插槽 1.作用 2.需求 4.使用插槽的基本语法…...

ubuntu18.04环境下,Zotero 中pdf translate划线后不翻译问题解决

问题&#xff1a; 如果使用fastgithub&#xff0c;在/etc/profile中设置全局代理&#xff0c;系统重启后会产生划线后不翻译的问题&#xff0c;包括所有翻译代理均不行。终端中取消fastgithub代理&#xff0c;也不行。 解决&#xff1a; 1&#xff09;不在/etc/profile中设置…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...