liuliuya's blog
0%

css提升

发表于 更新于 分类于

前端课程

盒子模型

盒子模型简介

各部分解释

1，Margin(外边距) - 清除边框外的区域，外边距是透明的。
2，Border(边框) - 围绕在内边距和内容外的边框。
3，Padding(内边距) - 清除内容周围的区域，内边距是透明的。
4，Content(内容) - 盒子的内容，显示文本和图像

box model

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

包含内容

边距，边框，填充，和实际内容。

边框样式

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">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rosybrown;

            /*    边框*/
            /*    边框颜色*/
            /*    border-color: purple;*/
            /*!*    边框类型  solid  实线   dotted 点线 dashed 虚线*!*/
            /*    border-style: dashed;*/
            /*!*    边框宽度*!*/
            /*    border-width: 3px;*/

            /*   复合样式(定义的元素四条边都是一样的样式) */
            /*    border: 2px red solid;*/
            /*    可以分别针对上下左右边框进行定义*/
            border-top: blue 1px solid;
            border-bottom: yellow 1px solid;
            border-left: black 1px solid;
            border-right: red 1px solid;

        }

    </style>
</head>
<body>
<div></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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;

        /*    内边距*/
        /*    padding-top: 20px;*/

        /*    复合样式 将四个属性一起设置*/
        /*    padding: 20px;*/
        /*    二个参数  上下  左右*/
        /*    padding: 20px 30px;*/
        /*    三个参数 上 左右  下*/
        /*      padding: 20px 30px 10px;*/
        /*    四个参数 上 右 下 左 （顺时针）*/
            padding: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
<div></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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="clear.css">
    <style>
/*<!--        块级元素转换为内联元素-->*/
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline;
        }

        /*内联元素转为块级元素*/
        span {
             width: 100px;
            height: 100px;
            background-color: hotpink;
            /*display: block;*/
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /*内联块元素  设置宽高有效  不会独占一行*/
            display: inline-block;
        }
    </style>
</head>
<body>
<div>www</div>
<span>www</span>
<div class="box">内联块元素</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            display: inline-block;
            /*    外边距*/
            margin-right: 20px;
            /*    二个参数  上下  左右*/
            /*    三个参数 上 左右  下*/
            /*    四个参数 上 右 下 左 （顺时针）*/
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline-block;
        }


    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>

css浮动

浮动介绍

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

特点

1，使元素脱离文档流，按照指定的(左右)方向移动
2，遇到父级边界或者相邻元素停下来
3，浮动元素不占空间

设置浮动

设置浮动会使元素漂浮起来，最终渲染效果是从上往下看

高度坍塌:
父元素不设置高度，靠子元素撑起高度，当所有子元素都浮动，此时所有子元素脱离文档流，父元素认为自己内部没有元素了，导致父元素没有高度

解决办法:
1，给父级设置高度（固定化不推荐）
2，给父级添加一个空的div填充物（固定化不推荐）
3，给父级添加overflow: hidden（超出部分隐藏，对宽高有一定限制，不推荐）
4，选择器选中父级使用伪元素（最优选择）

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /*设置浮动，浮动只有左右*/
            float: left;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: hotpink;
            /*右浮*/
            /*float: right;*/
            /*1、遇到父级边界或者相邻元素就停下来
            2、脱离文档流，在原本页面不占位置
            3、任何元素都可以浮动，加上浮动之后具有内联块元素特性*/
            float:left;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }

        /*方式三：超出部分影响*/
        /*.box3 {*/
        /*    overflow: hidden;*/
        /*}*/

        /*方法四：伪元素*/
        .box3:after {
        /*    转换为块级元素*/
            display: block;
        /*    清除浮动，但是本质上还是浮动*/
            clear:both;
        /*    */
            content:'';
        }
    </style>
</head>
<body>
<!--方法二：给父级元素设置高度-->
<div class="box3">
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
<!--    方法一：加一个盒子（填充物）-->
</div>
</body>
</html>

css定位

静态定位

静态定位：默认在什么位置就在什么位置，设置无效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         div {
            width: 100px;
            height: 100px;
            background-color: pink;
          /*   静态定位 默认在哪个地方就在哪个地方 设置无效*/
          position: static;
             top: 50px;
        }
    </style>
</head>
<body>
<div></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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        /*    相对定位  参照物是相对于本身之前的位置*/
        /*    没有脱离文档流*/
            position: relative;
            top: 50px;
            left:20px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: navajowhite;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: greenyellow;
            position: relative;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        /*    绝对定位  父相子绝*/
        /*    1、父类元素设置了定位的时候，子元素的参照物对象是父级元素
        2、父类元素没有设置定位，就会一层一层找定位，如果有，就以定位为参照物，如果没有，就以浏览器为参照物*/
        /*    绝对定位脱离文档流*/
            position: absolute;
            top: 40px;
            left:30px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: navajowhite;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        /*    固定定位*/
        /*    参照物是浏览器  脱离了文档流*/
            position: fixed;
            left: 0;
            top:0;
        }
         .box2 {
            width: 100px;
            height: 100px;
            background-color: navajowhite;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            position: relative;
        }

        li {
            width: 200px;
            height: 100px;
            /*取消小圆点*/
            list-style:none;
        }

        .li1 {
            background-color: pink;
            position: absolute;
        /*    显示层级增大*/
            z-index: 2;
        }

        .li2 {
            background-color: red;
            position: absolute;
        }

        .li3 {
            background-color: green;
            position: absolute;
        }

        .li4 {
            background-color: blue;
            position: absolute;
        }
         /*    接下来给所有的子盒子设置绝对定位*/
    /*    这里要注意，这和css浮动是有区别的，而不是所谓的碰到边界就停止
    而是进行覆盖叠加*/
    /*    那么就给其加层级，层级默认都是为1*/
    /*    谁的层级最大,谁就具有主导地位*/
    </style>

</head>
<body>
<ul>
    <li class="li1"></li>
    <li class="li2"></li>
    <li class="li3"></li>
    <li class="li4"></li>
</ul>
</body>
</html>

重置样式

原因：在使用浏览器显示所渲染页面时，本身浏览器就自带了一些样式，导致最终效果和自己所写样式不一致

解决办法：使用别人提供的 ResetCSS 来去掉浏览器的样式

参考ResetCSS：https://meyerweb.com/eric/tools/css/reset/

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
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

中线标准