关闭

CSS盒模型

45人阅读 评论(0) 收藏 举报
分类:

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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4246次
    • 积分:87
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:22篇
    • 译文:0篇
    • 评论:0条
    文章分类