CSS布局与技巧精讲-优快云博客

本文深入探讨了CSS布局中常见的问题与解决方案，包括浮动高度坍塌、父子兄弟元素联动等现象，并介绍了position属性的不同使用方式及其效果。此外，还提供了生成三角形的CSS技巧以及文本换行的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

转载于:https://www.cnblogs.com/gg128/p/9575814.html