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 可改变选中文本的样式;

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Android】图解View的工作流程原理

文章目录 入口DecorView如何加载到Window中MeasureSpec MeasureView的测量ViewGroup的测量 LayoutView的layout() Draw1、绘制背景3、绘制View内容4、绘制子View6、绘制装饰 入口 DecorView如何加载到Window中 MeasureSpec 该类是View的内部类&#xff0c;封装View的规格尺寸…

C++资源重复释放问题

这不是自己释放了2次&#xff1b; 可能是类互相引用&#xff0c;有类似现象释放资源时引起&#xff1b;还不太了解&#xff1b; 类对象作为函数参数也会引起&#xff1b; 下面是一个简单示例&#xff1b; #include <iostream> #include <string.h> #include &l…

Spark-Scala语言实战(14)

在之前的文章中&#xff0c;我们学习了如何在spark中使用键值对中的fullOuterJoin&#xff0c;zip&#xff0c;combineByKey三种方法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点…

最优算法100例之36-扑克牌顺子

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了…

软考113-上午题-【计算机网络】-IPv6、无线网络、Windows命令

一、IPv6 IPv6 具有长达 128 位的地址空间&#xff0c;可以彻底解决 IPv4 地址不足的问题。由于 IPv4 地址是32 位二进制&#xff0c;所能表示的IP 地址个数为 2^32 4 294 967 29640 亿&#xff0c;因而在因特网上约有 40亿个P 地址。 由 32 位的IPv4 升级至 128 位的IPv6&am…

FaaF:利用事实作为评估RAG的函数方法

原文地址&#xff1a;faaf-facts-as-a-function-for-evaluating-rag 2024 年 4 月 5 日 在某些情况下&#xff0c;我们使用其他语言模型来验证RAG的输出结果&#xff0c;但这种方法并未能有效识别出数据生成过程中的错误和缺失。 论文解析 挑战 评估的可靠性和效率&#xff…

PyTorch之计算模型推理时间

一、参考资料 如何测试模型的推理速度 Pytorch 测试模型的推理速度 二、计算PyTorch模型推理时间 1. 计算CPU推理时间 import torch import torchvision import time import tqdm from torchsummary import summarydef calcCPUTime():model torchvision.models.resnet18()…

数据字典

文章目录 一、需求分析二、表设计&#xff08;两张表&#xff09;三、功能实现3.1 数据字典功能3.1.1 列表功能3.1.2 新增数据字典3.1.3 编辑数据字典 3.2 数据字典明细3.2.1 列表功能3.2.2 新增字典明细3.2.3 编辑字典明细 3.3 客户管理功能3.3.1 列表功能3.3.2 新增用户3.3.3…

页表基本原理

页表概念 CPU并不是直接访问物理内存地址&#xff0c;而是通过虚拟地址空间来间接访问物理内存地址&#xff1b;虚拟地址空间是操作系统为每个正在执行的进程分配一个逻辑地址&#xff1b;比如在32位系统(处理器和内存地址总线都是32位)&#xff0c;范围是0~(4G-1)&#xff1b…

docker基础学习指令

文章目录 [toc] docker基础常用指令一、docker 基础命令二、docker 镜像命令1. docker images2. docker search3. docker pull4. docker system df5. docker rmi1. Commit 命令 三、 docker 容器命令1. docker run2. docker logs3. docker top4. docker inspect5. docker cp6. …

CSS-语法、选择器

&#x1f4da;详见 W3scholl&#xff0c;本篇只做快速思维索引。 概述 CSS 是一种描述 HTML 文档样式的语言。 有三种插入样式表的方法&#xff1a; 外部 CSS内部 CSS行内 CSS &#x1f4c5; 外部 CSS 外部样式表存储在.css文件中。HTML 页面必须在 head 部分的<link&g…

Apache Log4j2 Jndi RCE CVE-2021-44228漏洞原理讲解

Apache Log4j2 Jndi RCE CVE-2021-44228漏洞原理讲解 一、什么是Log4j2二、环境搭建三、简单使用Log4j2四、JDNI和RMI4.1、启动一个RMI服务端4.2、启动一个RMI客户端4.3、ldap 五、漏洞复现六、Python批量检测 参考视频&#xff1a;https://www.bilibili.com/video/BV1mZ4y1D7K…

深入浅出 -- 系统架构之Keepalived搭建双机热备

Keepalived重启脚本双机热备搭建 ①首先创建一个对应的目录并下载keepalived安装包&#xff08;提取码:s6aq&#xff09;到Linux中并解压&#xff1a; [rootlocalhost]# mkdir /soft/keepalived && cd /soft/keepalived [rootlocalhost]# wget https://www.keepalived.…

MYSQL 锁机制 与 MVCC多版本并发

MYSQL锁机制与优化以及MVCC底层原理 锁分类 乐观锁&#xff0c;悲观锁 从性能上分为乐观锁&#xff08;版本对比,版本一致就更新&#xff0c;不一致就不更新或CAS机制&#xff09;和悲观锁&#xff08;锁住资源等待&#xff09;&#xff0c;乐观锁适合读比较多的场景&#x…

无监督学习简介

无监督学习简介 一、定义和核心概念 无监督学习的定义 无监督学习是机器学习的一个关键分支&#xff0c;它涉及到从未标注数据中学习和提取信息。不同于其他学习类型&#xff0c;无监督学习的数据集没有提供任何显式的输出标签或结果。因此&#xff0c;这种学习方法的主要任务…

运放知识点总结

目录 一、运放基础知识 (operational amplifier) 1.由来 2.用途 3.符号 4.内部结构​编辑 5.虚短虚断 二、同相放大电路 &#xff08;Non-inverting Amplifier&#xff09; 三、反相放大电路 (Inverting Amplifier) 四、差分放大电路 (Difference Amplifier) 五、加法…

如何使用CSS构建一个瀑布流布局

如何使用CSS构建一个瀑布流布局 瀑布流布局是一种常见的网页布局方式&#xff0c;其中元素以不同的大小排列&#xff0c;且行与列之间没有不均匀的间隙。在瀑布流布局中&#xff0c;即使某一行或列中的元素较短&#xff0c;下一个元素也会占据空间。 如何实现瀑布流布局 实现…

MacOS Docker 可视化面板 Portainer

一、简介 Portainer 是一个可视化的容器镜像图形管理工具&#xff0c;使用 Portainer 可以轻松构建、管理和维护Docker 环境。 而且完全免费&#xff08;portainer-ce 是免费的&#xff0c;portainer-ee 是需要授权的&#xff0c;今天安装的是 portainer-ce 版本&#xff09;&…

Chatgpt掘金之旅—有爱AI商业实战篇|社交媒体管理|(七)

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 一、AI技术社交媒体创业有哪些机会&#xff1f; 人工智能&#xff08;AI&#xff09;技术作为当今科技创新的前沿领域&#xff0c;为创业者提供了广阔的机会和挑战。随着AI技…

如何注册midjourney账号

注册Midjourney账号比较简单&#xff0c;准备好上网工具&#xff0c;进入官网 Midjourney访问地址&#xff1a; https://www.midjourney.com/ 目前没有免费使用额度了&#xff0c;会员最低 10 美元/月&#xff0c;一般建议使用30美元/月的订阅方案。了解如何订阅可以查看订阅…