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股价下跌 ...
一周排行
  • 本周一,一名比利时籍青年被警方逮捕,原因是黑客入侵并且导致政府警方网站临时性瘫痪,更为值得关注的是,该青年还留下了一些嘲笑性的言论,而这些留言最终帮助警方找到了他的真实身份. 据法新社报道,这名青年如今刚刚17岁,他 ...
  • 防火墙是网络上使用最多的安全设备,是网络安全的重要基石.防火墙厂商为了占领市场,对防火墙的宣传越来越多,市场出现了很多错误的东西.其中一个典型的错误,是把防火墙万能化.但2002年8月的<计算机安全>中指 ...
  • 过去的几个月我写了两篇文章,一篇是InnoDB 事务历史相关的危险债务,另一篇是关于MVCC 可能导致MySQL严重的性能问题的真相.在这篇文章里我将讨论一个相关的主题 – InnoDB 事务隔离模式,还有它们与MV ...
  • 1.安装LAMP环境,并安装依赖包. [[email protected] ~]# yum -y install httpd php mysql-server [[email protected] ~]# yum -y inst ...
  • 作为中国游戏产业顶级商务盛会,第十届中国游戏商务大会(简称:CGBC)将于2012年7月25日,28至29日在中国上海拉开帷幕.届时,将有来自全球百余家游戏及相关产业企业的近千名精英汇聚一堂, 参加包括高峰论坛在内的 ...
  • FXO.FXS.E&M三种都是模拟信令,就好比足球比赛有美式足球和英式足球一样. FXS英文全称为Foreign Exchange Station,外部交换站.它是一种话音接口,是数字电话交换系统和POTS电 ...
  • socket 通信实现了  客户端接收数据打印也实现了  但是当多个用户同时连接服务端的时候怎么办呢,既然做了服务端,总不能只是进行一对一的通信吧,这样也没啥用啊. 接下来研究php多线程怎么用,C++实现起来会容易 ...
  • 题目大意: 让每天都能吃到西瓜.最少需要花多少钱. 思路分析: dp[pos] 就表示 要让 前i天每天都有西瓜吃,最少需要花多少钱. 那么如果你买这个西瓜的话.那么这个西瓜能吃的持续时间都要更新一下. 然后再在每个 ...
  •   现在用Gmail一直有种如履薄冰的感觉,生怕哪一天就进不去了.但就象我高考时的作文题目一样,已经习惯了,只能先凑合用着吧.有时无聊就会点点上面的那几个链接,什么文档啊.相册啊,知道在经过漫长的等待后出现的肯定是该 ...
  • 计算包含中文的混合字符串长度,一个中文.英文.数字 均为 1 function resolveContainCn($string, $charset = 'utf-8') { if ($string == '') { ...