CSS盒模型

http://my.oschina.net/sheila/blog/384806

http://wenku.baidu.com/link?url=WjgV8wCAOy4wSAkIc0mD3mVAHnKE8-P0ez23ls8ISMsJP75ZMFIHJN_Y9sG4TB3cTC5Y9vPppw_JjsAQcQJ6XPH6GmQdx0MKQVSnzNmLaM3


当我们在css中设计一个块级元素的width和height属性时比如.box{width :100px; height:100px}时,其中的width 和height仅仅是对content部分设置的

在 CSS 中,width 和 height 指的是内容区域(content)的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

背景区域为 Content+Padding

一个div中background-color 和background-image 的区域为width+padding



<style type="text/css">
.testdiv1 {
    background-color:#F00;
    width:200px;
    height:100px;
    
    padding:100px;
    margin:0px;
    
    border-style:solid;
    border-color:#0F0;
    border-width:40px;
}
.testdiv2 {
    background-color:#F00;
    width:200px;
    height:100px;
    
    padding:200px;
    margin:0px;
    
    border-style:solid;
    border-color:#0F0;
    border-width:40px;
}
.background{
    background-image: url(pic/bird.jpg);
    background-size:100% 100%;
}
.floatleft{
    float:left;
}
</style>
</head>
<!--背景红色-->
<!--边框绿色-->
<body >

    <div class="testdiv1 floatleft">中文会自动换行中文会自动换行中文会自动换行中文会自动换行</div>
   <div style="width:200px; height:100px; float:left"></div>
    <div class="testdiv1 background floatleft">中文会自动换行中文会自动换行中文会自动换行中文会自动换行</div>
    
    <div style="clear:both"></div>
    
<div class="testdiv2 floatleft">中文会自动换行中文会自动换行中文会自动换行中文会自动换行</div>
   <div style="width:200px; height:100px; float:left"></div>
<div class="testdiv2 background floatleft">中文会自动换行中文会自动换行中文会自动换行中文会自动换行</div>
    
</body>

阅读更多
个人分类: css
想对作者说点什么? 我来说一句

css盒模型css盒模型

2011年04月19日 9.27MB 下载

没有更多推荐了,返回首页

不良信息举报

CSS盒模型

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭