您的位置：首页 > Web前端 > CSS

CSS盒模型[下]

2016-08-04 15:45 330 查看

效果：

index.html:

<!DOTTYPE 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,我是HTML5</div>

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

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

<div id="a">我是a</div>
<div id="b">我是b</div>
<div id="c">我是c</div>
<div id="d">我是d</div>

<div id="a">我是a</div>
<div id="b">我是b</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;
}

#a{
background:maroon;
float:left;
}

#b{
background:green;
float:left;

}

#c{
background:blue;
float:left;
}

#d{
background:orange;
float:left;
}

#a{
background:maroon;
float:left;
}

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

#a{
background:maroon;
float:right;
}

#b{
background:green;
float:none;
clear:right;
}

///最常用，不受浮动干扰
#a{
background:maroon;
float:right;
}

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

ppt:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航