网站建设知识

我们将想法与焦点与您一起共享

当前位置:深圳网站建设 > 网站建设知识> css3盒模型

css3盒模型

2015-1-23 15:09:32 独占网络 网站建设知识
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>
始终专注高端网站建设服务 网站建设案例服务方案联系

联系我们

135-3000-5572
151-1257-9390

地址:深圳市龙岗区横岗街道联旺大厦5楼

邮箱:chenmh@sz886.com

我们的优势

12年建站服务经验自主开发后台CMS开发项目不外包无隐形收费

服务198家上市企业服务行业龙头超过70家 营销型网站建设完备的项目流程管理体系网页设计与网站开发技术并重

关于独占网络

十多年来,凭借对设计的深刻理解,对互联网营销趋势的敏锐洞察,独占网络不断修正服务导向,完善创作品格,始终注重专业探索,为所有合作企业机构全力以赴,确保网站的视觉体验与营销转化能力。

我们是一群对互联网抱有执着信念的技术控。从2012年到现在,公司从未建过强大的营销团队,却凭着作品与服务不断保持增长,做到了"桃李不言,下自成蹊。" 我们坚信:每个客户都是一条渠道,每个案例都是一个广告,为企业插上翅膀,助力企业转型升级,我们已做好准备。

专业团队为您提供深圳网站建设、深圳网站制作、深圳营销型网站建设、外贸网站建设等服务,深圳建网站就找独占网络 | 12年专注网站建设

深圳市独占网络科技有限公司 |备案号:粤ICP备15007128| Copyright 2023,ALL Rights Reserved www.sz886.com | Copyright 2023版权所有
Hi,Are you ready? 如果您有意向
请于我们取得联系。

有一个互联网项目想和我们谈谈吗?
您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话,让我们听到你的声音!

独占-整合互联网营销

地址:深圳市龙岗区横岗地铁D出口联旺大厦5楼
大客户专线:深圳 13530005572
售前QQ:1447567909
E-mail: sales@sz886.cn

合作意向表
您希望我们为您提供什么服务?