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股价下跌 ...
一周排行
  • 递推算法 给定一个数的序列H0,H1,…,Hn,…若存在整数n0,使当n>n0时,可以用等号(或大于号.小于号)将Hn与其前面的某些项Hi(0<i<n)联系起来,这样的式子就叫做递推关系. 递推算法 ...
  • 向表中输入数据  1.以数据表视图方式输入数据 2.创建查阅列表字段 3.  获取外部数据  (1)导入数据 导入数据是将其它系统的数据库数据导入到Access数据库中. 一般使用导入命令将外部数据导入至当前数据库中 ...
  •   题目:已知两变量a和b,设计一个算法,交换a与b的值. 1.最传统,最广泛,最著名的方法,增加一个变量,代码如下: int a, b; int c; c=a; a=b; b=c; 2.不增加第三个变量,交换a和b ...
  • inetd.conf文件浅析   1.前言  Inetd.conf文件是Linux系统中的重要文件之一.它保存了系统提供internet服务的数据库.通过这个文件,你可以对这些服务加以控制,如打开/关闭某项服务,使它 ...
  • 有源点汇点的上下界最大流问题... 建图很简单...按题意即可... 设原图 源点为 s 汇点 为 t,连一条t到s无下界上界无限大的边....设两个超级源S,T,像无源汇判断可行流的问题一样,记录每个点的in,连接 ...
  • 1 #include <iostream> 2 #include <cstring> 3 #include <cstdio> 4 5 using namespace std; 6 ...
  • Win10开机输入密码比较麻烦,相信很多安装Win10的朋友,都会觉得每次开机都需要输入密码比较麻烦,下面与大家分享下取消Win10开机密码的方法 由于最近安装了Win10系统发现Win10开机输入密码比较麻烦,想要 ...
  •   试题描述 请你实现一个数据结构,完成这样的功能: 给你一个N个点的图,初始状态无边. 每次加入一条双向边(u,v,w),若加入后没有构成一棵生成树,输出“Not Yet”,否则输出当前最小生成树的权值. 输入 第 ...
  • 1. WEB 服务性能测试和优化 1.1   测试环境搭建 网络环境:内网 压力测试服务器: 服务器系统:Linux 2.6.18 服务器配置:Intel® Xeon™ CPU 3.40GHz 4 CPUS 内存:6 ...
  • 易网科技讯 6月21日消息,中国电信集团公司董事长王晓初在天翼手机交易会上表示,中国电信正在加大LTE网络的实验建设,而在4G时代,LTE TDD/FDD融合组网的模式是不可避免的.王晓初称,中国电信正在加大LTE实 ...