CSS元素宽高特点、类型转化、显式和隐藏(display)

元素的宽高特点

块级元素
  • 可以设置宽高,不可以和其他元素在一行
  • 设置宽高时,元素的宽高为设置的值
  • 没有设置宽高时,宽度和父级宽高一样,高度由元素内容决定
行级元素
  • 不可以设置宽高,可以和其他元素在一行
  • 元素的宽高由元素内容决定,对其设置是无效的
行内块级元素
  • 可以设置宽高,可以和其他元素在一行
  • 没有设置宽高时,宽高由元素内容决定
  • 设置宽高时,就为设置的值

元素类型转换

  • 任何元素都可以进行类型转换
  • 元素类型之间可以相互转换
  • 转换后不会影响元素本身的性质
  • (如:行级元素不可以设置宽高,但是转换为行内块级元素就可以设置宽高了)
     a {//转换为块级元素display: block;//行内块级元素display: inline-block;//行内元素display: inline;}

元素的显式和隐藏

note:隐藏 ≠ 删除
页面结构仍然存在,但是元素所占空间会被删除

        a {display: none;}

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

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

相关文章

k8s的Pod亲和性

针对对象为Pod,目的是实现,新建Pod和目标Pod调度到一起,在同一个Node上。 示例: rootk8s-master:/home/vagrant# cat pod.yaml apiVersion: v1 kind: Pod metadata:name: testpod01labels:app: myapp01env: test1 spec:conta…

视频推拉流EasyDSS无人机直播技术巡查焚烧、烟火情况

焚烧作为一种常见的废弃物处理方式,往往会对环境造成严重污染。因此,减少焚烧、推广绿色能源和循环经济成为重要措施。通过加强森林防灭火队伍能力建设与长效机制建立,各地努力减少因焚烧引发的森林火灾,保护生态环境。 巡察烟火…

K8S对接ceph的RBD块存储

1 PG数量限制问题 1.1 原因分析 1.还是老样子,先创建存储池,在初始化为rbd。 [rootceph141~]# ceph osd pool create wenzhiyong-k8s 128 128 Error ERANGE: pg_num 128 size 3 for this pool would result in 295 cumulative PGs per OSD (2067 tot…

React Router 6的学习

安装react-router-dom npm i react-router-dom 支持不同的路由创建 createBrowserRouter 特点 推荐使用的方式,基于 HTML5 的 History API。支持用户友好的 URL,无需 #。适用于生产环境的绝大多数场景。 适用 使用现代浏览器,支持 pus…

React第十四节useState使用详解差异

一、useState() Hook 使用 useState视图更新用法 1、写法: import { useState } from react const [name, setName] useState(Andy)利用数组解构写法, 第一个参数是自定义的属性,用于初始化时候渲染,如上面代码,初…

微信小程序web-view 嵌套h5界面 实现文件预览效果

实现方法&#xff1a;(这里我是在小程序里面单独加了一个页面用来下载预览文件) 安装 使用方法请参考文档 npm 安装 npm install weixin-js-sdk import wx from weixin-js-sdk预览 h5界面代码 <u-button click"onclick" type"primary" :loading"…

HTTP 状态码大全

常见状态码 200 OK # 客户端请求成功 400 Bad Request # 客户端请求有语法错误 不能被服务器所理解 401 Unauthorized # 请求未经授权 这个状态代码必须和WWW- Authenticate 报头域一起使用 403 Forbidden # 服务器收到请求但是拒绝提供服务 404 Not Found # 请求资源不存…

一文详解TCP协议 [图文并茂, 明了易懂]

欢迎来到啊妮莫的学习小屋! 目录 什么是TCP协议 TCP协议特点✨ TCP报文格式 三次握手和四次挥手✨ 可靠性 效率性 基于字节流✨ 基于TCP的应用层协议 什么是TCP协议 TCP(传输控制协议, Transmission Control Protocol) 是一种面向连接的, 可靠的, 基于字节流的传输层通…

在Linux(ubuntu22.04)搭建rust开发环境

1.安装rust 1.安装curl: sudo apt install curl 2.安装rust最新版 curl --proto ‘https’ --tlsv1.2 https://sh.rustup.rs -sSf | sh 安装完成后出现&#xff1a;Rust is installed now. Great! 重启当前shell即可 3.检验是否安装成功 rustc --version 结果出现&…

UnityShaderLab 实现程序化形状(一)

1.实现一个长宽可变的矩形&#xff1a; 代码&#xff1a; fixed4 frag (v2f i) : SV_Target{return saturate(length(saturate(abs(i.uv - 0.5)-0.13)))/0.03;} 2.实现一个半径可变的圆形&#xff1a; 代码&#xff1a; fixed4 frag (v2f i) : SV_Target{return (distance(a…

如何解决压测过程中JMeter堆内存溢出问题

如何解决压测过程中JMeter堆内存溢出问题 背景一、为什么会堆内存溢出&#xff1f;二、解决堆内存溢出措施三、堆内存参数应该怎么调整&#xff1f;四、堆内存大小配置建议 背景 Windows环境下使用JMeter压测运行一段时间后&#xff0c;JMeter日志窗口报错“java.lang.OutOfMe…

第46届世界技能大赛网络安全赛项安徽省选拔赛模块B任务书参考

第46届世界技能大赛网络安全赛项安徽省选拔赛模块B任务书参考 介绍:项目和任务的描述第一部分 网络安全事件响应任务一:事件调查取证任务二:web应用系统漏洞修复任务三:操作系统恶意文件检测(动态)第二部分数字调查取证任务一 :操作系统恶意文件检测(静态)(win.img和mem.dump)…

spark3 sql优化:同一个表关联多次,优化方案

目录 1.合并查询2.使用 JOIN 条件的过滤优化3.使用 Map-side Join 或 Broadcast Join4.使用 Partitioning 和 Bucketing5.利用 DataFrame API 进行优化假设 A 和 B 已经加载为 DataFramePerform left joins with specific conditions6.使用缓存或持久化7.避免笛卡尔积总结 1.合…

宽字节注入

尽管现在呼吁所有的程序都使用unicode编码&#xff0c;所有的网站都使用utf-8编码&#xff0c;来一个统一的国际规范。但仍然有很多&#xff0c;包括国内及国外&#xff08;特别是非英语国家&#xff09;的一些cms&#xff0c;仍然使用着自己国家的一套编码&#xff0c;比如gbk…

Web APIsPIs第1章

WebApi阶段学习什么&#xff1f; WebApi是浏览器提供的一组接口 使用 JavaScript 去操作页面文档 和 浏览器 什么是 API API: 应用程序接口&#xff08;Application Programming Interface&#xff09; 接口&#xff1a;本质上就是各种函数&#xff0c;无需关心内部如何实现…

解决Vue项目中npm install卡住问题的详细指南

解决Vue项目中npm install卡住问题的详细指南 引言 在开发Vue项目时&#xff0c;我们经常会遇到npm install命令卡住的问题&#xff0c;特别是在构建依赖树时。本文将分享一些实用的解决方案&#xff0c;帮助您快速解决这一常见问题。 问题描述 在执行npm install时&#xf…

Redis与数据库数据一致性保障方法

保证Redis和数据库数据一致性是一个复杂但至关重要的问题&#xff0c;特别是在需要高速缓存和持久化存储并存的系统中。以下是一些常用的方法来确保Redis和数据库之间的数据一致性&#xff1a; 一、事务与回滚机制 Redis事务&#xff1a;Redis支持通过MULTI、EXEC、DISCARD和…

android——录制屏幕

录制屏幕 1、界面 2、核心代码 import android.app.NotificationChannel import android.app.NotificationManager import android.app.PendingIntent import android.app.Service import android.content.Context import android.content.Intent import android.graphics.Bi…

【Excel学习记录】01-认识Excel

1.之前的优秀软件Lotus-1-2-3 默认公式以等号开头 兼容Lotus-1-2-3的公式写法&#xff0c;不用写等号 &#xff1a; 文件→选项→高级→勾选&#xff1a;“转换Lotus-1-2-3公式(U)” 备注&#xff1a;对于大范围手动输入公式可以使用该选项&#xff0c;否则请不要勾选&#x…

短视频矩阵抖音SEO源码OEM独立部署

短视频优化矩阵源码涉及对抖音平台上的视频内容进行筛选与排序&#xff0c;目的是增强其在搜索引擎中的可见度&#xff0c;以便更多用户能够浏览到这些视频。而抖音SEO优化系统则是通过构建一个分析框架&#xff0c;来解析抖音上的用户数据、视频信息及标签等元素&#xff0c;并…