css3盒模型

css2.1盒模型:

     当你定义盒子的宽高后;如果添加padding和border值后盒子的宽高会被撑大

     盒子的高度=定义的高度+(padding-top + padding-bottom)+(border-top + border-bottom);

     盒子的宽度=定义的宽度+(padding-left+ padding-right)+(border-left+ border-right);

css3.0盒模型:

       当你定义盒子高度后;如果添加padding和border值后盒子大小不会改变,他会向内容区收缩。

       盒子的高度=你定义的高度;盒子的宽度度=你定义的宽度;

用法:

   box-sizing:用来控制元素的盒模型解析模式

    box-sizing:content-box border-box inherit;

    默认值是content-box:维持W3C的标准盒模型 也就是css3.0以前的版本布局

    border-box:重新定义盒模型组成的模式。

    inherit:使元素继承父元素的盒模型模式。

    写法(考虑兼容): 

         -moz-box-sizing: border-box;
         --webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -ms-box-sizing:border-box;
         box-sizing: border-box;

实例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3布局</title>
</head>
<style>
*{margin:0;padding:0;}
.wrapper{
width:960px;
margin:0 auto;
color:#fff;
background:#cccccc;
text-align:center;
-moz-box-sizing: border-box;
--webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
}
.header{
background:#38382e;
margin-bottom: 10px;
border:10px solid red;
padding:10px;
width:100%;height:100px;
box-sizing:inherit;
}
.sidebar{
float:left;
width:220px;
margin:0px 20px 10px 0px;
height:300px;
background:#5d33cf;
border:10px solid red;
padding:10px;
box-sizing:inherit;
}
.content{
float:left;
width:720px;
margin-bottom: 10px;
height:300px;
background:#c8ca30;
border:10px solid red;
padding:10px;
box-sizing:inherit;
}
.footer{
clear:both;
width:100%;
height:100px;
background:#cc4ad5;
border:10px solid red;
padding:10px;
box-sizing:inherit;
}
</style>
<body>
<div class="wrapper">
<div class="header">页眉</div>
<div class="sidebar">左边栏</div>
<div class="content">主内容</div>
<div class="footer">页脚</div>
</div>
</body>
</html>

效果:

    css3盒模型

更多相关文章
  •     1MD5 创建MD5类   #import @interface CJMD5 : NSObject +(NSString *)md5HexDigest:(NSString *)input; @end #import CJMD5.h #import @implementation CJMD5 ...
  • 近日,安恒信息安全小组发现Apache Struts2导致大量使用此框架的网站沦陷,Apache Struts2 框架是在2010年7月14日被发现存在一个严重命令执行漏洞,但随之出现了防范技术,最近随着struts2带回显功能的POC被公布,出现大量的利用工具,并导致大量使用此框架的网站沦陷,并呈 ...
  • 前言       最近买回家的票,其实的年前的时候也是同样的情况.我不知道为什么,我是把密码忘记了,然后我点击忘记密码找回密码,从过年时候到现在每次提交都给我的提示是已经给我邮箱发了邮件,让我去查看邮件修改密码.但是每次都没有收到,每次我都试了好几次一直就是收不到邮件.今天我给人工服务打了个电话,他 ...
  • 一.数字转换成字符串 ①Number类定义的toString()方法:这个方法可以接收表示转换基数(radix,范围在2~36之间)的可选参数,如果不指定此参数,转换规则将是基于十进制.例如:   ②Number类定义的toFixed()方法:这个方法可以指定小数点后的位数.例如:   ③Numbe ...
  •   1.地图框选搜索: 这是空间查询,在地图上框选一定的范围,然后搜索出在这个范围之内的所有信息,搜索到的详细信息在列表框显示出来   2.属性查询:   3.数据库展示:   4.绘制图形: 地图上绘制各种不同形状的graphic,并且可以保存起来,导出                   备注: ...
  • 易网科技讯 4月20日消息,据国外媒体报道,由于亚太地区业务受到挫折,德国商业软件厂商SAP今年第一季度的盈利和营收均未达到预期.正当客户开始向云计算服务转移的时候,SAP亚太地区高级销售经理的离职让其竞争对手暂时赢得先机.SAP周五发誓要使其亚太地区业务重回正轨.在周五的股市交易中,SAP股价下跌 ...
一周排行
  • 七月标题:Swift语言进入TIOBE指数排名16 TIOBE 2014年7月编程语言排行榜今天发布,苹果公司的新的编程语言Swift发布一个月内就进入TIOBE指数,名列位置16,前三名则没有变化,C. Java. ...
  • Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 47090   Accepted: 13602 Case Time Limit: 5000M ...
  • 转载请注明:  http://blog.csdn.net/typename/article/details/7794958 下面是google关于这个问题的说法: Try changing your code so ...
  • 找每一位的循环节,求lcm Double Dealing Time Limit: 50000/20000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
  •     Android L:     昨天凌晨Google刚刚确认Android L就是Android Lollipop(5.0).   Google之前就已经提前推出了Android L Developer Pre ...
  • 通常一个方法只能返回一个值,但是如果在某些时候,我们想要返回多个值,例如某个方法将一个浮点数分割成一个整数和一个小数返回去.这个时候我们就要用到out关键字. 如果用ref也可以解决,但是用ref需要在初始化的时候虚 ...
  • A Simple Problem with Integers Time Limit: 5000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...
  • (一)委托模式简介 委托模式是基本的设计模式之一.委托,即是让另一个对象帮你做事情. 许多其他的模式,如状态模式.策略模式.访问者模式本质上是在更特殊的场合采用了委托模式. 委托模式使得我们可以用聚合来替代继承,ja ...
  •   一个好的框架,不仅能帮助程序开发节约很多时间,同时也能减少bug的引入.这个框架是在ssy同学的基础上进行了一些改进: 主要在于一下几点(会随着项目开发逐渐更新这篇文章) 1. 应用了反射机制,实现网络Task的 ...
  • 二分图匹配(匈牙利算法) 1.一个二分图中的最大匹配数等于这个图中的最小点覆盖数 König定理是一个二分图中很重要的定理,它的意思是,一个二分图中的最大匹配数等于这个图中的最小点覆盖数.如果你还不知道什么是最小点覆 ...