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影响盒子宽度发生变化的情况

相关推荐
m0_587383006 分钟前
碰碰好评卡功能落地全流程实战指南 附核心逻辑与常见问题解决方案
java·前端·数据库·后端·struts·需求分析
子轩学长说7 分钟前
Workbuddy独立文件浏览器新上线,彻底告别WPS和office全家桶~
前端
nyaomaru8 分钟前
如何用 Jev 从 PR 中提取 “Why” 并写入 CHANGELOG?🤔
前端·typescript
Shirley~~8 分钟前
从0搭建一个3D立体场景:光影与交互全解析
前端·3d
Dovis(誓平步青云)9 分钟前
一年1956亿行:智能电表场景下的时序数据存储实践
运维·前端·自动化·音视频·prometheus
兰亭妙微UI设计公司10 分钟前
兰亭妙微分享:高手设计登录页的12种切入点
开发语言·前端·javascript
前端Baymax13 分钟前
静默的 86 小时:全链 402 停摆与零告警的故障复盘
开发语言·前端·javascript
要开心吖ZSH15 分钟前
定时任务从外部调度搬回本地 @Scheduled:一次连接池被打满的复盘与选型思考
前端·firefox
不停喝水20 分钟前
【前端转全栈java速通课】 项目实战④12-14节 拦截器过滤器和全局配置-cors跨域设置-token体系-利用session做验证码
java·开发语言·前端·ai·容器
代码猎人23 分钟前
怎么开发一个微信小程序
前端