前端学习-css的元素显示模式(十五)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

前言

什么是元素显示模式

块元素

常见的块元素

块元素的特点

注意

行内元素

行内元素的特点

注意

行内块元素

行内块元素的特点

元素显示模式的转换

语法格式

图表总结

总结


前言

本文来介绍css的元素显示模式的学习,为后续的盒子模型做基础准备


什么是元素显示模式

作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页

元素显示模式就是元素以什么类型进行显示,比如<div>自己占一行,比如一行可以放多个<span>

块元素和行内元素两种类型

块元素

常见的块元素

<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等,其中<div>标签是最典型的块元素

块元素的特点

比较霸道,自己独占一行。高度,宽度、外边距以及内边距都可以控制,宽度默认是容器(父级宽度)的100%6。是一个容器及盒子,里面可以放行内或者块级元素

注意

文字类的元素内不能使用块级元素<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点

相邻行内元素在一行上,一行可以显示多个,高、宽直接设置是无效的。默认宽度就是它本身内容的宽度,行内元素只能容纳文本或其他行内元素。

注意

链接里面不能再放链接

行内块元素

在行内元素中有几个特殊的标签-<img />、<input />、<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点

① 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)。

② 默认宽度就是它本身内容的宽度(行内元素点)

③ 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

元素显示模式的转换

特殊情况下,我们需要元素模式的转换,简单理解: 一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围,

语法格式

display:block;
<style>

a{

display:block;

}

</style>

图表总结


总结

不积跬步无以至千里,不积小流无以至江海

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

黑马程序员-redis项目实践笔记1

目录 一、 基于Session实现登录 发送验证码 验证用户输入验证码 校验登录状态 Redis代替Session登录 发送验证码修改 验证用户输入验证码 登录拦截器的优化 二、 商铺查询缓存 缓存更新策略 数据库和缓存不一致解决方案 缓存更新策略的最佳实践方案 实现商铺缓…

【UML】一个UML学习的还不错的几个帖子

https://segmentfault.com/a/1190000042775634 寂然解读设计模式 - UML类图&类的六大关系-阿里云开发者社区

学习threejs,网格深度材质MeshDepthMaterial

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️网格深度材质MeshDepthMate…

【数据结构与算法】栈和队列

文章目录 一.栈1.1定义 顺序栈和链式栈1.2基本操作1.2.1表示1.2.2初始化1.2.3清空1.2.4销毁1.2.5入栈1.2.6出栈1.2.7取栈顶 1.3共享栈1.3.1定义1.3.2进栈出栈 二.队列2.1定义 顺序队列和链式队列循环队列2.2基本操作2.2.1初始化2.2.2判空2.2.3求队列长度2.2.4取队头元素2.2.5销…

Spring 的依赖注入的最常见方式

在 Spring 中&#xff0c;依赖注入的方式有多种选择。下面我们来逐一分析它们的特点、适用场景和注意事项&#xff1a; 1. 构造函数注入 构造函数注入要求在对象创建时提供所有依赖。这种方式确保依赖在对象创建后不可变&#xff0c;特别适合必须强制存在的依赖。所有依赖在对…

我谈Sobel算子与高斯一阶微分的关系

现在算力提升了&#xff0c;最常用的一阶差分边缘检测算子已经不是Sobel算子了&#xff0c;而是高斯一阶微分。 高斯一阶微分 顾名思义&#xff0c;高斯函数的一阶导数。 Derivative of Gaussian 1D 一维直接扩展到二维。 禹晶、肖创柏、廖庆敏《数字图像处理&#xff08;面…

【python爬虫】携程旅行景点游客数据分析与可视化

一.选题背景 随着旅游业的快速发展&#xff0c;越来越多的人选择通过互联网平台预订旅行产品&#xff0c;其中携程网作为国内领先的在线旅行服务提供商&#xff0c;拥有大量的旅游产品和用户数据。利用爬虫技术可以获取携程网上各个景点的游客数据&#xff0c;包括游客数量、游…

3D Slicer 教程二 ---- 数据集

上一章下载3d slicer的软件,这章从加载数据集来弄清楚3dslicer怎么使用. 一. 加载数据集 如果没有数据集,也可用用样本数据. (1) "File" --> "add Data" 可以添加图片文件夹,(试了MP4不行,内镜的视频估计不支持),添加单个图片的话,会出现一些选项, …

【C++11】可变模板参数详解

个人主页&#xff1a;chian-ocean 文章专栏 C 可变模板参数详解 1. 引言 C模板是现代C编程中一个非常强大且灵活的工具。在C11标准中&#xff0c;引入了可变模板参数&#xff08;variadic templates&#xff09;&#xff0c;它为模板编程带来了革命性改变。它的出现允许我们…

四、Spring Boot集成Spring Security之认证流程

一、Spring Boot集成Spring Security专栏 一、Spring Boot集成Spring Security之自动装配 二、Spring Boot集成Spring Security之实现原理 三、Spring Boot集成Spring Security之过滤器链详解 四、Spring Boot集成Spring Security之认证流程 五、Spring Boot集成Spring Se…

锥线性规划【分布鲁棒、两阶段鲁棒方向知识点】

1 锥线性对偶理论 本部分看似和分布鲁棒、两阶段鲁棒优化没什么关系&#xff0c;但值得优先学习&#xff0c;原因将在最后揭晓。 二阶锥 二阶锥&#xff08;second-order cone&#xff0c;又称ice-cream/Lorentz cone&#xff09;的形式为&#xff1a; 非负象限锥 半正定锥 …

【工具变量】上市公司企业广告支出数据(2007-2023年)

一、测算方式&#xff1a;具体而言&#xff0c;参照 Lu 等&#xff08;2022&#xff09;的研究&#xff0c;本文通过上市公司财务报表附注获取每家上市公司每年销售费用明细项目&#xff0c;筛选出广告费、广告宣传费、广告推广费、广告策划费、广告展览费等与广告支出相关的项…

【Git】基本操作+分支管理

Git基本操作 Git仓库创建 Git仓库的基本认知 Git仓库就是一个用来跟踪和管理项目文件变化的地方&#xff0c;其记录了所有的修改历史&#xff0c;可以回退到之前的任何一个历史版本 工作区&#xff1a;正在进行实际操作的文件夹暂存区&#xff1a;临时保存想要提交修改的区域…

美国处方利用数据库查询方法

众所周知&#xff0c;药物的处方利用数据一直是评估药品市场渗透率、患者用药习惯以及药品普及程度的重要依据&#xff0c;也是监管机构评估医疗补助计划效率和效果的重要指标&#xff0c;而对于医药企业而言&#xff0c;了解药物的处方利用情况&#xff0c;可以助力他们更好对…

tensorflow入门案例手写数字识别人工智能界的helloworld项目落地1

参考 https://tensorflow.google.cn/?hlzh-cn https://tensorflow.google.cn/tutorials/keras/classification?hlzh-cn 项目资源 https://download.csdn.net/download/AnalogElectronic/89872174 文章目录 一、案例学习1、导入测试和训练数据集&#xff0c;定义模型&#xff…

树莓派应用--AI项目实战篇来啦-13.OpenCV摄像头云台人脸追踪

1. OpenCV 舵机云台人脸追踪介绍 本项目内容和前面学习的云台追踪物体是一样的原理&#xff0c;只是这里把追踪物体修改成追踪人脸&#xff0c;在前面的内容中&#xff0c;我们已经学习了二维云台的物体追踪&#xff0c;理解了二维云台对物体追踪的PID控制模型&#xff0c;在本…

vue+leaflet示例:克里金插值渲染显示(附源码下载)

demo源码运行环境以及配置 运行环境&#xff1a;依赖Node安装环境&#xff0c;demo本地Node版本:14.19.1。运行工具&#xff1a;vscode或者其他工具。配置方式&#xff1a;下载demo源码&#xff0c;vscode打开&#xff0c;然后顺序执行以下命令&#xff1a; (1)下载demo环境依赖…

车易泊车位管理相机 —— 智能管理,停车无忧

在现代城市生活中&#xff0c;停车问题一直是困扰着车主和城市管理者的难题。车位难找、停车管理混乱等问题不仅浪费了人们的时间和精力&#xff0c;也影响了城市的交通秩序和形象。而车易泊车位管理相机的出现&#xff0c;为解决这些问题提供了一种高效、智能的解决方案。 一、…

120多套各种类别微信小程序模板源码

微信小程序是一种轻量级的应用开发平台&#xff0c;由腾讯公司推出&#xff0c;主要应用于移动端&#xff0c;为用户提供便捷的服务体验。本资源包含120套微信小程序的源码&#xff0c;对于开发者来说是一份宝贵的参考资料&#xff0c;可以用来学习、研究或者作为开发新项目的起…

Redux与Redux-thunk详解

Redux与Redux-Thunk中间件的工作原理是Redux状态管理库中的核心概念&#xff0c;它们共同协作以实现复杂应用中的状态管理和异步操作。以下是它们的工作原理的详细解释&#xff1a; Redux的工作原理 Action&#xff1a; Action是Redux中的基本单位&#xff0c;它是一个描述要…