前端基础（2）css
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>
