前端知识速记--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 结合了 block 和 inline 的特点,元素在同一行内显示,但可以设置宽高,这意味着可以在一行中排列多个 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篇:display 一、什么是 display 属性? display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式,还对元素的布局、结构以及与其他元素之间的关系产生重要影响。 二、常用 display 属性值 1. block …...
51单片机 01 LED
一、点亮一个LED 在STC-ISP中单片机型号选择 STC89C52RC/LE52RC;如果没有找到hex文件(在objects文件夹下),在keil中options for target-output- 勾选 create hex file。 如果要修改编程 :重新编译-下载/编程-单片机重…...
WPF进阶 | WPF 动画特效揭秘:实现炫酷的界面交互效果
WPF进阶 | WPF 动画特效揭秘:实现炫酷的界面交互效果 前言一、WPF 动画基础概念1.1 什么是 WPF 动画1.2 动画的基本类型1.3 动画的核心元素 二、线性动画详解2.1 DoubleAnimation 的使用2.2 ColorAnimation 实现颜色渐变 三、关键帧动画深入3.1 DoubleAnimationUsin…...
分页按钮功能
前言 在前端开发中,分页功能是一个常见的需求,特别是当需要展示大量数据时,它能有效提升用户体验。该文章结合运用了HTML,CSS,JS实现网页的分页按钮功能,并且可以选择每页显示的条数试试更新总页数及显示当…...
数据分析系列--⑦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 结果汇总 …...
集合通讯概览
集合通信概览 (1)通信的算法 是根据通讯的链路组成的 (2)因为通信链路 跟硬件强相关,所以每个CCL的库都不一样 芯片与芯片、不同U之间是怎么通信的 多卡训练:多维并行(xxx并行在上一期已经讲述…...
【FreeRTOS 教程 八】直达任务通知
目录 一、FreeRTOS 直达任务通知: (1)直达任务通知基本介绍: (2)更新目标通知的值: (3)性能优势和使用限制: 二、直达任务通知 API: &#…...
Ubuntu 18.04安装Emacs 26.2问题解决
个人博客地址: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 项目的目录结构:js-mdict 项目教程 js-mdict 下载地址: js-mdict-master.zip 先解压到 D:\Source\ js-mdict 6.0.2 用了 ts (TypeScript) 和 Jest,增加了应用开发的难度,因为先要了解 ts 和 Jest。 参阅:测试与开发&a…...
CSS关系选择器详解
CSS关系选择器详解 学习前提什么是关系选择器?后代选择器(Descendant Combinator)语法示例注意事项 子代选择器(Child Combinator)语法示例注意事项 邻接兄弟选择器(Adjacent Sibling Combinator࿰…...
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: 抱歉&…...
蓝桥杯备考:高精度算法之除法
我们除法的高精度其实也不完全是高精度,而是一个高精度作被除数除以一个低精度 模拟我们的小学除法 由于题目中我们的除数最大是1e9,当它真正是1e9的时候,t是有可能超过1e9的,所以要用long long...
笔试-业务逻辑4
应用 小明在玩一个数字加减游戏,输入4个正整数:s、t、a、b,其中s>1,b<105,a!b。只使用加法或者减法,使得st。 每回合,小明用当前的数字,加上或减去一个数字;目前有…...
《Linux服务与安全管理》| 数据库服务器安装和配置
《Linux服务与安全管理》| 数据库服务器安装和配置 目录 《Linux服务与安全管理》| 数据库服务器安装和配置 任务一: 安装PostgreSQL数据库,设置远程登录,客户端可以成功登录并操作数据库。 任务二: 安装MySQL数据库…...
麦芯 (MachCore) 应用开发教程 6:一台设备中多台电脑主从机的设置
麦芯是构建在windows系统上的设备应用操作系统,利用该系统可以快速高效的开发一款设备专用软件。希望进一步了解请email: acloud163.com 黄国强 2025/02/03 在麦芯(MachCore)应用开发过程中,多机协同工作的场景十分常见…...
RAG 与历史信息相结合
初始化模型 # Step 4. 初始化模型, 该行初始化与 智谱 的 GLM - 4 模型进行连接,将其设置为处理和生成响应。 chat ChatZhipuAI(model"glm-4",temperature0.8, ) 此提示告诉模型接收聊天历史记录和用户的最新问题,然后重新表述问题&#x…...
99,[7] buuctf web [羊城杯2020]easyphp
进入靶场 <?php// 使用 scandir 函数扫描当前目录(即脚本所在目录)下的所有文件和文件夹// 该函数会返回一个包含目录下所有文件和文件夹名称的数组$files scandir(./); // 遍历扫描得到的文件和文件夹名称数组foreach($files as $file) {// 使用 …...
BUUCTF_[安洵杯 2019]easy_web(preg_match绕过/MD5强碰撞绕过/代码审计)
打开靶场,出现下面的静态html页面,也没有找到什么有价值的信息。 查看页面源代码 在url里发现了img传参还有cmd 求img参数 这里先从img传参入手,这里我发现img传参好像是base64的样子 进行解码,解码之后还像是base64的样子再次进…...
Vue05
目录 一、学习目标 1.自定义指令 2.插槽 3.综合案例:商品列表 4.路由入门 二、自定义指令 1.指令介绍 2.自定义指令 3.自定义指令的语法 三、自定义指令-指令的值 1.需求 2.语法 3.代码示例 五、插槽-默认插槽 1.作用 2.需求 4.使用插槽的基本语法…...
ubuntu18.04环境下,Zotero 中pdf translate划线后不翻译问题解决
问题: 如果使用fastgithub,在/etc/profile中设置全局代理,系统重启后会产生划线后不翻译的问题,包括所有翻译代理均不行。终端中取消fastgithub代理,也不行。 解决: 1)不在/etc/profile中设置…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
