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股价下跌 ...
一周排行
  • 简述:排序算法,参见http://www.cplusplus.com/reference/algorithm/?kw=algorithm 待解决问题:各种排序算法的实现 /* template <class R ...
  • 综合应用: 考生文件夹下存在一个数据库文件"samp3.mdb",已建立两个关联表对象("档案表"和"工资表")和一个查询对象("qT" ...
  • 背景 现在DDOS攻击越来越频繁,无需什么技术即可就行DDOS拒绝服务经常一些站长反映自己的网站经常出现mysql 1040错误,他的在线用户才不到一千,mysql配置也没问题.一般遇到这站情况就需注意了,你的网站可 ...
  • 在eclipse中安装m2eclipse 在eclipse import中选择导入maven项目 注意导入时eclipse会报一个错 > An internal error occurred during: & ...
  • IIS(Internet Information Server)作为当今流行的Web服务器之一,提供了强大的Internet和Intranet服务功能,如何加强IIS的安全机制,建立一个高安全性能的Web服务器,已成 ...
  • C++ casts那些事儿   C/C++编译器类型隐式转换我想大家都一定很熟悉了.写C++的程序,要么是依靠编译器进行类型隐式转换,要么自己显示将类型进行转换,但是很少用到cast.最近看到一些代码经常使用cast ...
  •        机房收费系统完成了,但是我是在笔记本上敲得,没有实现异地发布,结局只能是被PASS掉了~回来重新导出自己的数据库到台式机上,由于我笔记本装的SQL和台式机版本是不一样的,所以遇到一些问题,具体解决方法请 ...
  • 1 套接字是通信端点的抽象 创建套接字: int socket(int domain,int type,int protocol) domain:通信域 AF_INET.AF_INET6.AF_LOCAL.AF_UN ...
  • UDP是一个简单的面向数据报的传输层协议:进程的每个输出操作都正好产生一个UDP 数据报,并组装成一份待发送的IP数据报.IP数据报的数据部分放的是UDP数据报.如下图 UDP数据包的格式如下图: 一个Wiresha ...
  • String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) String 1,Stirng是对象不是基本数据类型 2,String是final类,不能 ...