CSS box model布局

来源：互联网发布：网络布线怎么做编辑：程序博客网时间：2024/04/28 01:40

需求：
1：在本实例中，最大的盒子是body，被定义为黑色
2：
body中包含一个div标签，定义长和宽分别为240,360，并且具有5px边框的盒子，居中
3：
在div
标签还有一个<spam>定义的盒子
需要注意span为行内元素，需要转换为块级元素，才使用于盒模型
<span>
具有5像素边框，长和宽分别是父元素的10%，并且距离父元素的上边距为60像素
注意：
css代码是有执行顺序的
比如margin:auto;margin-top:30px;
这样写的话，是先居中后30px,如果倒过来写，居中就没有效果了
<style type="text/css">
body{background:black;}
div{
width:240px;height:360px;
border:5px yellow dashed;
margin:auto;
background:#06F;}
span{
display:block;/*转为块级*/
width:50%;
height:50%;
/*下面2个顺序不能倒过来*/
margin:auto;
margin-top:60px;
border:5px red dashed;
text-align:center;
vertical-align:middle;
background:red;
}
</style>
<body>
<div>
<span>内容</span>
</div>
</body>

0 0