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>