HTML+CSS(4)

1.溢出设置

设置超出的部分:显示(默认)visible/隐藏hidden/滚动显示scroll
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body>div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*设置超出的部分:显示(默认)visible/隐藏hidden/滚动显示scroll*/
            overflow: scroll;
        }
        body>img {
            width: 100px;
            /*设置行内元素垂直对齐方式:
            top上对齐,
            middle中间对齐
            bottom下对齐,
            baseline基线对齐*/
            vertical-align: bottom;
        }
    style>
head>
<body>
<input type="text"><img src="../imgs/a.jpg" alt="">
<div>
    <img src="../imgs/a.jpg" alt="">
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2.层级显示

position使元素脱离文档流
z-index值越大层级越高
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1{
            width: 100px;
            height: 50px;
            background-color: red;
            position: absolute;/*position会让div脱离文档流*/
            /*层级越大显示约靠前*/
            z-index: 1;
        }
        #d2{
            width: 50px;
            height: 100px;
            background-color: blue;
            position: absolute;
            z-index: 2;
        }
    style>
head>
<body>
<div id="d1">div>
<div id="d2">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3.网页盗图

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #i1{
            width: 21px;
            height: 21px;
            display: block;
            background-image: url("https://game.gtimg.cn/images/lol/v3/topfoot-spr.png");
            background-position: -381px -39px;
        }
        #i2{
            width: 16px;
            height: 24px;
            display: block;
            background-image: url("https://game.gtimg.cn/images/lol/v3/topfoot-spr.png");
            background-position: -303px -84px;
        }
        a{
            background-image: url("https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png");
            display: block;
            width: 200px;
            height: 54px;
        }
    style>
head>
<body>
<a href="">a>
<i id="i1">i>
<i id="i2">i>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

4.网页盗视频

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <video id="bg" poster="https://ys.mihoyo.com/main/_nuxt/img/47f71d4.jpg"
           loop muted AUTOPLAY CONTROLS
           style="width: 1576.89px; height: 887px;">
        <source src="https://ys.mihoyo.com/main/_nuxt/videos/3e78e80.mp4" type="audio/mp4">
        您的浏览器不支持播放此视频.
    video>
video>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

相关阅读:
Linux下快速确定目标服务器支持哪些协议和密码套件
优雅而高效的JavaScript——?? 运算符、?. 运算符和 ?. .运算符
金仓数据库KingbaseES客户端应用参考手册--17. vacuumdb
【软考软件评测师】第二十五章系统安全设计（网络攻击）
人工智能基础_机器学习035_多项式回归升维实战2_使用sklearn的PolynomialFeatures进行升维---人工智能工作笔记0075
Git常用命令（面试+复习）
Servlet——进阶
Facebook的创新实验室：人工智能与新技术探索
电气工程的标准是什么
接口测试及常用接口测试工具

原文地址：https://blog.csdn.net/longgetaotao_06/article/details/126554820