CSS盒模型

转载 2016年05月31日 00:15:58

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盒模型PPT

  • 2014-05-23 15:14
  • 543KB
  • 下载

CSS盒模型详细解析

  • 2011-01-25 14:37
  • 2.02MB
  • 下载

CSS 盒模型

CSS 盒模型 转自:http://www.qianduan.net/css-box-model.html CSS 盒模型 网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看...

CSS_盒模型

  • 2017-01-28 13:41
  • 904B
  • 下载

CSS学习-盒模型的概念

  • 2008-11-03 23:02
  • 847KB
  • 下载

【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC)

引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题...

css3-盒模型实例.html

CSS基础-盒模型 14

//联系人:石虎  QQ: 1224614774昵称:嗡嘛呢叭咪哄 盒模型 边框属性 什么边框? 边框就是环绕在标签宽度和高度周围的线条 边框属性...

CSS选择符与盒模型

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)