码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中

时间:2017-01-20 19:19:34      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:tee   padding   orm   有序   toe   column   absolute   时间   ref   

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title></title>
  7     </head>
  8 
  9     <body>
 10         <!--1.清除输入框内的空格-->
 11         <!--<input type="text" onBlur="replaceSpace(this)" />
 12         <script type="text/javascript">
 13             function replaceSpace(obj) {
 14                 obj.value = obj.value.replace(/\s/gi, ‘‘)
 15             }
 16         </script>-->
 17 
 18         <!--2.CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中-->
 19         <!--①单个元素水平居中-->
 20         <!--<style>
 21             .box{
 22                 display: -webkit-flex;
 23                 display: -ms-flexbox;
 24                 display: flex;
 25                 justify-content: center;
 26                 background: #0099cc;
 27             }
 28             h1{
 29                 color: #FFF
 30             }
 31         </style>
 32         <div class="box">
 33             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
 34         </div>-->
 35 
 36         <!--②多个h1元素水平居中-->
 37         <!--<style>
 38             .box{
 39                 display: flex;
 40                 justify-content: center;
 41                 width: 100%;
 42                 background: #0099cc
 43             }
 44             h1{
 45                 font-size: 1rem;
 46                 padding: 1rem;
 47                 border: 1px dashed #FFF;
 48                 color: #FFF;
 49                 font-weight: normal;
 50             }
 51         </style>
 52         <div class="box">
 53             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
 54             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
 55             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
 56         </div>-->
 57 
 58         <!--③多个h1标签并排垂直居中-->
 59         <!--<style>
 60             .box{
 61                 display: flex;
 62                 width: 980px;
 63                 height: 30rem;
 64                 align-items:center;
 65                 background: #0099cc
 66             }
 67             h1{
 68                 font-size: 1rem;
 69                 padding: 1rem;
 70                 border: 1px dashed #FFF;
 71                 color: #FFF
 72             }
 73         </style>
 74         <div class="box">
 75             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
 76             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
 77             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
 78         </div>-->
 79 
 80         <!--④同时包含水平,垂直居中-->
 81         <!--<style>
 82             body{display: flex;justify-content:center}
 83             .box{
 84                 display: flex;
 85                 width: 980px;
 86                 height: 30rem;
 87                 justify-content:center;
 88                 background: #0099cc;
 89                 flex-direction:column;
 90                 align-items:center;
 91             }
 92             h1{
 93                 display: flex;
 94                 justify-content:center;
 95                 font-size: 1rem;
 96                 padding: 1rem;
 97                 border: 1px dashed #FFF;
 98                 color: #FFF;
 99                 width: 28rem
100             }
101         </style>
102         <div class="box">
103             <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
104             <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
105             <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
106             <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
107         </div>-->
108 
109         <!--3.CSS3中的px,em,rem,vh,vw辨析-->
110         <!--1、px:像素,精确显示
111         2、em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端
112           em换算工具:http://www.runoob.com/tags/ref-pxtoemconversion.html
113         3、rem:与em类似,rem是继承根节点的属性(即<html>标签),其他的与em相同
114         4、vh:当前可见高度的1%=1vh
115                  区别是:当div中没有内容时,height=100%,则高度不显示出来
116                当div中没有内容时,height=100vh,则高度依然能显示出来
117         5、vw:当前可见宽度的1%=1vw
118                区别是:当div中没有内容时,width=100%,则宽度不显示出来
119                当div中没有内容时,width=100vh,则宽度依然能显示出来-->
120 
121         <!--4.CSS全局控制-->
122         <!--<style>
123             body {
124                 margin: 0;
125                 padding: 0;
126                 font-size: 14px;
127                 line-height: 22px;
128                 height: auto;
129                 font-family: "微软雅黑";
130                 color: #3e3938;
131                 -webkit-text-size-adjust: none;
132             }
133             body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,form {
134                 padding: 0px;
135                 margin: 0px;
136                 border: 0;
137                 font-size: 14px;
138             }
139             .clear {
140                 clear: both;
141             }
142             a:link,
143             a:visited {
144                 text-decoration: none;
145             }
146             a:hover {
147                 text-decoration: none;
148             }
149             a:focus {
150                 outline: none;
151             }
152             a {
153                 text-decoration: none;
154                 blr: expression(this.onFocus=this.blur());
155             }
156             a {
157                 outline: none;
158             }
159             ul,
160             ol li {
161                 list-style: none;
162             }
163         </style>-->
164 
165         <!--5.css水平垂直居中(绝对定位居中)-->
166         <!--<style>
167             #box {
168                 position: relative;
169                 height: 500px;
170                 background: #ddd;
171             }
172             .child {
173                 width: 100px;
174                 height: 100px;
175                 background: #269ABC;
176                 margin: auto;
177                 position: absolute;
178                 top: 0;
179                 right: 0;
180                 bottom: 0;
181                 left: 0;
182             }
183         </style>
184         <div id="box">
185             <div class="child"></div>
186         </div>-->
187 
188         <!--6.css水平垂直居中(绝对定位居中)-->
189         <!--<style type="text/css">
190             ul li
191             {
192                 list-style-type:georgian;
193                 text-align:left;
194              }
195             .mark
196             {
197                 width:140px;
198                 height:40px;
199                 color:Olive;
200                 text-align:center;
201                 line-height:40px;
202                 margin:5px;
203                 float:left;
204              }
205               .redball
206             {
207                 width:40px;
208                 height:40px;
209                 border-radius:20px;
210                 background-color:Red;
211                 text-align:center;
212                 line-height:40px;
213                 margin:5px;
214                 float:left;
215             }
216             .ball
217             {
218                 width:40px;
219                 height:40px;
220                 border-radius:20px;
221                 background-color:Aqua;
222                 text-align:center;
223                 line-height:40px;
224                 margin:5px;
225                 float:left;
226             }
227             .line
228             {
229                 clear:left;
230              }
231             header
232             {
233                 height:80px;
234                 border:1px solid gray;
235             }
236             .left
237             {
238                 border:1px solid gray;
239                 float:left;
240                 width:30%;
241                 height:480px;
242                 margin-left:0px;
243                 margin-right:0px;
244                 
245             }
246             aside
247             {
248                 text-align:center;
249             }
250             section
251             {
252                 width:69.5%;
253                 float:left;
254                 height:480px;
255                 border:1px solid gray;
256                 margin-left:0px;
257                 margin-right:0px;
258             }
259             footer
260             {
261                 clear:left;
262                 height:60px;
263                 border:1px solid gray;
264             }
265             input[type="button"]
266             {
267                 width:80px;
268                 text-align:center;
269                 margin-top:10px;
270              }
271         </style>
272         
273         <header>
274             <h1>直接插入排序(Straight Insertion Sort)Demo</h1>
275         </header>
276         <aside class="left">
277         
278             <input type="button" id="btnInit" value="Init" onclick="initDiv();" />
279             <br />
280             <input type="button" id="btnSetValue" value="SetValue" onclick="setElementsValue();" />
281             <br />
282             <input type="button" id="btnSort" value="Sort" onclick="setSISortValue();" />
283             <br />
284             <h3>直接插入排序(Straight Insertion Sort)</h3>
285             <ul>
286                 <li>将一个记录插入到已排序好的有序表中,从而得到一个新,记录数增1的有序表。</li>
287                 <li>即:先将序列的第1个记录看成是一个有序的子序列,然后从第2个记录逐个进行插入,直至整个序列有序为止。</li>
288                 <li>如果碰见一个和插入元素相等的,那么插入元素把想插入的元素放在相等元素的后面。所以,相等元素的前后顺序没有改变。</li>
289                 <li>从原无序序列出去的顺序就是排好序后的顺序,所以插入排序是稳定的。</li>
290                 <li>时间复杂度O(n<sup>2</sup>)</li>
291             </ul>
292         </aside>
293         <section id="mainArea">
294         
295         </section>
296         <footer>
297             这是底部信息
298         </footer>
299         <script type="text/javascript">
300             function initDiv() {
301                 var mainArea = document.getElementById("mainArea");
302                 for (var i = 0; i < 8; i++) {
303                     var newDivLine = document.createElement("div");
304                     newDivLine.setAttribute("class", "line");
305                     mainArea.appendChild(newDivLine);
306                     for (var j = 0; j < 9; j++) {
307                         var newDiv = document.createElement("div");
308                         var id = i.toString() + j.toString();
309                         newDiv.setAttribute("id", id);
310                         if (j < 8) {
311                             newDiv.setAttribute("class", "ball");
312                         } else {
313                             newDiv.setAttribute("class", "mark");
314                         }
315                         newDivLine.appendChild(newDiv);
316                     }
317                 }
318             }
319     
320             //初始元素赋值
321             var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1];
322             function setElementsValue() {
323                 for (var i = 0; i < arrTmp.length; i++) {
324                     document.getElementById("0" + i.toString()).innerText = arrTmp[i];
325                 }
326                 document.getElementById("08").innerText = "原始数据";
327             }
328     
329             //排序
330             function setSISortValue() {
331                 for (var i = 1; i < arrTmp.length; i++) {
332                     var m = 0;//为了记录插入的位置,方便标记
333                     //若第i个元素大于i-1元素,直接插入。小于的话,移动有序表后插入
334                     if (arrTmp[i] < arrTmp[i - 1]) {
335                         var x = arrTmp[i]; //复制为哨兵(临时变量),即存储待排序元素  
336                         var j = i - 1;
337                         arrTmp[i] = arrTmp[i - 1]; //先后移一个元素 
338                         //循环查找在有序表的插入位置,如果要插入的值小于,则继续查找,并将元素后移。
339                         while (x < arrTmp[j]) {
340                             arrTmp[j + 1] = arrTmp[j];
341                             j--;
342                         }
343                         //查找完毕后,插入到正确位置(即要插入的值大于前面的元素)
344                         arrTmp[j + 1] = x;
345                         m = j + 1;
346                     } else {
347                         m = i;
348                     }
349                     //显示出来
350                     for (var k = 0; k < arrTmp.length; k++) {
351                         document.getElementById((i).toString() + k.toString()).innerText = arrTmp[k];
352                         if (m == k) {
353                             document.getElementById((i).toString() + (k).toString()).setAttribute("class", "redball");
354                         }
355                     }
356                     document.getElementById((i).toString() + "8").innerText = "第 " + (i).toString() + " 趟排序";
357                 }
358             }
359         </script>-->
360 
361         <!--7.css水平垂直居中(绝对定位居中)-->
362         <!--<style>
363             .container{
364                 width: 500px;
365                 height: 400px;
366                 border: 2px solid #379;
367                 position: relative;
368             }
369             .inner{
370                 width: 480px;
371                 height: 380px;
372                 background-color: #746;
373                 position: absolute;
374                 top: 50%;
375                 left: 50%;
376                 margin-top: -190px;
377                 margin-left: -240px;
378             }
379         </style>
380         <div class="container">
381             <div class="inner"></div>
382         </div>-->
383 
384         <!--8.css水平垂直居中(绝对定位居中)-->
385         <!--<style>
386             div{
387                 width: 300px;
388                 height: 300px;
389                 border: 3px solid #555;
390                 display: table-cell;
391                 vertical-align: middle;
392                 text-align: center;
393             }
394             img{
395                 vertical-align: middle;
396             }
397         </style>
398         <div>
399             <img src="img/HBuilder.png" />
400         </div>-->
401 
402         <!--9.css水平垂直居中(绝对定位居中)-->
403         <!--<style>
404             .container{
405                 width: 300px;
406                 height: 200px;
407                 border: 3px solid #546461;
408                 display: -webkit-flex;
409                 display: flex;
410                 -webkit-align-items: center;
411                 align-items: center;
412                 -webkit-justify-content: center;
413                 justify-content: center;
414             }
415             .inner{
416                 border: 3px solid #458761;
417                 padding: 20px;
418             }
419         </style>
420         <div class="container">
421             <div class="inner">
422                      我在容器中水平垂直居中
423             </div>
424         </div>-->
425 
426 </html>

 

CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中

标签:tee   padding   orm   有序   toe   column   absolute   时间   ref   

原文地址:http://www.cnblogs.com/panda-ling/p/6323459.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!