前端基礎（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