2024.4.3-day08-CSS 盒子模型(溢出显示、伪元素)


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

    • 作业
  • 2024.4.3-学习笔记
    • css溢出显示
    • 单行文本溢出显示省略号
    • 多行文本溢出显示省略号
    • 伪元素
    • 其他伪元素

作业

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UFT-8"><meta name="animal" content="animal"><meta description="animal" content="animal"><title>animal</title><style>* {padding: 0;margin: 0;}.box {width: 880px;margin: 30px auto 0;padding: 50px 10px;border-top: 3px solid rgb(94, 184, 94);}ul {list-style: none;}.title {padding-bottom: 10px;margin-bottom: 20px;border-bottom: 2px solid rgb(94, 184, 94);font-size: 20px;}p {display: inline-block;width: 580px;margin-left: 50px;font-size: 14px;text-indent: 2em;}.text-mult-ellipsis {display: -webkit-inline-box!important;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}div {margin-bottom:20px;}</style></head><body><div class="box"><ul><li><h3 class="title">猫头鹰 (owl)</h3><div><img src="../image/1.jpg"     width="180"><p class="text-mult-ellipsis">鸮形目(Strigiformes)中的鸟被叫做猫头鹰,总数超过130余种。在除南极洲以外所有的大洲都有分布。大部分的种为夜行性肉食性动物,食物以鼠类为主,也吃昆虫、小鸟、蜥蜴、鱼等动物。该目鸟类头宽大,嘴短而粗壮前端成钩状,头部正面的羽毛排列成面盘.</p></div></li><li><h3 class="title"></h3><div><img src="../image/4.jpg"     width="180"><p class="text-mult-ellipsis">羊是羊亚科的统称,哺乳纲、偶蹄目、牛科、羊亚科,是人类的家畜之一。有毛的四腿反刍动物,是羊毛的主要来源。毛色主要是白色。我国主要饲养山羊和绵羊。</p></div></li><li><h3 class="title">北极熊</h3><div><img src="../image/3.jpg"     width="180"><p class="text-mult-ellipsis">北极熊(拉丁学名:Ursus maritimus (Phipps, 1774),是熊科熊属的一种动物,是世界上最大的陆地食肉动物 [1] ,又名白熊。皮肤为黑色,由于毛发透明故外观上通常为白色,</p></div></li><li><h3 class="title">猴子</h3><div><img src="../image/2.jpg"     width="180"><p class="text-mult-ellipsis">猴子。杂食性。以水果为主 不放过唾手可得的肉食。是三种类人猿灵长目动物的成员,灵长目是动物界的种群,猴子一般大脑发达,眼眶朝向前方,眶间距窄,手和脚的趾(指)分开,大拇指灵活,多数能与其他原猴亚目和猿猴亚目。</p></div></li></ul></div></body>  
</html>

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="shouye" content="shouye"><meta description="shouye" content="shouye"><title>首页</title><style>* {padding: 0;margin: 0;}ul {list-style: none;}.box {width: 600px;margin: 30px auto 0;font-size: 0;}.box>li {display: inline-block;width: 300px;font-size: 14px;padding: 10px 0;}.one::before {content: "1";}.two::before {content: "2";}.three::before {content: "3";}.four::before {content: "4";}.five::before {content: "5";}.six::before {content: "6";}.one::after, .three::after {border: 1px solid blue;color: blue;font-weight: bolder;display:inline-block;text-align: center;line-height: 30px;}.one::after {content: "新";font-size: 20px;width: 30px;}.three::after {content: "哈啊哈哈";font-size:15px;width: 70px;}.two::after {content: "热";border: 1px solid red;color: red;font-weight: bolder;}a {color: black;text-decoration: none;}</style></head><body><ul class="box"><li class="one"><a href="#">高福称北京疫情可能要前推一个月</a></li><li class="four"><a href="#">白百何方否认新恋情</a></li><li class="two"><a href="#">北京新发地市场商户回浙江后确诊</a></li><li  class="five"><a href="#">男童在确诊患者被子上玩感染</a></li><li class="three"><a href="#">涉事教师承认曾掌掴坠楼小学生</a></li><li class="six"><a href="#">110万买奔驰越野车高速熄火5次</a></li></ul></body>
</html>

2024.4.3-学习笔记

css溢出显示

overflow:hidden识别的是边框以内的进行修剪
scroll:无论如何都有滚动条
auto 内容超出才有滚动条

单行文本溢出显示省略号

text-oer-flow: ellipsis只会识别单行的边界,所以我们一般要将这三个一起写:

在这里插入图片描述

多行文本溢出显示省略号

考虑到兼容性,适用于webkit浏览器或移动端(webkit内核)

display:-webkit-box;类似块元素
在这里插入图片描述

设置第几行,第几行就会出现省略号

没设定高度,弹性盒子会自动裁剪到省略号的段落。

在这里插入图片描述

在这里插入图片描述

inline-block文本有多长他宽度就有多长。

-webkit-inline-box:行内元素

伪元素

E::before 和 E::after

在这里插入图片描述

写在css,而不是在html,从css生成到html,相当于多个span,伪元素后面再跟选择器了

伪类可以

在这里插入图片描述

![image-20240404174128238](C:\Users\zhou’xin\AppData\Roaming\Typora\typora-user-images\image-20240404174128238.png

其他伪元素

E::first-letter 文本的第一个单词或字(如中文、日文、韩文等)

E::first-line 文本第一行;

E::selection 可改变选中文本的样式;

在这里插入图片描述

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

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

相关文章

多态.Java

&#xff08;1&#xff09;什么是多态&#xff1f; 同类型的对象&#xff0c;表现出不同的形态。前者指父类&#xff0c;后者指不同的子类 说简单点&#xff0c;就是父类的同一种方法&#xff0c;可以在不同子类中表现出不同的状态&#xff0c;或者说在不同子类中可以实现不同…

UVA247 Calling Circles 解题报告

UVA247 Calling Circles 解题报告 题目链接 https://vjudge.net/problem/UVA-247 题目大意 如果两个人相互打电话&#xff08;直接或间接&#xff09;&#xff0c;则说他们在同一个电话圈里。例如&#xff0c;a打给b&#xff0c;b打给c&#xff0c;c打给d&#xff0c;d打给a…

10.java openCV4.x 入门-特殊的Mat类汇总(二)

专栏简介 &#x1f492;个人主页 &#x1f4f0;专栏目录 点击上方查看更多内容 &#x1f4d6;心灵鸡汤&#x1f4d6;我们唯一拥有的就是今天&#xff0c;唯一能把握的也是今天建议把本文当作笔记来看&#xff0c;据说专栏目录里面有相应视频&#x1f92b; &#x1f9ed;文…

原型设计模式的学习

哪位大佬帮我看看关于“原型设计模式”的问题 写作原因&#xff1a; 我需要了解原型模式&#xff0c;但网上的说法是&#xff1a;通过一个clone方法来创建对象。然而&#xff0c;这并没有解答关于“效率”的问题&#xff1a; 以下是以怪物游戏和深拷贝为例来说明的&#xff1a;…

Linux 常用指令及其理论知识

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;http://t.csdnimg.cn/Tvyou 欢迎各位指教&#xff01;&#xff01;&#xff01; 目录 一、理论知识 二、基础指令 1、ls指令&#xff08;列出该目录下的所有子目录和文件&#xff09; 语法&#xff1a; …

论文阅读——Sat2Vid

Sat2Vid: Street-view Panoramic Video Synthesis from a Single Satellite Image 提出了一种新颖的方法&#xff0c;用于从单个卫星图像和摄像机轨迹合成时间和几何一致的街景全景视频。 即根据单个卫星图像和给定的观看位置尽可能真实地、尽可能一致地合成街景全景视频序列。…

Docker中Mysql报 mbind: Operation not permitted

问题 我们在docker中安装的mysql运行时报 mbind: Operation not permitted mbind: Operation not permitted mbind: Operation not permitted mbind: Operation not permitted mbind: Operation not permitted mbind: Operation not permitted原因 这是Docker的Seccomp安全限…

[leetcode] 25. K 个一组翻转链表

给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内部的值…

MySQL(目录)

作者&#xff1a;码农出击 链接&#xff1a;https://www.zhihu.com/question/632989513/answer/3312494291 来源&#xff1a;知乎 著作权归作者所有。 MySQL数据库&#xff08;7天~15天&#xff09; 1、数据存储引擎&#xff1a;InnoDB、myISAM、Memory 2、数据库索引类型及原…

最好用的安卓按钮(3)

属性解释 按钮文字 app:text“床前明月光” 按钮文字颜色 app:textColor“color/color_white” 按钮文字大小 app:textSize“22sp” 按钮背景颜色 app:color_normal“color/color_accent” 0x2 单独设置每个圆角 效果 代码 <top.androidman.SuperButton android:layo…

替换空格(替换特定字符)

&#x1f600;前言 在字符串处理中&#xff0c;经常会遇到需要替换特定字符的情况。本文将介绍一道经典的字符串替换问题&#xff1a;将字符串中的空格替换成 “%20”。我们将探讨一种高效的解决方法&#xff0c;通过倒序遍历字符串来实现原地替换&#xff0c;避免额外空间的开…

也说说Sybase ASE中的空间膨胀及应对方案

前言 直观来讲,数据库是典型的以空间换时间的思路去提高数据检索的效率。我们先把数据“入”进去,组织好,建好索引,都为了什么?相当大一部分只不过是为了最终能快速得到查询的结果。当然这又引发了好多子项,比如,怎么“入”得快而又不发生冲突,怎么在相对少的资源的情…

OpenCV中的模块:三维重建-SFM(2)

接上一篇文章,本篇将介绍SFM模块在windows平台上的编译。与Ubuntu下的过程类似,主要过程也是依赖库的下载、编译及安装,不同点是:与Ubuntu直接安装不同,windows下我们将对库的依赖关系更加清晰。 1. 依赖库的编译 打开相应库的最外层CMakeLists.txt所在的目录,库的编译过…

机器学习_PySpark-3.0.3文本特征提取(TF-IDF)流程

机器学习_PySpark-3.0.3文本特征提取(TF-IDF)流程 本例中 Tokenizer 是用于分词的模块。 本例中 HashingTF().tranform() 函数把词哈希成特征向量, 返回结果是 Vectors.sparse() 类型的。 本例中 IDF 类用于计算给定文档集合的反文档频率, 是一个词普遍重要性的度量 (即: 一…

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(八)- 向量整数算术指令

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

Linux 内核的构建块:深入探索 C 结构体的应用

Linux 内核的构建块&#xff1a;深入探索 C 结构体的应用 Linux 内核&#xff0c;作为操作系统的中心和基础&#xff0c;承担着调度处理器、管理内存、处理输入/输出&#xff08;I/O&#xff09;等各种底层任务。要实现这些复杂的功能&#xff0c;内核的编写借助了 C 语言强大…

SAP FICO接口-OA-调取SAP供应商明细接口(应付预付明细)开发说明书(包括测试样例、程序代码仅作参考,不保证一定可以运行)

需求说明: 根据OA查询条件查询ZVACDOCAZVACDOCA-BUKRS=查询公司代码; ZVACDOCA- LIFNR=查询供应商代码; ZVACDOCA-BELNR=查询凭证编号; ZVACDOCA-GJAHR=查询会计年度; ZVACDOCA-AWKEY=查询采购发票号*; ZVACDOCA-BLART≠W* ZVACDOCA-AUGBL=空 ZVACDOCA- XREVERSED…

ShrewSoft VPN无法连接.报错failed to attach to key daemon的解决方案

今天突然发现使用的ShrewSoft VPN 软件来连接公司网络。但是连接过程中&#xff0c;报错 “Fail to attach to key daemon” 解决步骤&#xff1a; 1. 重启电脑&#xff0c;可以解决90%问题。 2. 可能和ShrewSoft 相关的服务没有启动有关。 于是检查服务状态。 2.1 按Wind…

中国省级基础设施网络完善进程:2000-2022年数据分析与展望(无缺失值)

01、数据介绍 基础设施&#xff0c;作为为社会生产和居民生活提供公共服务的物质工程设施&#xff0c;是一个用于保证社会经济活动正常进行的公共服务系统。它不仅包括交通设施&#xff0c;还涵盖了邮电、供水供电、商业服务、科研与技术服务、园林绿化、环境保护、文化教育、…

富格林:明示虚假现象确保安全

富格林认为&#xff0c;当下的金融市场&#xff0c;投资者进行理财时都会特别关注盈利效率高的产品&#xff0c;而近来兴起的现货黄金则以此优势吸引着大批人关注。不过现货黄金市场相对于其他投资市场来说&#xff0c;会复杂一点不乏会蕴含着虚假现象。因此要确保我们的交易安…