前端基礎（2）css

最後更新：2018-09-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：images index rem oat 浮動 info 解決代碼 random

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More