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