前端布局和小细节

发表于 | 更新于 | 分类于 | 评论数：

前端布局和小细节

文档流

所谓的文档流

指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流

也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

document flow => normal flow
本质:普通流/常规流

流:水流 河流 泥石流 => 自上而下(连续的),连续的
文档:页面主体

文档流:一个连续具有逻辑上下的页面整体
理解:出现在页面中的显示内容,均可以理解为在文档流中(片面的)

概念:将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。

BFC:Block formatting context
概念:由block-level box参与布局,同一区域(容器空间)中,相互影响,且不会对区域外产生影响

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>文档流</title>
	<style type="text/css">
		.box {
			width: 200px;
			height: 200px;
			background-color: orange;
			/*默认BFC水平布局方向:从左至右*/
			/*margin-left: 50px;*/

			/*更改BFC水平布局方向:从右至左*/
			float: right;
			margin-right: -50px;
		}
		.b1 {
			width: 200px;
			height: 200px;
			background: red;
			margin-left: 10px;
		}
		.bb1, .bb2 {
			width: 50px;
			height: 50px;
			background: cyan;
			float: left;
		}
		.bb1 {
			margin-left: 20px;
			margin-right: 20px;
		}
		.bb2 {
			margin-left: 20px;
		}
	</style>
</head>
<body>
	

	<!-- b1与b2 同在一个区域 | bb1与bb2 同在一个区域 -->
	<div class="b1">
		<div class="bb1"></div>
		<div class="bb2"></div>
	</div>
	<div class="b2">
		
	</div>

	<div class="box"></div>
</body>
</html>

父子都是块级元素

1553831829157

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <title>fortest</title>
    <style>
        div.parent{
            width: 500px;
            height: 300px;
            background: #ccc;
        }
        div.son{
            width: 100%;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

真相

这时，子元素设置为了父元素width的100%，那么子元素的宽度也是500px；

　　但是如果我们把子元素的width去掉之后，就会发现子元素还是等于父元素的width。也就是说，对于块级元素，子元素的宽度默认为父元素的100%。

当我们给子元素添加padding和margin时，可以发现宽度width是父元素的宽度减去子元素的margin值和padding值。

　　毫无疑问，如果去掉子元素的height，就会发先子元素的高度为0，故height是不会为100%的，一般我们都是通过添加内容（子元素）将父元素撑起来。

父：块级元素 子：内联元素

1553832523847

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <title>...</title>
    <style>
        div.parent{
            width: 500px;
            height: 300px;
            background: #ccc;
        }
        img{
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="parent">
        <img class="son" src="./img/icon.jpg"></img>
    </div>
</body>
</html>

父级坍塌现象

1553879807237

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">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }
        .container{
            border:1px solid red;width:300px;
        }
        #box1{
            background-color:green;float:left;width:100px;height:100px;
        }
        #box2{
            background-color:deeppink; float:right;width:100px;height:100px; 
        }
         #box3{
             background-color:pink;height:40px;
         }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。

弹性布局flex布局

1553933563264

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>弹性布局flex布局</title>
	<style type="text/css">
		.container {
			width: 600px;
			height: 600px;
			border: 1px solid black;
			margin: 0 auto;
		}
		.item {
			/*width: 200px;*/
			/*height: 200px;*/
			/*border-radius: 50%;*/
			background-color: orange;
			font-size: 80px;
		}
		/*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/
		.container {
			display: flex;
		}
		.item {
			/*默认只能一行排列,所有item总宽不允许超出container宽度*/
			/*width: 300px;*/
			/*默认情况下item可以不规定高度,高度会自适应父级*/
			/*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/
		}
		/*.it1, .it3 {
			flex-grow: 1;
		}
		.it2 {
			flex-grow: 3;
			background-color: pink
		}*/
		/*container属性*/
		.container {
			/*flex-direction: row | row-reverse | column | column-reverse; 方向*/
			/*flex-direction: column-reverse;*/

			/*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/
			/*flex-wrap: wrap;*/

			/*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/
			/*item为沾满父级区域*/
			justify-content: space-around;
		}
		/*item属性*/
		.item {
			/*width: 300px;
			height: 200px;*/
		}

		.item {
			width: 100px;
		}
	</style>
	<!-- 总结 -->
	<!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item -->
	<!-- 2.container设置item的排列方向flex-direction -->
	<!-- 3.item对于container的空间占比flex-grow -->
</head>
<body>
	<!-- 学习目的: -->
	<!-- 之前学习的盒模型布局(display) float布局 position都不能很好的解决block垂直居中的问题,flex布局擅长 -->

	<div class="container">
		<div class="item it1">1</div>
		<div class="item it2">2</div>
		<div class="item it3">3</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
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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>响应式布局</title>
	<style type="text/css">
		/*基本样式块*/
		/*.box {
			max-width: 1200px;
			width: 95%;
			margin: 0 auto;
			background-color: red!important;
		}
		.it {
			width: 300px;
			height: 300px;
			font: 900 50px/300px 'STSong';
			text-align: center;
			float: left;
			border-radius: 50%;
			background-color: orange;
		}
		.box:after {
			content: "";
			display: block;
			clear: both;
		}*/
		
		html, body {
			margin: 0;
		}
		.it {
			height: 300px;
			background-color: orange;
			font: 900 50px/300px 'STSong';
			text-align: center;
			border-radius: 50%;
			float: left;
		}
		.box:after {
			content: "";
			display: block;
			clear: both;
		}
		/*屏幕宽度超出1200px*/
		@media only screen and (min-width: 1200px) {
			/*1.在响应式布局内,css语法同正常样式表语法*/
			/*2.响应式布局之间存在不同屏幕尺寸的限制,使用样式相互不影响*/
			/*解释:满足当前屏幕尺寸时,该样式块起作用,不满足时,则样式块失效*/
			/*3.当响应式布局中样式块起作用时,会与正常样式块设置协同布局,遵循选择器的优先级规则*/
			.box {
				background-color: pink;
			}
			.it {
				width: 25%;
			}

			/*原则:*/
			/*1.采用响应式布局的页面,基本样式块只做共性样式设置
			需要根据页面尺寸进行适应变化的样式均有响应式布局处理*/
			/*2.要进行响应式布局的页面要处理所有屏幕尺寸下的样式块*/
		}
		/*屏幕宽度间于600至1200px*/
		@media only screen and (min-width: 600px) and (max-width: 1200px) {
			.box {
				background-color: brown;
			}
			.it {
				width: 30%;
				margin: 0 calc(10% / 6);
			}

		}
		/*屏幕宽度小于600px*/
		@media only screen and (max-width: 600px) {
			.box {
				background-color: cyan;
			}
			.it {
				width: 80%;
				margin-left: 10%;
				min-width: 300px;
			}
		}
	</style>
</head>
<body>
	 
	<div class="box">
		<div class="it">1</div>
		<div class="it">2</div>
		<div class="it">3</div>
		<div class="it">4</div>
		<div class="it">5</div>
		<div class="it">6</div>
		<div class="it">7</div>
		<div class="it">8</div>
		<div class="it">9</div>
		<div class="it">10</div>
		<div class="it">11</div>
		<div class="it">12</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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*======================================初始化=====================*/
            *{
             margin: 0;
             padding: 0;
                  }

            body{
                font-size: 12px;
            }

            a{
              text-decoration: none;
            }

        /*======================================header区域设置=====================*/
        .header{
               height: 44px;
               width: 100%;
               background-color: #2459a2;
               position: fixed;
               top:0;
               left: 0;
        }



        .header_content{
            width: 80%;
            height: 44px;
            background-color: #2459a2;
            margin: 0 auto;
            line-height: 44px;
            position: relative;

        }


/*======header区part1:logo ===========*/


               .logo{

                    float: left;
                    width: 121px;
                    height: 23px;
                    margin-top: 9px;

                }

/*======header区part2:action-menu =====*/

               .action-menu{
                    float: left;
                    margin-left: 30px;
                }

                .action-menu a.tb{
                            color: #c0cddf;
                            padding: 0 10px;
                            text-align: center;
                            margin-left: -3px;
                            display: inline-block;


                        }

                .action-menu a.tb:hover {
                    color: #fff;
                    background-color: lightslategrey;

                }

                 .action-menu a.active, .action-menu a.active:hover {
                                color: #fff;
                                background-color:#204982;;

                            }

/*======header区part3:key-search =====*/

                 .key-search{
                         margin-top: 5px;
                         float: right;
                    }


                 .key-search a.search-icon-box, .search-txt {
                        float: left;
                    }

                .search-txt {

                    color: #333;
                    line-height: 25px;
                    padding: 2px 2px 2px 5px;
                    height: 25px;
                    width: 91px;

                }

                .key-search a.search-icon-box {
                    border: 1px solid #e0e0e0;
                    background-color: #f4f4f4;
                    width: 30px;
                    height: 31px;
                    border-left: 0;
                }


                .key-search a.search-icon-box span.search-icon{
                    background: url("images/icon.png") no-repeat 0 -197px;
                    float: left;
                    height: 12px;
                    width: 11px;
                    margin-left: 10px;
                    margin-top: 9px;
                }

/*======header区part4:action-nav =====*/

                .action-nav {
                       float: right;
                       margin-right: 10px;
                    }

                 .action-nav a {
                        color: white;
                        padding: 14px 18px;

                    }

                .action-nav a:hover{
                    background-color: lightslategrey;
                    color: white;
                }
 /*======================================content区域设置=====================*/

             .content-box {
                    background-color: #ededed;
                    padding-top: 44px;
                    height: 100%;
                }

             .content {
                    width: 960px;
                    margin: 0 auto;
                    height: auto!important;
                    overflow: hidden;
                    min-height: 713px;
                    padding: 6px 28px;
                    background-color: #fff;
                    /*overflow: hidden;取消后看看效果*/
                }

        /*===============================响应式布局=====================*/



         @media(max-width:1050px) {


          .action-menu a.item{

              display: none;
              background-color: gold;
              border: dashed 1px rebeccapurple;

              color: black;





          }

             .action-menu a.active{

                 padding: 0 25px;

             }

             .action-nav{

                 float: left;

                 margin-left: 80px;

             }

             .key-search{
                 float: right;
                 margin-right: 100px;
             }




          .action-menu:hover a.item{
              display: block;


          }



         }



        @media(max-width:810px) {

             .key-search{
                 display: none;
             }

            .action-nav{
                display: none;
            }
        }



    </style>
</head>
<body>



    <!--header结构-->
    <div class="header">

         <div class="header_content">

               <div class="logo">
                   <a href="/"><img src="images/logo.png" alt=""></a>
               </div>

               <div class="action-menu">

                        <a href="#" class="tb active">全部</a>
                        <a href="#" class="tb item">42区</a>
                        <a href="#" class="tb item">段子</a>
                        <a href="#" class="tb item">图片</a>
                        <a href="#" class="tb item">挨踢1024</a>
                        <a href="#" class="tb item">你问我答</a>
               </div>

               <div class="key-search">

                    <form action="/" method="post">
                        <input type="text" class="search-txt">

                        <a href="#" class="search-icon-box" >
                            <span class="search-icon"></span>
                        </a>
                    </form>

               </div>

               <div class="action-nav">

                    <a href="#" class="register-btn">注册</a>
                    <a href="#" class="login-btn">登录</a>
               </div>

         </div>
    </div>


    <!--content结构-->

    <div class="content-box">

        <div class="content">


        </div>
        
    </div>



</body>
</html>

display

1
2
3
4
5
6
7
8
块:1.独行显示 2.支持宽高,宽默认适应父级,高默认由子级或内容撑开 3.设置宽高后,一定采用设置的宽高
		内联:1.同行显示 2.不支持宽高
		内联块:1.同行显示,之间有间距 2.支持宽高,宽高由内容撑开 3.设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放

		嵌套规则:
		块可以嵌套所有类型(p一般只允许嵌套内联)
		内联一般只嵌套内联
		内联块一般只作为最内层级
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>display</title>
	<!-- 默认值 -->
	<style type="text/css">
		
		div {
			/*块*/
			display: block;
			/*自适应父级可用content的宽度*/
			/*width: auto;*/
			/*默认0*/
			/*height: 0px;*/
		}
		span {
			/*内联*/
			display: inline;
			/*不支持宽高*/
		}
		img {
			/*内联块*/
			display: inline-block;
			width: auto;
			height: auto;
		}
	</style>
	<!-- 验证宽高设置 -->
	<style>
		.sup {
			/*width: 100px;*/
			/*height: 100px;*/
			background-color: orange
		}
		.sub {
			width: 200px;
			height: 200px;
			background-color: cyan
		}
		.s1, .s2 {
			width: 200px;
			height: 200px;
			background-color: brown
		}
		img {
			/*width: 350px;*/
			height: 350px;
		}
	</style>
</head>
<body>
	<div></div>
	<span></span>
	<img src="./img/icon.jpg" alt="">
	<img src="./img/icon.jpg" alt="">

	<div class="sup">
		<div class="sub"></div>
	</div>
	<span class="s1">123</span>
	<span class="s2">456</span>

</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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>隐藏</title>
	<style type="text/css">
		/*盒子间会相互影响*/
		div {
			width: 100px;
			height: 100px;
		}
		.d1 {
			background-color: red;
			/*以背景颜色透明度隐藏,不需要掌握*/
			/*盒子还在,内容或子级标签均会被显示*/
			background-color: transparent;
		}
		.d2 {
			background-color: orange;
			/*以盒子透明度隐藏:0~1*/
			/*盒子真正意思上透明,但盒子区域占位还在*/
			opacity: 0;
		}
		.d3 {
			background-color: cyan;
			/*盒子从文档中移除,盒子的区域占位消失*/
			/*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/
			display: none;
		}
		.d4 {
			background-color: yellow;
		}
		/*需求:通过悬浮body让d3重新显示*/
		/*1.明确控制的对象 2.确定对该对象的修饰 3.找出修饰与对象的关系*/ 
		/*body:hover .d3*/
		.d1:hover ~ .d3 {
			display: block;
		}
	</style>
</head>
<body>
	<div class="d1">内容</div>
	<div class="d2">内容</div>
	<div class="d3"></div>
	<div class="d4"></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
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>同志浮动</title>
	<style>
		.box {
			padding: 20px;
			width: 1000px;
			border: 5px dashed red;
			margin-bottom: 10px;
		}

		.item {
			width:100px;
			height:100px;
			background:#ccc;
			border:1px solid orange;
	
		}

		.item02 {
			/*设置浮动*/
			/*float:left;*/
			width:50px;
			background:#ccc;
		}
		.item03 {
			width:80px;
			background:#369;
		}

		.item04 {
			width:100px;
			background:#f90;
		}


		.box02 .item02 {
			float:left;
		}


		/*第二个浮动*/
		.box03 .item03 {
			float: left;
		}

		/*第三个元素浮动*/
		.box04 .item04 {
			float: left;
		}

		/*第三个元素 向右浮动*/
		.box05 .item04 {
			float: right;
		}

		/*第二个元素向右浮动*/
		.box06 .item03 {
			float: right;
		}
		

		/*整体向左浮动*/
		.box07 .item {
			float: left;
		}
		.box07 .item02 {
			height: 150px;
		}
	</style>
</head>
<body>
	<h1>浮动</h1>
	<hr>

	<div class="box box01">
		<div class="item item02">1</div>
		<div class="item item03">2</div>
		<div class="item item04">3</div>
	</div>

	<h2>第一元素浮动</h2>
	<div class="box box02">
		<div class="item item02">1</div>
		<div class="item item03">2</div>
		<div class="item item04">3</div>
	</div>


	<h2>第二元素浮动</h2>
	<div class="box box03">
		<div class="item item02">1</div>
		<div class="item item03">2</div>
		<div class="item item04">3</div>
	</div>

	<h2>第三元素浮动</h2>
	<div class="box box04">
		<div class="item item02">1</div>
		<div class="item item03">2</div>
		<div class="item item04">3</div>
	</div>

	<div style="clear:both"></div>

	<h2>第三元素向右浮动</h2>
	<div class="box box05">
		<div class="item item02">1</div>
		<div class="item item03">2</div>
		<div class="item item04">3</div>
	</div>
	
	<div style="clear:both"></div>

	<h2>第二元素向右浮动</h2>
	<div class="box box06">
		<div class="item item02">1</div>
		<div class="item item03">2</div>
		<div class="item item04">3</div>
	</div>


	<h2>全部向左浮动</h2>
	<div class="box box07">
		<div class="item item02">1</div>
		<div class="item item03">2</div>
		<div class="item item04">3</div>
	</div>

</body>
</html>

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

1553834205185

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            /*float: left;*/

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

首字符环绕

1553825516508

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>
	<style>
		p {
			width: 800px;
			padding: 10px;
			border: 1px solid #ccc;
		}

		p strong {
			font-size:3em;
			width: 40px;
			/*浮动*/
			float: left;
		}
	</style>
</head>
<body>
	<h1>同志环绕</h1>
	<hr>

	<p>
		<strong>L</strong>orem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid rerum temporibus, harum quia consequatur suscipit at facilis minima eveniet! Consectetur suscipit veniam doloremque, eligendi, porro soluta cupiditate voluptates eos? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laborum ipsum adipisci recusandae dicta dignissimos repellat rerum similique dolores quod molestiae voluptatum sed, animi sequi, mollitia asperiores voluptates, quasi quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius vel nam assumenda, rerum ullam officiis molestiae veniam, quos tempora necessitatibus illum minima reprehenderit explicabo dignissimos! Quas consequuntur, doloribus qui, sequi eum tenetur quia. Laborum quisquam, sunt iusto ipsa provident quos amet commodi officiis consequatur eveniet? Sunt ipsum molestias aperiam esse saepe, dolorum corporis nostrum tempora rerum laboriosam mollitia culpa doloribus fuga temporibus assumenda natus? Incidunt a, numquam quisquam aspernatur. Placeat, nihil, excepturi! Consequatur illum accusamus eveniet praesentium dolores doloribus, suscipit assumenda veniam, laudantium aspernatur quas. Nemo quo debitis, sint cupiditate natus, id, facere, soluta a tenetur dolores magnam recusandae! Itaque!
	</p>
</body>
</html>

文字环绕图片

1553825581748

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字环绕图片</title>
	<style>
		article {
			width: 600px;
			padding: 10px;
			border: 2px solid #ccc;
		}

		article img {
			width:100px;
			float: left;
			margin-right:10px;
		}
	</style>
</head>
<body>
	<h1>同志新闻</h1>
	<hr>

	<article>
		<img src="../../dist/images_one/10.jpg" alt="">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta sit eos magni alias, nesciunt veniam at reiciendis eius. Labore inventore, sunt nulla ullam! Voluptate iste, libero unde tempora corporis autem voluptatum similique repellat perspiciatis ducimus, vero natus aperiam aliquam, ut reiciendis nesciunt. Quod cum, enim. Voluptatum quae eum repellendus quo voluptatem dolorem earum ut modi inventore sint reiciendis culpa recusandae ea neque harum nesciunt alias, totam, omnis nemo! Tempore, sunt expedita nemo minus nihil recusandae temporibus maiores quia numquam dolores voluptatibus eaque voluptatem debitis eos, nisi, quod quas. Corporis laudantium dolore, ipsam hic commodi, ullam illum necessitatibus nesciunt repudiandae!
		</p>
	</article>
</body>
</html>

浮动的特点

块状元素文本变成浮动宽度的字体不能默认被字体撑开

1553825790223

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			border: 1px solid red;
			float: left;
		}
	</style>
</head>
<body>
	<h1>浮动的特点</h1>
	<hr>

	<div class="box">
		Lorem ipsum dolor
	</div>
</body>
</html>

<!-- 块状元素文本变成浮动宽度的字体不能默认被字体撑开 -->

浮动影响

1553825882109

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动影响</title>
	<style>
		header {
			/*居中 左右是auto*/
			margin: 0 auto;

			width: 800px;
			/*height: 100px;*/
			
			color: #000;
			text-align: center;

			border: 1px solid red;

			/*消除子元素浮动 对老子的影响*/
			/*float: left;*/
			overflow: auto; /*消除子元素浮动对父元素的影响*/
		}

		.logo {
			float: left;
			width: 200px;

			/*行高100px， 对.logo里面的文字*/
			/*对块状元素还可以居中文字*/
			line-height: 100px;
			background: #f90;
			height: 100px;
		}
		.logo h1 {
			/*h1的行高，继承了父元素的行高 对h1里面的文字进行设置*/
			margin: 0;
		}
		.banner {
			float: right;
			width: 580px;
			line-height: 100px;
			background: #369;
		}


		/*导航*/
		nav {

			/*清楚前面的浮动对老子的影响*/
		/*	clear: both;
			clear: left;
			clear: right;
*/
			/*clear: right;*/
			/*clear: left;*/
			clear: both;

			margin:10px auto;
			width:800px;
			text-align: center;
			background:pink;
			padding:10px 0px;
		}
		/*去掉默认浏览器ul的margin和padding*/
		nav ul {
			list-style:none;
			margin:0;
			padding:0;
		}

		nav li {
			display: inline-block;
		}

		
	</style>
</head>
<body>
	<!--页头-->
	<header>
		<div class="logo">
			<h1>同志交友</h1>
		</div>
		<div class="banner">
			Lorem ipsum dolor sit amet,
		</div>
	</header>

	<!--导航-->
	<nav>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">博客</a></li>
			<li><a href="#">论坛</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">举报我们</a></li>
		</ul>
	</nav>
</body>
</html>

多个浮动超过父元素的宽

1553825986119

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">
	<title>浮动</title>
	<style>
		.list {
			border: 2px solid red;
			width: 600px;
			list-style: none;
			padding: 0;
		}

		.list li {
			width:100px;
			height: 100px;
			background:#ccc;
			border:1px solid green;

			float: left;
		}
	</style>
</head>
<body>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

布局实例

1553828503596

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局实例</title>
	<style>
		body {
			margin: 0px;
		}
		/*容器*/
		.container {
			margin: 0 auto;
			width: 1000px;
		}

		/*页头*/
		.page-header {
			overflow: hidden;
			background: #999;
			color: #fff;
		}
		
		/*页面主体*/
		.page-main {

		}
		
		/*页面侧边栏*/
		.aside {
			float: left;
			width:300px;
			height: 400px;
			border-right: 1px solid #999;
		}
		
		/*页面内容*/
		.content {
			float: right;
			width:680px;
			height:400px;
		}
		
		/*页脚*/
		.page-footer {
			/*border:1px solid red;*/
			clear: both;
			overflow: hidden;
			color: #fff;
			background:#999;
		}
	</style>
</head>
<body>
<!--body自带一个margin-->
	<div class="container">
		<div class="page-header">
			<h1>老男孩牛逼</h1>
		</div>
		<div class="page-main">

			<div class="aside">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut obcaecati a illum optio soluta expedita aperiam numquam, laudantium illo impedit natus dolore ducimus pariatur nostrum necessitatibus itaque nihil eligendi. Officiis.
				</p>
			</div>
			<div class="content">
				<h2>牛逼高端上档次</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum doloremque non, perspiciatis modi sunt illo eveniet! Culpa quibusdam voluptatem laborum vel, nemo quidem ducimus impedit ad, perferendis rerum ab nostrum.
				</p>
			</div>
		</div>
		<div class="page-footer">
			<h2>牛逼的老男孩</h2>
		</div>
	</div>
</body>
</html>

布局实例2

1553830128471

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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局实例</title>
	<style>
		/*通用的设置*/
		* {
			margin: 0;
			padding: 0;
		}
		body {
			font:12px 'Microsoft YaHei',sans-serif;
			text-align: center;
		}

		.container {
			width: 1000px;
			margin: 0 auto;
		}

		.left {
			float: left;
		}
		.right {
			float: right;
		}
		.bg {
			background: #ccc;
		}
		.clearfix {
			height: 10px;
			clear: both;
		}
		.border {
			border: 1px solid #ccc;
		}

		/*end 通用设置*/

		/*page-header 页头*/
		.logo {
			width: 200px;
			height: 100px;
			margin-right: 10px;
		}
		.banner1 {
			width: 580px;
			height: 100px;
			margin-right: 10px;
		}
		.banner2 {
			width: 200px;
			height: 100px;
		}

		/*end page-header*/

		/*page-nav 导航*/
		.page-nav {
			height: 40px;
		}
		/*end page-nav*/

		/*page-main*/
			/*page-content*/
		.page-content {
			width: 790px;
		}
		.page-aside {
			width: 200px;
		}
		.item01 {
			width: 388px;
			height: 198px;
		}
		.item02 {
			width:188px;
			height: 198px;
			margin-right:10px;
		}
		.item02-last {
			margin-right: 0px;
		}
			/*endpage-content*/
			
			/*page-aside 侧边栏*/
		.item03 {
			height:128px;
		}
			/*endpage-aside*/
		


		/*end page-main*/

			
		/*page-footer 页脚*/
		.page-footer {
			height: 60px;
		}
		/*end page-footer*/


	</style>
</head>
<body>
	
	<div class="container">
		<!--页头-->
		<div class="page-header">
			<div class="left bg logo">LOGO</div>
			<div class="left bg banner1">BANNER01</div>	
			<div class="left bg banner2">BANNER02</div>	
		</div>
		<!--end 页头-->
			
		<div class="clearfix"></div>
		
		<!--页面导航-->
		<div class="bg page-nav">
			导航	
		</div>
		<!--end 页面导航-->

		<div class="clearfix"></div>
		
		<!--页面主体，里面分为 左边的主要内容和右边的侧边栏-->
		<div class="page-main">
			<!--主要内容-->
			<div class="left page-content">
				<div class="row">
					<div class="left border item01">
						栏目一</div>
					<div class="right border item01">栏目二</div>
				</div>

				<div class="clearfix"></div>

				<div class="row">
					<div class="left border item02">栏目三</div>	
					<div class="left border item02">栏目四</div>	
					<div class="left border item02">栏目五</div>	
					<div class="left border item02 item02-last">栏目六</div>	
				</div>

			</div>

			<!-- 侧边栏 -->
			<div class="right page-aside">
				<div class="border item03">栏目七</div>
				<div class="clearfix"></div>
				<div class="border item03">栏目八</div>
				<div class="clearfix"></div>
				<div class="border item03">栏目就</div>
			</div>
		</div>
		<!--end 页面主体结束-->

		<div class="clearfix"></div>
			
		<!--页脚-->
		<div class="bg page-footer">页脚</div>
		<!--end 页脚-->
	</div>
</body>
</html>

相对定位

设置为相对定位的元素

1553830665711

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style>
		.box {
			width:150px;
			height: 150px;
			border:2px solid red;
			background: #ccc;

			/*设置为相对定位的元素*/
			position: relative;
			/*left:100px;
			top:100px;*/
			/*right:20px;*/
			/*bottom: 100px;*/
			left:100px; /*优先级高*/
			/*right:100px;*/
		}
	</style>
</head>
<body>
	<h1>同志-相对定位</h1>
	<hr>

	<div class="box"></div>

	<hr>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facere vel exercitationem, sit saepe ut consectetur molestiae temporibus quasi earum praesentium. Molestiae autem, atque tempore. Veritatis odit ratione autem ipsam.</p>
</body>
</html>

绝对定位

去找他的上级定位如果没有就定位html

脱离文档流

1553830781907

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style>
		#box {
			width: 800px;
			padding: 20px;
			border: 2px solid red;

			/*设置相对定位*/
			position: relative;
			/*position: absolute;*/
		}
		p {
			border:1px solid #ccc;
			padding: 20px;
		}

		#inner {
			width: 100px;
			height:100px;
			background: #f90;
			
			/*绝对定位*/
			position: absolute;
			left: 0px;
			top: 0px;
		}
	</style>
</head>
<body>
	<h1>绝对定位</h1>
	<hr>

	<div id="box">
		
		<div id="inner">绝对定位</div>
		
		<hr>

		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, vitae veritatis porro perferendis harum sed minima eos exercitationem, praesentium id corporis deserunt eligendi laboriosam aliquid eius nesciunt temporibus a incidunt.
		</p>
	</div>
</body>
</html>

对象不会随着滚动

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

​ 在理论上，被设置为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
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .back{
            background-color: wheat;
            width: 100%;
            height: 1200px;
        }
        span{
            display: inline-block;
            width: 80px;
            height: 50px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rebeccapurple;
            color: white;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>
<body>


<div class="back">
    <span>返回顶部</span>
</div>
</body>
</html>

绝对定位例子

1553830912836

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box {
			position: relative;

			width:200px;
			height: 300px;
			border: 1px solid #ccc;
			background: url('../../dist/images_one/10.jpg') no-repeat;
			background-size:100% 100%;
		}
		.title {
			/*设置定位*/
			position: absolute;
			width: 180px;
			bottom:0px;

			padding:10px;
			text-align: center;
			background:rgba(0,0,0,.5);
			color: #fff;
		}
		.title h2 {
			/*margin:0;*/
		}

	</style>
</head>
<body>
	<div id="box">
		<div class="title">
			<h2>小猴</h2>
			<p>
				小猴是个可爱的女子
			</p>
		</div>
	</div>
</body>
</html>

固定定位

1553831010968

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">
	<title>同志</title>
	<style>
		#nav {
			width:100px;
			height: 200px;
			background: pink;

			/*设置固定定位 脱硫文档流*/
			position: fixed;
			/*position: absolute;*/
			left:20px;
			top:50px;
			/*right:20px;
			bottom:30px;*/
		}
	</style>
</head>
<body>
	<h1>固定定位</h1>
	<hr>


	<div id="nav"></div>

	<hr>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam similique ex omnis excepturi voluptas deserunt ea nihil fugiat veritatis sapiente hic inventore, harum possimus vitae, ipsam explicabo aut architecto ipsum.
	</p>

	<div style="height:2000px"></div>
</body>
</html>

z-index

1553831112651

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>
	<style>
		.box01 {
			position: relative;
			width: 200px;
			height: 200px;
			background: pink;

			/*设置z-index*/
			z-index:100;
		}

		.box02 {
			position: absolute;
			width: 300px;
			height: 100px;
			background: red;
			left: 10px;
			top: 20px;

			/*不服*/
			z-index: 1000;
		}
	</style>
</head>
<body>
	
	<div class="box01">box01 相对定位 老子就想在上面</div>
	<div class="box02">box02 绝对定位</div>
</body>
</html>

屏幕中央

1553831214694

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实现元素 在页面中 水平和垂直都居中</title>
	<style>
		.box {
			width: 400px;
			height: 300px;
			background: pink;
		
			/*水平居中 */
			/*margin:100px auto;*/
			
			/*绝对定位*/
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left:-200px; /*负 元素宽度的一半*/
			margin-top:-150px; /*负 元素高度的一半*/
		}
	</style>
</head>
<body>
	

	<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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>字体图标</title>
	<!-- 使用第三方库 -->
	<!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
	<!-- <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> -->
	<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
	<style type="text/css">
		.i1 {
			/*font-size: 30px;*/
			color: orange;
		}
	</style>
</head>
<body>
	<i class="i1 fa fa-spinner fa-4x fa-spin"></i>
</body>
</html>
图灵python大海老师 wechat
python分享公众号
坚持原创技术分享，您的支持将鼓励我继续创作！