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股价下跌 ...
一周排行
  • (央视财经<你从哪里来>)央视财经春节期间推出了财经人物纪录片<你从哪里来>专访了70岁的IT人柳传志,对于网络上传说的柳传志在联想控股持股3.4%,为最大自然股东,折算一下纸面财富超过四五十 ...
  • 背景 很多时候,项目需要在不同时刻,执行一个或很多个不同的作业. Windows执行计划这时并不能很好的满足需求了,迫切需要一个更为强大,方便管理,集群部署的作业调度框架. 介绍 Quartz一个开源的作业调度框架, ...
  • 本报特约记者 吴心韬 伦敦报道巨无霸美国微软公司,本月将迎来公司30多年历史上第三位首席执行官,同时也是第一位印裔舵手--微软原云计算和企业业务主管萨蒂亚·纳德拉.今年46岁的纳德拉已在微软供职22年,为人谦逊低调. ...
  • mysqldump -h主机名  -P端口 -u用户名 -p密码 (–database) 数据库名 > 文件名.sql  在window上需要通过CMD进入mysql安装目录下的bin目录下执行这些命令 备份M ...
  • Xenapp配置及站点配置 安装完成后在菜单中找到管理器access management console打开图图,首次打开即弹出第一次配置向导 单击next Xenapp安装在本机,默认next 添加本机机器-ad ...
  • 为一个客户做了关于每个差异otu在时间点上变化的折线图,使用python第一次做批量作图的程序,虽然是很简单的折线图,但是也是第一次使用matplotlib的纪念. ps:在第一个脚本上做了点小的改动,加上了分类信息 ...
  •        MSMC默认配置为L2,根据用户需要能配置成L3.由于配置为L3只是做了地址映射,所以物理上的访问时间应该还是一个数量级的,相差不大.这里的L2和L3的区别应该是指L2只能被L1D和L1P Cache, ...
  • 导读: function getpychar(char) tmp=65536+asc(char) if(tmp>=45217 and tmp=45253 and tmp=47761 and tmp=46318 ...
  •   1, Dijkstra算法 (1) 处理正边权…可以处理负边权,但必须是负边只存在源点s连出去的边 (2) 时间复杂度……O(V^2) 例题: In: 输入包括多组数据.每组数据第一行是两个整数N.M(N< ...
  •       贝叶斯统计理论是英国数学家托马斯-贝叶斯于18世纪中叶提出并逐步完善的一种数学理论.贝叶斯决策是在信息不完全的情况下,对部分未知的状态用主观概率估计,然后用贝叶斯公式对发生的概率进行修正,最后再利用期望值 ...