CSS3 拯救我的布局吧box-sizing
一、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, ...
随机推荐
- mybatis源码学习：基于动态代理实现查询全过程
前文传送门: mybatis源码学习:从SqlSessionFactory到代理对象的生成 mybatis源码学习:一级缓存和二级缓存分析 下面这条语句,将会调用代理对象的方法,并执行查询过程,我们一 ...
- Dockerfile的简单人门编写之关于yum的问题
首先我们编写一个简单的Dockerfile的例子.不过再此之前大家得去把编写dockerfile的指令了解一下. 编写以 centos镜像为基础镜像,构建 http 服务,Dockerfile 要求删 ...
- 44道JavaScript送命题
很久以前看过一个老外写的帖子,JavaScript Puzzlers!,直译就是JavaScript难题,里面列举了100道JavaScript选择题,大部分都是让人摸不着头脑的题目,需要仔细琢磨一番 ...
- 【MyBatis深入剖析】应用分析与最佳实践（下）
MyBatis编程式开发 MyBatis编程式开发步骤 MyBatis和MySQL Jar包依赖 全局配置文件mybatis-config.xml 映射器Mapper.xml Mapper接口 编程式 ...
- Android--sos闪光灯
Camera camera = null; Parameters parameters = null; Handler handler = new Handler() { @Override publ ...
- 2019-2020-1 20199328《Linux内核原理与分析》第七周作业
分析Linux内核创建一个新进程的过程 2019/10/28 18:34:58 笔记部分 首先是查看进程描述符(用来描述进程,其代码比较庞大)的一些内容 系统调用回顾 fork.vfork.clone ...
- 写了Bug，误执行 rm -fr /*，我删删删删库了，要跑路吗？
每日英语,每天进步一点点(偷笑): 前言 临近五一节,想到有 5 天假期,小林开始飘了. 写个简单的 Bash 脚本都不上心了,写完连检查都不检查,直接拖到到实体服务器跑. 结果一跑起来,发生不对劲, ...
- opencv-7-鼠标绘制自定义图形
opencv-7-鼠标绘制自定义图形 opencvc++qt 开始之前 昨天写了具体的基本的图形绘制, 然后我们使用相应的函数接口进行调用, 便能够在图像上绘制出来相应的图形, 我们以图像绘制为例, ...
- 【Linux常见命令】ls命令
ls - list directory contents ls命令用于显示指定工作目录下之内容(列出目前工作目录所含之文件及子目录). 语法: ls [OPTION]... [FILE]... l ...
- 怎么在Chrome和Firefox浏览器中清除HSTS设置？
HSTS代表的是HTTPS严格传输安全协议,它是一个网络安全政策机制,能够强迫浏览器只通过安全的HTTPS连接(永远不能通过HTTP)与网站交互.这能够帮助防止协议降级攻击和cookie劫持. HST ...