CSS元素的显示模式

news2024/11/16 22:29:20

1、现在我想做成小米左侧边栏这样的效果,该怎么做呢?

2、小米商城触碰之后会显示出新的商品案例

 3、一碰到之后会出现这个列表

4、这里涉及到了元素显示模式:

 5、用人进行划分可以分为男人和女人,根据男人和女人的特性进行相应的分工和合作,什么是显示模式就是你这个元素要以什么样的方式进行显示,具体可以分为块元素和行内元素

 如这个盒子独占了一个元素,因为会计元素更合适一些

 6、那些元素属于块级元素,下面是常见的会计元素:

 关于块元素的注意事项

P元素里面不能放块级元素,要不浏览器内的代码就变成这样了

 

 7、常见的行内元素有哪些

 7.1行内元素的特点,在一行显示:直接设置高度和宽度是无效的,默认宽度是本身内容的宽度

 7.2 注意事项:下面的写法是错误的

7.3 特殊情况下a可以放块级元素,如下面有一个a,而里面有盒子,有会计元素

 

 8、行内块元素

8.1 行内块元素的特点,一行也可以显示很多个

8.2 行内块元素的案例,行内块元素也是排在一行,但是可以设置高度和宽度是他最大的特点

 

 

 

 9、行内块元素的转换,常用于在开发中增加a的点击范围

9.1 转化为行内元素

 

9.2 行内块元素

 

10、a链接是行内元素,但是为什么是竖着显示:解决的方案就是将a链接转换为块级元素

10.1 构思思路:

10.2 案例代码: 

如何快速设计:用snipaste,摁住F1,再摁住F3

10.3  将a链接转换为会计元素,同时设计宽度和高度:

用snipaste摁住剪切,可以查看页面设计元素的宽度和高度:

代码的写法:

10.4 鼠标经过变换经过背景颜色

11、讨论使用padding,导致盒子宽度发生变化的情况

11.1 使用padding影响盒子宽度发生变化的情况

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

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

相关文章

Leetcode-每日一题【剑指 Offer 17. 打印从1到最大的n位数】

题目 输入数字 n,按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3,则打印出 1、2、3 一直到最大的 3 位数 999。 示例 1: 输入: n 1输出: [1,2,3,4,5,6,7,8,9] 说明: 用返回一个整数列表来代替打印 n 为正整数 解题思路 前置知识 M…

ChatGenTitle:使用百万arXiv论文信息在LLaMA模型上进行微调的论文题目生成模型

项目设计集合(人工智能方向):助力新人快速实战掌握技能、自主完成项目设计升级,提升自身的硬实力(不仅限NLP、知识图谱、计算机视觉等领域):汇总有意义的项目设计集合,助力新人快速实…

2024年中国计量大学MBA项目招生信息全面了解

2024年全国管理类硕士联考备考已经到了最火热的阶段,不少考生开始持续将注意力集中在备考的规划中!杭州达立易考教育整合浙江省内的MBA项目信息,为大家详细梳理了相关报考参考内容,方便大家更好完成择校以及针对性的备考工作。本期…

Ubuntu 23.04 作为系统盘的体验和使用感受

1.为啥主系统装了Ubuntu 由于公司发电脑了,我自己也有一台台式电脑,然后也想去折腾一下Ubuntu,就把自己的笔记本装成Ubuntu系统了, 我使用的是23.04的桌面版,带图形化界面的。我准备换回Windows 11了(因为…

C#利用自定义特性以及反射,来提大型项目的开发的效率

在大型项目的开发过程中,需要多人协同工作,来加速项目完成进度。 比如一个软件有100个form,分给100个人来写,每个人完成自己的Form.cs的编写之后,要在Mainform调用自己写的Form。 如果按照正常的Form form1 new For…

不需要考虑mid+1、mid-1的二分查找模板,希望大家都能学会

文章目录 一、模板示范二、模板三、细节说明为什么L的初始值为-1,R的初始值为N为什么循环结束的条件是while(L1!R)?不会陷入死循环 最后四、    例题one[数的范围](https://www.acwing.com/problem/content/791/)    例题two[数的三次方根](https://www.acwing…

骨传导耳机真不伤耳吗?骨传导耳机有什么好处?

骨传导耳机真不伤耳吗?骨传导耳机有什么好处? 我先来说说骨传导耳机的工作原理吧,骨传导是一种传声方式,声波通过颅骨、颌骨等头部骨头的振动,将声音传到内耳。其实骨传导的现象我们很常见,就像我们平时嗑瓜…

【总结】p49常见问题和快捷键汇总

p49常见问题和快捷键汇总 基础概念常用快捷键汇总编辑器快捷键(不包括视口操作)蓝图快捷键 中英文命名注意事项帧和秒的概念带星号的文件的意思编译的作用实例和原素材情景关联返回的快捷键 虚幻引擎闪退问题 基础概念 常用快捷键汇总 编辑器快捷键&am…

【图像去噪】基于原始对偶算法优化的TV-L1模型进行图像去噪研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

ruoyi-cloud-notes02

1、Validated RequestBody 配合使用 Validated 和 RequestBody 都是 Spring Boot 中用于在请求中验证数据的注解。但是,它们的作用和使用方式略有不同。 Validated 用于在方法参数、URL、请求体、Map中的数据上进行验证,确保数据的有效性。它会在验证失…

SpringBoot核心内容梳理

1.SpringBoot是什么? Spring Boot是一个基于Spring框架的快速开发应用程序的工具。它简化了Spring应用程序的创建和开发过程,使开发人员能够更快速地创建独立的、生产就绪的Spring应用程序。它采用了“约定优于配置”的原则,尽可能地减少开发人员需要进…

创建vue-cli(脚手架搭建)

目录 功能 需要的环境 使用HbuilderX快速搭建一个vue-cli项目 组件路由 element-ui vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义 好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个 骨…

2019年09月《全国青少年软件编程等级考试》Python一级真题解析

一、单选题 第1题 关于Python的编程环境,下列的哪个表述是正确的? A:Python的编程环境是图形化的; B:Python只有一种编程环境ipython; C:Python自带的编程环境是IDLE; D:用windows自带的文本编辑器也可以给Python编程?,并且也可以在该编辑器下运行; 正确答案…

数据集相关网站(Open datasets and sources)

数据集相关网站(Open datasets and sources) 数据集网站 Open datasets and sources政府数据网站 Government Data:金融数据网站 Financial Data Sources:犯罪数据网站 Crime Data:健康数据网站 Health Data:学术和商业数据网站 Academic and Business Data:其他数据…

Linux下进程的特点与环境变量

目录 进程的特点 进程特点的介绍 进程时如何实现并发性的 进程间如何切换 概念铺设 PC指针 上下文 环境变量 PATH 修改PATH HOME SHELL env 命令行参数 什么是命令行参数? 打印命令行参数 通过函数获得环境变量 getenv 命令行参数 env 修改环境变…

Compose:从重组谈谈页面性能优化思路,狠狠优化一笔

作者:晴天小庭 前言: 随着越来越多的人使用Compose开发项目的组件或者页面,关于使用Compose构建的组件卡顿的反馈也愈发增多,特别是LazyColumn这些重组频率较高的组件,因此很多人质疑Compose的性能过差,这…

flask服务生成证书文件,采用https访问,开启用户密码验证

openssl req -x509 -newkey rsa:4096 -nodes -out cert.pem -keyout key.pem -days 3072开启用户密码验证 auth.verify_password def verify_password(username, password):if username abcdefg and password 1234546:return usernameapp.route(/post_request, methods[POST…

HDFS中的Federation联邦机制

HDFS中的Federation联邦机制 当前HDFS体系架构--简介局限性 联邦Federation架构简介好处配置示例 当前HDFS体系架构–简介 当前的HDFS结构有两个主要的层: 命名空间(namespace) 由文件,块和目录组成的统一抽象的目录树结构。由n…

JavaScript |(五)DOM简介 | 尚硅谷JavaScript基础实战

学习来源:尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 文章目录 📚DOM简介📚DOM查询🐇文档的加载🐇节点🐇节点的属性🐇元素节点的子节点🐇获取父节点和兄弟节点&#x1…

4,链表【p5】

链表 4.1哈希表简介4.2有序表简介4.3链表4.3.1例1-反转单向和双向链表4.3.2例2-打印两个有序链表的公共部分4.3.3面试时链表解题的方法论4.3.4例3-判断一个链表是否为回文结构4.3.4.1快慢指针 4.3.5例4-将单向链表按某值划分成左边小、中间相等、右边大的形式4.3.6例5-复制好友…