一、CSS常见的两栏布局

如上图,是一个很简单的两栏布局,就是一个宽度为960px;并且页面居中显示,侧边栏栏宽度为220px;主内容宽度720px;两者有一个20px的间距,并且有页眉和页脚。

代码也很简单:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en-US">
<title> 两栏布局</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrapper{
width:960px;
margin-left:auto;
margin-right: auto;
color:#fff;
font-size:30px;
text-align:center;
background: blanchedalmond;
}
#header{
height:100px;
background:#38382e;
margin-bottom:10px;
}
.side{
float:left;
width:220px;
margin-right: 20px;
margin-bottom:10px;
height:300px;
background:#5d33cf;
}
.content{
float:left;
width:720px;
height:300px;
background:#c8ca30;
margin-bottom:10px;
}
#footer{
background:#cc4ad5;
height:100px;
clear: both;/*清除浮动*/
}
</style>
<body>
<div class="wrapper">
<div id="header">页眉</div>
<div class="side">侧边栏</div>
<div class="content">主内容</div>
<div id="footer">页脚</div>
</div>
</body>
</html>

目前的布局一点问题都没有,因为容器子元素的宽度,间距加起来刚好和容器wrapper相等,但有时候布局很容易被破坏,比如给容器中的一些子元素改变属性址,比如给side和content增加padding属性。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>box-sizing拯救了我们的布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
color:#fff;
font-size: 30px;
text-align: center;
background: #ccc;
}
#header {
height: 100px;
background: #38382e;
margin-bottom: 10px;
padding: 10px;
width: 100%;
}
.side {
float: left;
width: 220px;
margin-right: 20px;

margin-bottom: 10px;
height: 300px;
background: #5d33cf;
padding: 10px;

}
.content {
float: left;
width: 720px;
height: 300px;
background: #c8ca30;
margin-bottom: 10px;
padding: 10px;

}
#footer {
background: #cc4ad5;
height: 100px;
text-align: center;
clear: both;
padding: 10px;
width: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">页眉</div>
<div class="side">侧边栏</div>
<div class="content">主内容</div>
<div id="footer">页脚</div>
</div>
</body>
</html>

因为side和content增加了padding属性,导致side元素总宽度变为240px(220+20),主内容content元素总宽度变为740px(720+20),如此一来再加上margin间距20,就变成了1000px,超过了容器wrapper的宽度,布局完全被打破,很难受很痛苦。

二、CSS3中box-sizing属性介绍

为了解决这个问题,css3增加了一个盒模型属性box-sizing,能够事先定义盒模型的尺寸解析方式。

box-sizing属性值主要有3个:

①content-box:默认值,让元素维持w3c的标准盒模型。元素的宽度盒高度(element width/height)=边框(border) +内边距(padding) +内容宽度/高度(content width/height).附:css中设的width值为content-box值。上例的两栏布局就是采用的默认值。

②border-box:此值会重新定义css2.1中盒模型组成的模式,让元素维持ie传统的盒模型。 content width/height=element width/height-border-padding.

③inherit:继承父元素的盒模型模式

box-sizing属性主要用来控制元素的盒模型的解析方式,其目的是为了控制元素的总宽度。使布局更加方便。

三、浏览器兼容性

四、box-sizing改造上例两栏布局

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>box-sizing拯救了我们的布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
color:#fff;
font-size: 30px;
text-align: center;
background: #ccc;
}
#header {
height: 100px;
background: #38382e;
margin-bottom: 10px;
border: 10px solid red;
padding: 10px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.sidebar {
float: left;
width: 220px;
margin-right: 20px;

margin-bottom: 10px;
height: 300px;
background: #5d33cf;
border: 10px solid red;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

}
.content {
float: left;
width: 720px;
height: 300px;
background: #c8ca30;
margin-bottom: 10px;
border: 10px solid red;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

}
#footer {
background: #cc4ad5;
height: 100px;
text-align: center;
clear: both;
border: 10px solid red;
padding: 10px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">页眉</div>
<div class="sidebar">侧边栏</div>
<div class="content">主内容</div>
<div id="footer">页脚</div>
</div>
</body>
</html>

CSS3 拯救我的布局吧box-sizing的更多相关文章

  1. CSS3弹性伸缩布局(一)——box布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  2. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  3. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  4. CSS3与页面布局学习总结(四)——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  5. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  7. CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  8. CSS3弹性伸缩布局(二)——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  9. 关于css3的fixed布局

    理解CSS3里的Flex布局用法 2016-10-21 阮一峰 web前端开发 web前端开发 web前端开发 微信号 web_qdkf 功能介绍 我们专注web前端开发技术的学习(html,css, ...

随机推荐

  1. MVC-基础02

    MVC是Model(模型).View(视图)和Controller(控制). 1)最上面的一层,是直接面向最终用户的"视图层"(View).它是提供给用户的操作界面,是程序的外壳. ...

  2. 2019-2020-1 20199310《Linux内核原理与分析》第七周作业

    1.问题描述 在前面的文章中,学习了系统调用system_call的处理过程,在MenuOS中运行getpid命令,通过gdb跟踪调用time函数的过程,并分析system_call代码对应的工作过程 ...

  3. (转)对中级 Linux 用户非常有用的 20 个命令

    也许你已经发现第一篇文章非常的有用,这篇文章是继对初级Linux用户非常有用的20个命令的一个延伸. 第一篇文章的目的是为新手准备的而这篇文章则是为了Linux的中高级用户.在这里你将学会如何进行自定 ...

  4. c语言实现数字的倒序输出

    c语言实现数字的倒序输出, 例如: 输入数值:1234倒序输出: 4321 #include <stdio.h> int main(int argc, char *argv[]) { in ...

  5. Pycharm中设置encoding

    在Pycharm专业版中,为了防止文件在别的机器上出现乱码,所以需要进行字符编码的设置. 首先在Pycharm中的View中将下图中的Toolbar打上勾. 接着,工具栏就会出现,选中settings ...

  6. SaltStack的数据系统

    一.SaltStack数据系统的分类 1.Grains(收集的是静态数据) 官方使用文档:https://www.unixhot.com/docs/saltstack/topics/targeting ...

  7. 澳大利亚公共服务部门神速完成Win10部署:4个月完成44000台设备升级

    不到一年时间,澳大利亚公共服务部门已经完成Win10系统部署升级,涉及到全部的35000名员工.在2015年,澳大利亚公共服务部门IT员工告知微软,需要更创新的方式远程为居民提供服务,并且效率要更快. ...

  8. 通用权限管理系统组件 (GPM - General Permissions Manager)

    有的公司开发人员只那么几个,一个人支撑整个公司所有的IT系统实在有点累,不想自己写权限系统了,自己琢磨不也是要花时间和精力,要为此付出多少时间和汗水阿,细细的皱纹不知要多多少呢,重复建设不是白白浪费生 ...

  9. C++入门编程题目 NO.1

    题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. #incl ...

  10. POJ 1170 Shopping Offers非状态压缩做法

    Shopping Offers Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5659 Accepted: 2361 Descr ...