【前端CSS3】CSS显示模式(黑马程序员)

news/2024/7/8 7:55:39 标签: 前端, css, css3

文章目录

  • 一、前言🚀🚀🚀
  • 二、CSS元素显示模式:☀️☀️☀️
      • 2.1 什么是元素显示模式
      • 2.2 块元素
      • 2.3 行内元素
      • 2.4 行块元素
      • 2.5 元素显示模式的转换
  • 三、总结🚀🚀🚀


一、前言🚀🚀🚀

在这里插入图片描述

☀️
回报不在行动之后,回报在行动之中。


这个系列可以叫作《前端从零开始系列》,因为我打算就是花一个周期时间,来过一遍CSS+JS个人觉得笔记重点且常见的知识点,并且总结起来,如这一篇CSS选择器,归纳各类选择器,将是这个系列的开篇之作。为了方便前端CSS3样式与JS知识的总结,请期待这个系列的更新吧。


二、CSS元素显示模式:☀️☀️☀️

  首先需要了解what(是什么)、分类、转换。

2.1 什么是元素显示模式

在这里插入图片描述

HTML元素一般分为块元素和行内元素两种类型,块模式如下图:如果是一个盒子独占一个屏幕,用块元素合适一些。

在这里插入图片描述

2.2 块元素

在这里插入图片描述

注意事项:

在这里插入图片描述

2.3 行内元素

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

如下图:a标签里面放个块元素。

在这里插入图片描述

2.4 行块元素

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.5 元素显示模式的转换

行元素改为块元素:

在这里插入图片描述

在这里插入图片描述

块元素改为行元素:

在这里插入图片描述

在这里插入图片描述

三、总结🚀🚀🚀

  
在这里插入图片描述

  
  
Alt


http://www.niftyadmin.cn/n/5536747.html

相关文章

NLP入门——前馈词袋分类模型的搭建、训练与预测

模型的搭建 线性层 >>> import torch >>> from torch import nn >>> class DBG(nn.Module): ... def forward(self,x): ... print(x.size()) ... return x ... >>> tmod nn.Sequential(nn.Linear(3,4),DB…

CEPH 系统盘挂了,如何使用数据盘恢复

硬盘损坏是早晚的时,CEHP数据盘坏了,使用CEPH的基本都轻车熟路了,如果系统盘坏了呢?不知道的可能会采取整个系统盘全做的方式 前提条件:使用cephadm搭建集群 如果换服务器,请确保CEPH数据盘放到其它服务器上…

【CentOS 7 上安装 Oracle JDK 8u333】

文章目录 下载 Oracle JDK 8u333:上传 RPM 包到服务器安装 Oracle JDK设置 JAVA_HOME 环境变量验证 下载 Oracle JDK 8u333 访问 https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html 找到 JDK 8u333 版本,并下载适用于 L…

Spark性能优化(第22天)

一、Spark性能优化概述 二、Spark性能优化策略 三、理论分析 四、实践案例分析 五、监控与诊断 六、持续优化与改进 文章目录 引言一、Spark性能优化概述二、Spark性能优化策略1.1 开发调优2.1资源调优3.1 数据倾斜调优4.1 Shuffle调优 三、理论分析四、实践案例分析五、监控与…

SwiftUI中List的liststyle样式及使用详解添加、移动、删除、自定义滑动

SwiftUI中的List可是个好东西,它用于显示可滚动列表的视图容器,类似于UITableView。在List中可以显示静态或动态的数据,并支持垂直滚动。List是一个数据驱动的视图,当数据发生变化时,列表会自动更新。针对List&#xf…

location匹配和rewrite重定向

目录 location 匹配 location匹配的分类和优先级 优先级细分 实际网站中的使用规则 1.用精确匹配来实现网站的首页 访问网站的首页 ( /) 2.用正则匹配来实现静态请求的页面和图片 匹配静态页面 访问图片或者指定的后缀名 3.用一般匹配转发.php…

risc-v 怎么使用内存呢?

内存地址对齐 一般写法 #define ALIGN_4_BYTES 4 #define ALIGN_4_MASK (ALIGN_4_BYTES - 1) //4字节地址对齐 static inline uintptr_t align_4_bytes(uintptr_t address) {return (address ALIGN_4_MASK) & ~ALIGN_4_MASK; }//定义页大小是4k,2的12次方是409…

AGI|Transformer自注意力机制超全扫盲攻略,建议收藏!

一、前言 2017年,谷歌团队推出一篇神经网络的论文,首次提出将“自注意力”机制引入深度学习中,这一机制可以根据输入数据各部分重要性的不同而分配不同的权重。当ChatGPT震惊世人时,Transformer也随之进入大众视野。一夜之间&…