forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1029-css-4.html
407 lines (345 loc) · 16.1 KB
/
1029-css-4.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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<style type="text/css">
h3 {
font-family: 'Microsoft Yahei';
}
p {
font-size: 30px !important;
letter-spacing: 2px;
line-height: 50px !important;
text-align: left;
}
B {
color: rgb(195, 255, 219);
font-size: 40px !important;
font-weight: 500 !important;
}
a {
color: #fff !important;
}
</style>
</head>
<body>
<img src="./img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>css基础布局常用到的属性</h2>
<h3>定位、层叠、垂直居中</h3>
<h3>小课堂</h3>
分享人：万登胜
</section>
<section>
<p style="text-align: center;">目录</p>
<p style="text-align: center;">1.定位</p>
<p style="text-align: center;">2.层叠</p>
<p style="text-align: center;">3.垂直居中</p>
<!--<p style="text-align: center;">4.浮动</p>-->
<!--<p style="text-align: center;">5.编码实战</p>-->
<!--<p style="text-align: center;">6.扩展思考</p>-->
<!--<p style="text-align: center;">7.参考文献</p>-->
<!--<p style="text-align: center;">8.更多讨论</p>-->
</section>
<!--1.背景介绍-->
<section>
<section>
<h3>1.定位的基本属性</h3>
</section>
<section>
<p>static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。<br>
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。<br>
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。<br>
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。<br>
静态定位(static) ：
static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象。
</p>
<p>
</p>
<p>
</p>
</section>
<section>
<p> 相对定位(relative) ：
relative定位，又称为相对定位，从字面上来解析，我们就可以看出该属性的主要特性：相对。但是它相对的又是相对于什么地方而言的呢？这个是个重点
相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。<br>
绝对定位(absoulte) ：
absoulte定位，也称为绝对定位，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，它会从父类开始找起，直到html标签为止.
</p>
</section>
</section>
<!--2.知识剖析-->
<section>
<h3>2.层叠</h3>
</section>
<!--2.1 JS有哪些数据类型？-->
<section>
<section><B>2.1 z-index属性</B></section>
<section>
<p>z-index属性指定了元素及其子元素的z顺序，而z顺序可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个。</p>
<p>
z-index的属性值<br>
z-index:auto; 默认值<br>
z-index:integer;整数值<br>
z-index:inherit; 继承
</p>
</section>
<section>
<div style="text-indent:2em">
<p style="text-align: left">
它的特性
支持负值；
支持CSS3 animation动画；（并没什么实用应用场景）
在CSS2.1时代，需要和定位元素配合使用
如果不考虑CSS3，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用
z-index只对定位元素有作用。要设置非static的定位属性，z-index才会生效。
</p>
<p style="text-align: left">
如果定位元素z-index没有发生嵌套(并列的)：
<br>
1.后来者居上的准则<br>
2.哪个大哪个上</p>
<p style="text-align: left">
如果定位元素z-index发生嵌套：<br>z-index是数值最大的在最上层
</p>
<p>
</p>
</div>
</section>
<section>
<div style="text-indent:2em">
<p style="text-align: left">
1.背景和边框 —— 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。<br>
2.负z-index值 —— 层叠上下文内有着负z-index值的子元素。<br>
3.块级盒 —— 文档流中非行内非定位子元素。<br>
4.浮动盒 —— 非定位浮动元素。<br>
5.行内盒 —— 文档流中行内级别非定位子元素。<br>
6.z-index: 0 —— 定位元素。 这些元素形成了新的层叠上下文。<br>
7.正z-index值 —— 定位元素。 层叠上下文中的最高等级。
<p style="text-align: left">
</p>
<!--<pre>-->
<!--<code>-->
<!--</code>-->
<!--</pre>-->
</div>
</section>
<section><B></B></section>
<section>
<div style="text-indent:2em">
</div>
</section>
<section>
<!--<p style="text-align: center;">用户信息</p>-->
<!--<p>scope: scope.userInfo <br/> 对应接口 wx.getUserInfo</p>-->
</section>
<section>
<!--<p style="text-align: center;">地理位置</p>-->
<!--<p>scope:scope.userLocation <br/> 对应接口wx.getLocation, wx.chooseLocation </p>-->
</section>
<section>
<!--<p>通讯地址</p>-->
<!--<p>scope: scope.address <br/> 对应接口wx.chooseAddress</p>-->
</section>
<section>
<!--<p>发票抬头</p>-->
<!--<p>scope:scope.invoiceTitle <br/> 对应接口wx.chooseInvoiceTitle</p>-->
</section>
<section>
<!--<p>微信运动步数</p>-->
<!--<p>scope:scope.werun <br/> 对应接口wx.getWeRunData</p>-->
</section>
<section>
<!--<p>录音功能</p>-->
<!--<p>scope:scope.record<br/> 对应接口 wx.startRecord</p>-->
<!--<p>保存到相册</p>-->
<!--<p>scope.writePhotosAlbum<br>wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum</p>-->
<!--<p> 摄像头</p>-->
<!--<p>scope.camera</p>-->
</section>
</section>
<!--3.常见问题-->
<section>
<h3>3.css的div垂直居中的方法，百分比div垂直居中</h3>
<p>
网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中
固定高宽div垂直居中<br>
代码如下<br>
</p>
<pre>
<code>
position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
</code>
</pre>
<section>
<p>
</p>
</section>
</section>
<section>
<B>不固定高宽div垂直居中的方法</B>
<p>
不固定高宽div垂直居中的方法
方法一：
用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。
代码如下
</p>
<pre>
<code>
<div "block" style="height: 300px;">
<div "centered">
<h1>haorooms案例题目</h1>
<p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
</div>
</div>
</code>
</pre>
</section>
<!--4.解决方案-->
<section>
<p>
<pre>
<code>
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 50%;
}
</code>
</pre>
</p>
</section>
<section>
<p>方法三，终极解决方法：<br>
以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！
方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()
demo如下：</p>
</section>
<section>
<pre>
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>haorooms不固定高度div写法</title>
<style>
.center {
position: fixed;
top: 50%;
left: 50%;
background-color: #000;
width:50%;
height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div "center"></div>
</body>
</html>
</code>
</pre>
</section>
<!--6.拓展思考-->
<!--<section>-->
<!--<h3>6.拓展思考</h3>-->
<!--</section>-->
<!--<section>-->
<!--<p>可以在什么地方安置获取授权的按钮？</p>-->
<!--<p>比如在直播小程序中，可以设置当用户发表评论时，获取用户的头像信息和名称，然后调用发表。</p>-->
<!--</section>-->
<!--<section>-->
<!--<h3>7.参考文献</h3>-->
<!--<p>微信公共平台——授权：https://developers.weixin.qq.com/miniprogram/dev/api/authorize-index.html</p>-->
<!--<P>用户拒绝授权CSDN：https://blog.csdn.net/qq_28189091/article/details/75417073</P>-->
<!--</section>-->
<section>
<h3>4.更多讨论</h3>
</section>
<section>
<p style="text-align: center">感谢大家观看
<p style="text-align: center">
<small>BY : 万登胜</small>
</section>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
</div>
</div>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{src: './plugin/markdown/marked.js'},
{src: './plugin/markdown/markdown.js'},
{src: './plugin/notes/notes.js', async: true},
{src: './plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body>
</html>