前端基礎(2)css
阿新 • • 發佈:2018-09-03
hidden cti title UNC 被子 偏移 ges border 導致
1.浮動高度坍塌
原因:父元素的高度是被子元素撐開的,當設置浮動後,會脫離文檔流,子元素無法撐起父元素,所以導致高度坍塌
解決方法
.clearfix:before, .clearfix:after{ content: ""; display: table; clear: both; }
2.父子兄弟聯動
解決方法1:padding
解決方法2:float(但是有條件)
解決方法3:position:absolute
解決方法4:border
解決方法5:overflow: hidden;
3.position
相對定位:relative 針對它本身位置的起始點進行了一個偏移
絕對定位:absolute 內聯元素變成塊元素 ,看它父元素的父元素是否有設置定位 ,如果還是沒有就繼續向更高層的祖先元素類推
static:默認值,沒有開啟定位
fixed:開啟元素的固定定位 IE6不支持固定定位 大部分和絕對定位一樣,不同點永遠都會相對於瀏覽器窗口進行定位,不會隨滾動條滾動
z-index屬性在沒有誰在position之前不會生效
4.文本換行
word-break: break-all;
5.三角形
1)頁面
2)代碼
width: 0px; border-width:0 100px 100px; border-style:solid; border-color:transparent transparent red;
6.練習
1)頁面
2)代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> table img { width: 100px; } tr { height: 70px; } td { width: 104px; } #imgBg { position: absolute; z-index: -1; width: 500px; top: 0; left: 0; } #imgbox { position: relative; text-align: center; width: 500px; top: 0; left: 0; } #tbox { margin-left: 40px; padding-top: 35px; width: 500px; } #box { width: 500px; margin: 0 auto; } .active { background: cyan; } </style> <script type="text/javascript" src="../js/jquery1.11.3.js"></script> <script> var pos = { i: 1, n: 0, times: 100, minCycle: 10, cycle: 0 } function roll() { $(".td-" + (pos.i - 1)).removeClass("active"); if(pos.i == 13 && pos.cycle != 0) { pos.i = 1; } $(".td-" + pos.i).addClass("active"); pos.cycle += 1; pos.i += 1; if(pos.n + pos.minCycle - pos.cycle <= 6) { pos.times += 50 } if(pos.n + 10 <= pos.cycle) { clearTimeout(timer); click = true; pos.times = 100; pos.cycle = 0; } else { var timer = setTimeout(roll, pos.times) } } var click = true; $(function() { $("#scroll").click(function() { if(click) { click = false; pos.n = Math.floor(Math.random() * 50); roll(); } }); }) </script> <body> <div id="box"> <div id="imgbox"> <img id="imgBg" src="../images/bg.jpg" /> </div> <div id="tbox"> <table cellpadding="0" cellspacing="0"> <tr> <td class="td td-1"><img src="../images/1.png"></td> <td class="td td-2"><img src="../images/2.png"></td> <td class="td td-3"><img src="../images/7.png"></td> <td class="td td-4"><img src="../images/3.png"></td> </tr> <tr> <td class="td td-12"><img src="../images/6.png"></td> <td id="scroll" colspan="2" rowspan="2"> <a id="scroll" href="#"></a> </td> <td class="td td-5"><img src="../images/5.png"></td> </tr> <tr> <td class="td td-11"><img src="../images/1.png"></td> <td class="td td-6"><img src="../images/5.png"></td> </tr> <tr> <td class="td td-10"><img src="../images/3.png"></td> <td class="td td-9"><img src="../images/6.png"></td> <td class="td td-8"><img src="../images/4.png"></td> <td class="td td-7"><img src="../images/7.png"></td> </tr> </table> </div> </div> </body> </html>
前端基礎(2)css