Fork me on GitHub

HTMLandCSS

发表于 | 分类于
字数统计 4.2k 字 | 阅读时长 21 分钟

HTML&CSS学习笔记

任务-2020.07.30

块级元素，内联(行内)元素，行内块，浮动，怎样清除浮动

Block块级元素

特点

1、块级元素独占一行（默认情况下占父元素的）

2、块级元素可以使用CSS属性中的width、height

3、块级元素可以使用CSS属性中的margin，padding

常用的块级元素

p 段落元素

h1 - h6 正文标题元素

hr 水平分割（水平分割线）

div 划分分割

table 表格标签

ol 有序列表

ul 无序列表

dl 定义列表

举例

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习块级元素</title>
    <style>
        /* .classname 表示类选择器 */
        
        .block-elements {
            width: 480px;
            height: 320px;
            /* 能够居中 */
            margin: auto;
            /* 内边距 */
            padding: 10px 5px 8px 12px;
            background-color: darksalmon;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="block-elements"> </div>
    <div class="block-elements"> </div>
</body>

</html>

inline内联（行内）元素

特点

只会更改水平方向，使用宽高没有用

常用的内联元素

input输入标签

strong语气强调标签

em 感情强调标签

span 文字容器+标签

sup，sub 上标，下标

a 锚点标签

img 图像元素

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inline内联标签</title>
    <style>
        .inline-anchor {
            width: 320pd;
            height: 64px;
            padding-top: 100px;
            padding-bottom: 100px;
        }
    </style>
</head>

<body>
    <!-- href超链接引用，url统一资源定位器  -->
    <!-- 发现使用宽高并没有任何变化 -->
    <a href="#">这里是一个锚点标签</a>
    <a href="#">这里是一个锚点标签</a>
</body>

</html>

inline-block行内块

特点

属性

block

inline

inline-block

float浮动

特点

块级元素 -> 内联元素：将不同行的元素放置在一行

浮动：将不同行的元素放置在一行

浮动（压缩）：压缩的是自己的空间

浮动的元素：不在标准文档流之中（网页无法识别原有的空间）

float: none| left | right

clear: left | right | both

举例

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习使用浮动和清除浮动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .shangpin ul li {
            list-style: none;
        }
        
        .shangpin {
            width: 1000px;
            background-color: pink;
            margin: 10px auto;
        }
        
        .shangpin h1 {
            font-size: 25px;
        }
        
        .shangpin h1 span {
            float: right;
            margin-right: 20px;
            font-size: 15px;
        }
        
        .shangpin ul li {
            margin-top: 20px;
            float: left;
        }
        
        .shangpin ul li p {
            font-size: 15px;
            color: purple;
        }
    </style>
</head>

<body>
    <div class="shangpin">
        <h1>商品列表<span>更多</span></h1>
        <ul>
            <li>
                <img src="./img/1.jpg" />
                <p>这是第一张图片</p>
            </li>
            <li>
                <img src="./img/2.jpg" />
                <p>这是第二张图片</p>
            </li>
            <li>
                <img src="./img/7.jpg" />
                <p>这是第三张图片</p>
            </li>
            <li>
                <img src="./img/7.jpg" />
                <p>这是第四张图片</p>
            </li>
        </ul>
    </div>

</body>

</html>

重点总结

1、浮动会使元素提升一个层级. 例如：两个块级元素排列，上边的元素设置了浮动，它自身会提升一个层级，把他占用的位置空出来. 下边的元素如果没有设置浮动，就会占用上边元素原来的位置；如果设置了浮动，它的层级和上边的是平级的，现象是左右排列

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
35
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .o1 {
            /* width: 1000px; */
            background-color: salmon;
        }
        
        .i1 {
            width: 100px;
            height: 400px;
            background-color: skyblue;
        }
        
        .i2 {
            width: 100px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="o1 ">
        <div class="i1"></div>
        <div class="i2"></div>
    </div>
</body>

</html>

div1使用浮动：

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
35
36
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .o1 {
            width: 1000px;
            background-color: rgb(114, 250, 148);
        }
        
        .i1 {
            width: 100px;
            height: 400px;
            background-color: skyblue;
            float: left;
        }
        
        .i2 {
            width: 100px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="o1 ">
        <div class="i1"></div>
        <div class="i2"></div>
    </div>
</body>

</html>

div2使用浮动：

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
35
36
37
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .o1 {
            width: 1000px;
            background-color: rgb(114, 250, 148);
        }
        
        .i1 {
            width: 100px;
            height: 400px;
            background-color: skyblue;
            /* float: left; */
        }
        
        .i2 {
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
        }
    </style>
</head>

<body>
    <div class="o1 ">
        <div class="i1"></div>
        <div class="i2"></div>
    </div>
</body>

</html>

  1. 浮动会影响父级的高(前提是父级元素没有设置高度，他的高度又子元素撑起来)

  2. 清除浮动(影响了谁的高度，在谁上清浮动)

    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .o1 {
                width: 1000px;
                background-color: rgb(114, 250, 148);
            }
            
            .i1 {
                width: 100px;
                height: 400px;
                background-color: skyblue;
                float: left;
            }
            
            .i2 {
                width: 100px;
                height: 200px;
                background-color: red;
                float: left;
            }
            
            /*清除浮动代码*/
            .clearfloat:after {
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0
            }
            
            .clearfloat {
                zoom: 1
            }
            /*兼容低版本IE*/
        </style>
    </head>

    <body>
        <div class="o1 clearfloat">
            <div class="i1"></div>
            <div class="i2"></div>
        </div>
    </body>

    </html>

任务-2020.07.31

定位：相对定位，绝对定位，固定定位，写个例子；

各种选择器讲讲：比如元素的，关系的，属性的，伪类的

position定位

position: static(默认值，没有定位) | relative（相对位置）| absolute（绝对位置）| fixed（固定位置）

relative相对位置

相对于自身给的位置，left是指往右边，top指望下边（其实就是位置相反）

代码

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>relative相对定位学习</title>
    <style>
        div {
            border: 1px solid red;
        }
        
        #father {
            width: 302px;
            height: 302px;
            margin: auto;
            margin-top: 200px;
        }
        
        #father div {
            height: 100px;
            width: 100px;
            background-color: violet;
        }
        
        #father .d2 {
            position: relative;
            left: 200px;
            top: -102px;
        }
        
        .d4 {
            position: relative;
            left: 200px;
            top: -102px
        }
        
        .d5 {
            position: relative;
            left: 102px;
            top: -304px;
        }
    </style>
</head>

<body>
    <div id="father">
        <div class="d1">第一个div</div>
        <div class="d2">第二个div</div>
        <div class="d3">第三个div</div>
        <div class="d4">第四个div</div>
        <div class="d5">第五个div</div>

    </div>
</body>

</html>

absolute 绝对定位

是否存在已经定位的祖先元素

不存在：参照浏览器定位

存在：参照已经存在的祖先元素进行定位

参照浏览器定位
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>absolute绝对定位</title>
    <style>
        .d1 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: teal;
            position: absolute;
            right: 100px;
            bottom: 300px;
        }
    </style>
</head>

<body>
    <div class="d1">absolute绝对定位</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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>absolute绝对定位学习2</title>

    <style>
        #father {
            height: 600px;
            width: 600px;
            border: 1px solid red;
            position: relative;
            left: 500px;
            top: 30px;
        }
        
        .d1 {
            height: 100px;
            width: 200px;
            background-color: rgb(255, 0, 179);
        }
        
        .d2 {
            height: 100px;
            width: 200px;
            background-color: rosybrown;
            position: absolute;
            right: 30px;
        }
        
        .d3 {
            height: 100px;
            width: 200px;
            background-color: tan;
        }
    </style>
</head>

<body>
    <div id="father">
        <div class="d1">div1</div>
        <div class="d2">div2</div>
        <div class="d3">div3</div>
    </div>
</body>

</html>

fixed固定位置

永远参照浏览器定位

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fixed固定定位学习</title>
    <style>
        .d1 {
            height: 200px;
            width: 100%;
            background-color: violet;
            position: fixed;
            bottom: 0px;
        }
        
        .d2 {
            height: 200px;
            width: 200px;
            background-color: yellowgreen;
            position: fixed;
            top: 300px;
            left: 1700px;
        }
    </style>
</head>

<body>
    <div class="d1">div1</div>
    <div class="d2">div2</div>
</body>

</html>

重点总结

坐标系是向右和向下为正(left,top相当于坐标原点)

相对定位：

  1. 如果没有父级元素，可以认为参照系是浏览器; 如果有可以认为是父级元素

  2. 不会释放位置(即使设置了偏移)

    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
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .d1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
            }
            
            .d2 {
                width: 100px;
                height: 100px;
                background-color: violet;
            }
        </style>
    </head>

    <body>
        <div class="d1"></div>
        <div class="d2"></div>
    </body>

    </html>
1
2
3
4
5
6
7
8
.d1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            top: 10px;
            left: 10px;
       }

绝对定位

  1. 最常见的是子绝父相(父元素占位置, 子元素偏移)

固定定位

​ 参考水平垂直居中案例 —— 就是不论页面怎么改变，都在中心展示

第一种方法（这种方法用的比较多）

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 400px;
            height: 200px;
            background-color: yellowgreen;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="d1">

    </div>
</body>

</html>

第二种方法—-忘了

选择器

id选择器 > 标签选择器

元素选择器

标签选择器：在CSS中以标签的形式书写

选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

书写方法：

1
2
3
4
html {color: salmon; background-color: skyblue;}
div {width: 200px;height: 200px;background-color: pink;border: 1px;}

<div>这是元素选择器</div>

关系选择器

包含选择器（E F）

选择所有被E元素包含的F元素，中间用空格隔开

书写方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul li{ color: darkolivegreen;}

   <ul>
       <li>葡萄</li>
       <li>香蕉</li>
       <li>苹果</li>
       <li>橙子</li>
   </ul>
   <ol>
       <li>葡萄汁</li>
       <li>香蕉汁</li>
       <li>苹果汁</li>
       <li>橙汁</li>
   </ol>

子选择器（E>F）

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

书写方法：

1
2
3
4
5
6
7
8
9
 div > a{ color: lawngreen;}

<div>
        <a href="#">子元素1</a>
        <p>
            <a href="#">孙元素</a>
        </p>
        <a href="#">子元素2</a>
    </div>

相邻选择器（E+F）

选择紧跟E元素后的F元素，用+表示，选择相邻的第一个兄弟元素。 

1
2
3
4
5
 h1 + p{ color: mediumpurple; }

<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>

兄弟选择器（E~F）

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开

书写方法：

1
2
3
4
5
6
7
.div1 h1 ~ p{ color:orange;}

<div class="div1">
   <h1>兄弟选择器</h1>
   <p>兄弟选择器第一个元素</p>
   <p>兄弟选择器第二个元素</p>
</div>

属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

书写方法（以title为例）：

1
span[title="ti_2"] {color: darkblue; }<span title="ti_1">这里是第一个span</span><span title="ti_2">这里是第二个span</span>

伪类选择器

锚伪类：

a:link {color: #FF0000} / 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 /

提示：**在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

超链接 - :focus 的使用

语法：

1
2
3
4
> selector : pseudo-class {property: value}
> /* CSS类也可与伪类搭配使用 */
> selector.class : pseudo-class {property: value}
>

书写方法：

1
2
3
 a.a2:hover{ color: black; }

<a class="a2" href="#">CSS Syntax</a>

1596444900155

1596444924302

id选择器

ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

书写方法：

1
2
3
#p1 { width: 200px; height: 100px; color: yellow;}

<p id="p1">这里是id选择器</p>

多元素选择器

即是多个选择器使用统一样式，中间用逗号分隔开

书写方法(使用id选择器举例)：

1
2
3
4
#p1,#p2 {width: 400px;height: 10px; color: brown; }

<p id="p1">这里是id选择器</p>
<p id="p2">这是尝试使用多元素选择器，使id为p1，p2的样式相同</p>

class类选择器

class类选择器前面有一个.号

书写方法：

1
2
3
.a1{ color: crimson;}

<a class="a1" href="#">这里是一个类锚点</a>

transform变形函数

  • translate(xpx,ypx) ：平移 translateX(px) or translateY(px)

  • scale(x,y) ：放缩 scaleX() or scaleY()

  • rotate(度数deg)：旋转 默认顺时针

    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画学习</title>

        <style>
            .box {
                width: 960px;
                height: 500px;
                border: 1px solid red;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            /* nth-child 选择器，even代表偶数，odd代表基数*/
            
            div img:nth-child(even) {
                width: 200px;
                height: 150px;
                /* border: 2px solid red; */
            }
            
            div img:nth-child(odd) {
                width: 150px;
                height: 150px;
                /* border: 2px solid blue; */
            }
            
            div img {
                border: 4px solid #ddd;
                /* padding 内间距 */
                padding: 10px;
                background-color: #fff;
            }
            /* 选择器 hover 照片悬浮 */
            /* id选择器 */
            
            div img:hover {
                /* box-shadow：水平X偏移，Y偏移，偏移面积 颜色*/
                box-shadow: 5px 5px 5px rgb(221, 221, 221);
                transform: scale(1.5) rotate(40deg);
            }
            /* 标签选择器 */
            /* 单独对第一张图片进行操作 */
            
            div img:nth-child(1) {
                position: absolute;
                left: 250px;
                top: 250px;
                transform: rotate(-15deg);
            }
            
            div img:nth-child(6) {
                position: absolute;
                left: 0px;
                top: 300px;
                transform: scale(1.5px) rotate(-30deg);
            }
        </style>


    </head>

    <body>
        <div class="box" id="box">
            <img src="./img/1.jpg" />
            <img src="./img/2.jpg" />
            <img src="./img/3.jpg" />
            <img src="./img/4.jpg" />
            <img src="./img/5.jpg" />
            <img src="./img/6.jpg" />

        </div>
    </body>

    </html>

transition过渡

transition: XX过度啥（all全部，width宽，color颜色） XX多长时间 XX速度 XX延迟时间

速度：ease：由快到慢

​ ease-in：越来越快

​ ease-out：越来越慢

​ linear：匀速

​ ease-in-out：先加速后减速

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
35
36
37
38
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画学习2---过渡</title>
    <style>
        #father img {
            background-color: pink;
            width: 200px;
            height: 200px;
            transition: all 10s ease-out;
        }
        
        #father img:hover {
            background-color: red;
            width: 200px;
            height: 200px;
            /* 过度啥（all全部，width宽），多长时间，速度，延迟时间
                速度：ease：由快到慢
                    ease-in：越来越快
                    ease-out：越来越慢
                    linear：匀速
                    ease-in-out:先加速后减速 */
            /* transition: width 5s ease-out -3s; */
            transform: rotate(180deg);
        }
    </style>
</head>

<body>
    <div id="father">
        <img src="./img/1.jpg" />
    </div>
</body>

</html>

animation动画

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
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation学习</title>

    <style>
        .father img {
            width: 100px;
            height: 200px;
            animation: x 2s infinite;
        }
        
        @keyframes x {
            0% {
                width: 0px;
                transform: translateX(100px);
            }
            25% {
                width: 20px;
                transform: translateX(200px);
            }
            50% {
                width: 50px;
                transform: translateX(300px);
            }
            75% {
                width: 100px;
                transform: translateX(400px);
            }
            100% {
                width: 150px;
                transform: translateX(500px);
            }
        }
    </style>
</head>

<body>
    <div class="father">
        <img src="./img/1.jpg" />
    </div>
</body>

</html>