一、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的更多相关文章

CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
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- ...
CSS3弹性伸缩布局（二）——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介新版本的Flexbox模型是2012年9 ...
关于css3的fixed布局
理解CSS3里的Flex布局用法 2016-10-21 阮一峰 web前端开发 web前端开发 web前端开发微信号 web_qdkf 功能介绍我们专注web前端开发技术的学习(html,css, ...

随机推荐

EasyPoi 导入导出Excel时使用GroupName的踩坑解决过程
一.开发功能介绍: 简单的一个excel导入功能二.Excel导入模板(大致模板没写全): 姓名性别生日客户分类联系人姓名联系人部门备注材料综合采购张三男 1994/05/25 ...
[leetcode] 并查集（Ⅰ）
预备知识并查集 (Union Set) 一种常见的应用是计算一个图中连通分量的个数.比如: a e / \ | b c f | | d g 上图的连通分量的个数为 2 . 并查集的主要思想是在每个连 ...
System.Timers.Timer
前言 System.Timers.Timer组件是基于服务器的计时器,它能够指定在应用程序中引发Elapsed事件周期性间隔,以处理相应事件. 使用示例: 运行结果展示: System.Timers. ...
DEDE Fatal error: Maximum execution time of 30 seconds exceeded 致命错误：最大的执行时间为 30 秒
刚安的DEDE 5.7 -SP1-GBK的为何一登录后台点任何链接都显示超过30秒后台假死网上搜的方法一般都是更改执行时间上限,其目的是为了解决一些大的数据,真的需要30秒以上的执行时 ...
Linux 用户管理和提权
Linux ⽀持多个⼈使⽤同⼀个⽤户登录系统, Windows 在修改组策略的情况下,也可以多个⼈使⽤同⼀个⽤户登录远程连接Linux的⽅式:SSH协议远程连接Windows的⽅式:RDP协议安 ...
如何在mysql中实现自然排序
背景熟悉mysql的同学应该清楚,mysql在对字符串做order by排序时是按照字典序进行排序的,但是如果字符串中包含数字的话(我们称这种类型的字符串为alphanumeric),仅按照字典序的 ...
nginx日志、nginx日志切割、静态文件不记录日志和过期时间
2019独角兽企业重金招聘Python工程师标准>>> 12.10 Nginx访问日志日志格式 vim /usr/local/nginx/conf/nginx.conf //搜索l ...
我对sessionid的理解
不知道是不是扯蛋,还是太菜... 看上面的的话毫不关系是吧...自己看过一点关于说session id 的一些文章, 貌似都是一样的....以下内容个人理解, 请大家指正... 我想自己举个例子 ...
File Operations
在刷题测试程序时,为了避免每次都手工输入,我们可以把输入数据保存在文件中:为了避免输出太长,我们将输出也写入文件中,方便与标准答案文件进行比较. 文件使用一般有两种方法:输入输出重定向.fopen. ...
51NOD 2072 装箱问题背包问题 01 背包 DP 动态规划
有一个箱子容量为 V(正整数,0<=V<=20000),同时有 n 个物品(0<n<=30),每个物品有一个体积(正整数). 现在在 n 个物品中,任取若干个装入箱内,使得箱子 ...