第16章 CSS盒模型[下]

最新推荐文章于 2024-12-07 02:03:43 发布

最新推荐文章于 2024-12-07 02:03:43 发布 · 115 阅读

阅-H5 专栏收录该内容

40 篇文章

订阅专栏

本文深入探讨了CSS盒模型的相关概念及应用技巧，并通过实例演示如何调整不同元素的显示方式，如块级、行内和行内块等。此外，还介绍了如何使用浮动属性实现元素布局。

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS盒模型[下]</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!-- <div>我是HTML5</div>

sdfsdfsdf

<table border="1">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
</table> -->


<!-- <div>我是块级元素</div> -->

<!-- <span>我是行内元素</span> -->

<!-- <img src="img.png"> -->

<!-- <div>我是块级元素，将要转成行内元素</div> -->

<!-- <span>我是行内元素，将要转成块级元素</span> -->

<!-- <div>我是块级元素，将要转成行内块元素</div>

<span>我是行内元素，将要转成行内块元素</span>

sdfsd -->


<div id="a">我是a</div>

<div id="b">我是b</div>

<!-- <div id="c">我是c</div>

<div id="d">sdfsdfsdf</div> -->

</body>
</html>

style.css

@charset "utf-8";

/*
div {
	background: silver;
	width: 200px;
	height: 200px;
	/*visibility: visible;
	visibility: hidden;
	visibility: collapse;
}

table tr:first-child {
	visibility: hidden;
	visibility: collapse;
}
*/

/*div {
	background: silver;
	width: 200px;
	height: 200px;
}*/

/*span {
	background: silver;
	width: 200px;
	height: 200px;
}*/

/*img {
	width: 100px;
	height: 50px;
}*/

/*div {
	background: silver;
	width: 200px;
	height: 200px;
	display: inline;
}*/

/*span {
	background: silver;
	width: 200px;
	height: 200px;
	display: block;
}*/

/*div,span {
	background: silver;
	width: 200px;
	height: 200px;
	display: inline-block;
}

span {
	display: none;
}*/

div {
	width: 200px;
	height: 200px;
}

/*#a {
	background: maroon;
	float: left;
}
#b {
	background: green;
	float: left;
}
#c {
	background: blue;
	float: left;
}
#d {
	height: 300px;
	background: orange;
	float: left;
}*/

/*#a {
	background: maroon;
	float: right;
}
#b {
	background: green;
	float: left;
}*/

#a {
	background: maroon;
	float: left;
}
#b {
	background: green;
	float: none;
	clear: both;
}