首页 > Web开发 > 详细

第16章 CSS盒模型[下]

时间:2015-07-30 02:28:22      阅读:251      评论:0      收藏: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;
}

?

?

?

?

第16章 CSS盒模型[下]

原文:http://onestopweb.iteye.com/blog/2231132

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!