css3使用box-sizing布局

时间:2022-04-30 21:38:32

css3增添了盒模型box-sizing,属性值有下面三个:

content-box:默认值,让元素维持W3C的标准盒模型。元素的宽度/高度(width/height)(所占空间)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+content width/height。

border-box:让元素维持IE6及以下版本盒模型,元素的宽度/高度(所占空间)等于元素内容的宽度/高度。这里的content width/height包含了元素的border,padding,内容的width/height。即:Element Width/Height =width /height-border-padding。

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

css3使用box-sizing布局

比如:在写项目时,有人要你在一个空间里写内容,如下:

<div class="wrapper">
<div id="header">页眉</div>
<div class="sidebar">侧边栏</div>
<div class="content">内容内容内容内容内容内容内容内容内容内容内容</div>
<div id="footer">页脚</div>
</div>
        *{margin:;padding:;}
.wrapper{
width: 500px;
margin: 0 auto;
color:#fff;
text-align: center;
}
#header{
height: 50px;
background-color: red;
}
.sidebar{
float: left;
width: 150px;
height: 100px;
background-color: #0099cc;
}
.content{
float: left;
width: 350px;
height: 100px;
background-color: #999999;
}
#footer{
background-color: #ff6600;
height: 50px;
clear: both;
}

效果图   css3使用box-sizing布局

终于写好了,但如果又被要求改好看点,比如内容区加内边距边框什么的修饰一下。

如果直接加上padding、border什么的,马上就破坏了布局:

css3使用box-sizing布局

因为box-sizing默认是content-box,内容区大小不会变,加上padding、margin、border的话,就会往外撑开,从而破坏布局结构

这时,使用border-box就可以完美解决了。

        .content{
box-sizing: border-box;
padding: 22px;
border: 12px solid blue;
float: left;
width: 350px;
height: 100px;
background-color: #999999;

这样,元素所占空间不会变,加了padding、border的话,会往内挤,保持外面容器不被破坏

(注意,margin不包含在元素空间,加了margin会向外撑开)

效果图:

css3使用box-sizing布局

 兼容性:IE8+及其他主流浏览器均支持box-sizing。其中IE6及以下默认是以类似border-box盒模型来计算尺寸。

(ps:Firefox浏览器,box-sizing还可以设置一个padding-box,指定元素的宽度/高度等于内容的宽度/高度和內距,

即:Element Width/Height = content width/height+padding。)

css3使用box-sizing布局的更多相关文章

  1. CSS3支持box-flex弹性布局

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  3. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  4. CSS3 Flex Box(弹性盒子)

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  5. CSS3之多列布局columns详解

    CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...

  6. CSS3实现图片木桶布局

    CSS3实现图片木桶布局 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <script> window.navigator.appVersion.inde ...

  7. css3盒模型学习--利用box自适应布局

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典   的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...

  8. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

  9. 转&colon; css3&colon; display&colon;box详解

    示例见:  css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...

  10. CSS3学习系列之布局样式(二)

    使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. MyBatis入门学习教程-优化MyBatis配置文件中的配置

    一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置信息写在了MyBatis的conf.xml文件中,如下: 1 <?xml version=&quot ...

  2. Linux软件的卸载

    configure作用:是源码安装软件时配置环境用的 他根据你的配置选项和你的系统情况生成makefile文件 为make 做准备 最常用的参数: ./configure --prefix 作用: 不 ...

  3. 空格&amp&semi;amp&semi;nbsp在不同浏览器中显示距离不一致问题解决方法

      在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同. 网上资料说不同的浏览器会有不同的默认字体.一般 IE默认字体都是宋体,而firefox和chrome的默 ...

  4. ORACLE触发器和new、old特殊变量

    :new --为一个引用最新的列值;:old --为一个引用以前的列值; 这两个变量只有在使用了关键字 "FOR EACH ROW"时才存在.且update语句两个都有,而inse ...

  5. ThinkPHP第十三天&lpar;CONF&lowbar;PATH、APP&lowbar;PATH,UEditor用法&rpar;

    1.CONF_PATH 项目配置文件目录地址,APP_PATH 项目地址 2.ThinkPHP中更新数据的连接操作位save(),更新一个字段可以用setField(name,value)方法. 3. ...

  6. &period;net中的各种委托&lpar;Delegate、Action、Func&rpar;

    1.Delegate,委托的鼻祖 protected delegate int ClassDelegate(int x, int y);//定义委托类型及参数 static void Main(str ...

  7. RabbitMQ消息队列(一)-RabbitMQ的优劣势及产生背景

    本篇并没有直接讲到技术,例如没有先写个Helloword.我想在选择了解或者学习一门技术之前先要明白为什么要现在这个技术而不是其他的,以免到最后发现自己学错了.同时如果已经确定就是他,最好先要了解下技 ...

  8. 添加PMD插件扫描潜在的bug

    上一节使用checkstyle来规范你的项目主要解决了代码编码规范问题,比如缩进换行等.这次继续代码健康工具类PMD. 什么是PMD PMD真的不像checkstyle这样的东西所见即所得啊,去官网找 ...

  9. BZOJ3667&colon;Rabin-Miller算法&lpar;Pollard-Rho&rpar;

    Description Input 第一行:CAS,代表数据组数(不大于350),以下CAS行,每行一个数字,保证在64位长整形范围内,并且没有负数.你需要对于每个数字:第一,检验是否是质数,是质数就 ...

  10. sublime install package没反应,以及安装后没有出现install package选项

    离线安装Package Control 一般出现这种问题的是网络原因,我们可以下载离线安装包 连接地址:https://github.com/wbond/package_control 安装完成后解压 ...