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
原文地址：https://www.cnblogs.com/gg128/p/9575814.html