第16章 CSS盒模型[下]

iteye_17658

于 2015-07-29 13:41:41 发布

阅读量94

点赞数

分类专栏：阅-H5

阅-H5 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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;
}