IFE_2016_1_8
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IFE_2016_1_8相关的知识，希望对你有一定的参考价值。
一开始毫无头绪，看了评分最高的团队的代码，觉得很棒。
思考了一下有没有优化的方法，发现权衡之下并没有。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>IFE_2016_1_8</title> 6 </head> 7 <style> 8 body{ 9 margin: 0; 10 width: 100%; 11 } 12 13 .constr{ 14 box-sizing: border-box; 15 padding: 10px; 16 width: 100%; 17 } 18 19 .fix:before .fix:after{ 20 content: ""; 21 display: table; 22 clear: both; 23 } 24 .outer{ 25 box-sizing: border-box; 26 padding: 10px; 27 float: left; 28 } 29 30 .inner{ 31 height: 50px; 32 background: #eee; 33 border: 1px solid #c5c5c5; 34 } 35 36 @media (min-width: 769px){ 37 .outer-bs-4{ 38 width: 33.3333%; 39 } 40 41 .outer-bs-3{ 42 width: 25%; 43 } 44 45 .outer-bs-6{ 46 width: 50%; 47 } 48 49 .outer-bs-1{ 50 width: 8.3333%; 51 } 52 53 .outer-bs-2{ 54 width: 16.6666%; 55 } 56 } 57 58 @media (max-width: 768px){ 59 .outer-ss-6{ 60 width: 50%; 61 } 62 63 .outer-ss-12{ 64 width: 100%; 65 } 66 67 .outer-ss-3{ 68 width: 25%; 69 } 70 71 .outer-ss-2{ 72 width: 16.6666%; 73 } 74 75 .outer-ss-8{ 76 width: 66.6666%; 77 } 78 } 79 </style> 80 <body> 81 <div class="constr fix"> 82 <div class="outer outer-bs-4 outer-ss-6"> 83 <div class="inner"></div> 84 </div> 85 <div class="outer outer-bs-4 outer-ss-6"> 86 <div class="inner"></div> 87 </div> 88 <div class="outer outer-bs-4 outer-ss-12"> 89 <div class="inner"></div> 90 </div> 91 <div class="outer outer-bs-3 outer-ss-3"> 92 <div class="inner"></div> 93 </div> 94 <div class="outer outer-bs-6 outer-ss-6"> 95 <div class="inner"></div> 96 </div> 97 <div class="outer outer-bs-3 outer-ss-3"> 98 <div class="inner"></div> 99 </div> 100 <div class="outer outer-bs-1 outer-ss-2"> 101 <div class="inner"></div> 102 </div> 103 <div class="outer outer-bs-1 outer-ss-2"> 104 <div class="inner"></div> 105 </div> 106 <div class="outer outer-bs-2 outer-ss-8"> 107 <div class="inner"></div> 108 </div> 109 <div class="outer outer-bs-2 outer-ss-3"> 110 <div class="inner"></div> 111 </div> 112 <div class="outer outer-bs-6 outer-ss-3"> 113 <div class="inner"></div> 114 </div> 115 </div> 116 </body> 117 </html>
他们的代码使用box-sizing: border-box来解决了20px间距的问题，使用伪元素来清除浮动（我打算把父级元素改为overflow：hidden来解决，其实差不多，而且据说overflow有一些坑）
对于类的命名，我选择了张鑫旭对类名的命名规律。（感觉在于大的工程中会比较有用，然而这是一个小任务）
后来想到还有一种方法可以不使用浮动，就是将outer的display设置为inline-block，不过缩进有些辣眼睛，相较之下还是原作者的方法比较好，使用这样的缩进的原因请看css table-cell自动补充元素问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE_2016_1_8</title> </head> <style> body{ margin: 0; width: 100%; } .constr{ box-sizing: border-box; padding: 10px; width: 100%; overflow: hidden; } .outer{ box-sizing: border-box; padding: 10px; display: inline-block; } .inner{ height: 50px; background: #eee; } @media (min-width: 769px){ .outer-bs-4{ width: 33.3333%; } .outer-bs-3{ width: 25%; } .outer-bs-6{ width: 50%; } .outer-bs-1{ width: 8.3333%; } .outer-bs-2{ width: 16.6666%; } } @media (max-width: 768px){ .outer-ss-6{ width: 50%; } .outer-ss-12{ width: 100%; } .outer-ss-3{ width: 25%; } .outer-ss-2{ width: 16.6666%; } .outer-ss-8{ width: 66.6666%; } } </style> <body> <div class="constr"> <div class="outer outer-bs-4 outer-ss-6"> <div class="inner"></div> </div><div class="outer outer-bs-4 outer-ss-6"> <div class="inner"></div> </div><div class="outer outer-bs-4 outer-ss-12"> <div class="inner"></div> </div><div class="outer outer-bs-3 outer-ss-3"> <div class="inner"></div> </div><div class="outer outer-bs-6 outer-ss-6"> <div class="inner"></div> </div><div class="outer outer-bs-3 outer-ss-3"> <div class="inner"></div> </div><div class="outer outer-bs-1 outer-ss-2"> <div class="inner"></div> </div><div class="outer outer-bs-1 outer-ss-2"> <div class="inner"></div> </div><div class="outer outer-bs-2 outer-ss-8"> <div class="inner"></div> </div><div class="outer outer-bs-2 outer-ss-3"> <div class="inner"></div> </div><div class="outer outer-bs-6 outer-ss-3"> <div class="inner"></div> </div> </div> </body> </html>
一下是辣眼睛的版本。
以上是关于IFE_2016_1_8的主要内容，如果未能解决你的问题，请参考以下文章
IFE_part1(task1-7)_about.html总结
IFE_part2_JavaScript_数组去重/trim()