当前位置: 首页 > news >正文

CSS元素的显示模式

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.lryc.cn/news/111450.html

相关文章:

  • Go strings.Title方法被废弃(Deprecated)
  • vuejs源码分析之全局API(vm.$off)
  • elasticSearch常见的面试题
  • 第一课-前提-Stable Diffusion 教程
  • Python 开发工具 Pycharm —— 使用技巧Lv.2
  • 代码随想录第39天 | 62. 不同路径、63.不同路径II
  • QMT入门—初识QMT
  • C 语言的 return 语句
  • 企业级Vue路由角色权限应该怎么做?
  • 3.2.0 版本预告!Apache DolphinScheduler API 增强相关功能
  • 测试工程师的工作
  • 压力测试与测试工具jmeter的介绍
  • 解析整型最大值(Integer.MIN_VALUE)溢出变为最小值(Integer.MAX_VALUE)
  • 【openpcdet】dbinfo内的信息
  • clickhouse查询缓存
  • vue中使用Base64加密、解密以及des加密、解密
  • 关于丢失安卓秘钥的撞sha-1值的办法
  • maven如何打包你会吗?
  • idea 控制台 打印 Tomcat日志Tomcat Catalina Log控制台乱码问题
  • python我的世界
  • SpringBoot+vue 大文件分片下载
  • scanf函数读取数据 清空缓冲区
  • js 文件常用转换
  • 基于Open3D的点云处理15-特征点
  • 算法刷题Day 58 每日温度+下一个更大元素I
  • 认识 spring AOP (面向切面编程) - springboot
  • 将css文件中的px转化为rem
  • JNI之Java实现远程打印
  • YOLOv5基础知识入门(2)— YOLOv5核心基础知识讲解
  • 免费的scrum敏捷开发管理工具