CSS 日常练习----width

发表于 | 分类于 ，

记录日常 CSS 练习的小知识点 —— width

width

点击预览

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1{
            height: 100px;
            background: red;
        }
        .test2{
            height: 100px;
            background: yellow;
            margin:0 100px;
        }
        .test3{
            height: 100px;
            background: red;
            margin:0 -100px;
        }
        .test4{
            width: 300px;
            height: 100px;
            background: fuchsia;
        }
        .test5{
            width: 300px;
            height: 100px;
            background: yellow;
            margin:0 100px;
        }
        .test6{
            width: 300px;
            height: 100px;
            background: greenyellow;
            margin:0 -100px;
        }
        .test7{
            width: 100%;
            height: 100px;
            background: fuchsia;
        }
        .test8{
            width: 100%;
            height: 100px;
            background: yellow;
            margin:0 100px;
        }
        .test9{
            width: 100%;
            height: 100px;
            background: greenyellow;
            margin:0 -100px;
        }
        .parent{
            width: 300px;
            height: 200px;
            background: red;
            margin-left: 500px;
            border: 1px solid #ffaf7b;
            margin-bottom: 500px;
        }
        .child1{
            width: 150px;
            height: 150px;
            background: #000;
            margin-left: -200px;
        }
        .child2{
            width: 150px;
            height: 150px;
            background: purple;
            float: left;
            /*margin-left: -150px;*/
        }
        .child3{
            width: 150px;
            height: 150px;
            background: yellow;
            margin-top: -150px;
        }
        .child4{
            width: 150px;
            height: 150px;
            background: purple;
            float: left;
            /*margin-left: -150px;*/
        }
        h2{
            margin: 0;
            padding: 0;
        }
        .rt{
            background: red;
        }
    </style>
</head>
<body>
<p></p>
<div class="test1">
    我没有设置宽度
</div>
<div class="test2">
    我没有设置宽度，设置了正margin
</div>
<div class="test3">
    我没有设置宽度，设置了父margin
</div>
<div class="test4">
    我设置宽度
</div>
<div class="test5">
    我设置宽度，设置了正margin
</div>
<div class="test6">
    我设置宽度，设置了父margin
</div>
<div class="test7">
    我设置宽度100%
</div>
<div class="test8">
    我设置宽度100%，设置了正margin
</div>
<div class="test9">
    我设置宽度100%，设置了父margin
</div>
<p>
    这下面这个例子中,虽然子元素1通过margin-left定到了父元素外头，占据尺寸为0，但是它对本行的影响并不会消失
</p>
<div class="parent">
    <div class="child1">

    </div>
    <div class="child2">

    </div>
</div>
<p class="rt">在下面这个例子中，元素1通过margin-top定位到父元素外，占据尺寸为0，不会影响后面的元素</p>
<div class="parent">
    <div class="child3">

    </div>
    <div class="child4">

    </div>
</div>
<h1>通过margin负值改变元素的占据尺寸，当元素的占据尺寸为0时，它对水平方向的影响仍然存在（这个元素仍占据着这一行），对垂直方向无任何影响。
    并且，通过margin负值不占位的元素不会遮挡任何文本内容，但会遮挡文本内容的背景。
</h1>
</body>
</html>
0%