`
zhangyaochun
  • 浏览: 2563991 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css3之box-sizing

    博客分类：
  • css3
box-sizingcss3 
阅读更多

简单记录，个人学习。

 

box-sizing:

 

 

  •   content-box -------维持css2.1盒模型的组成模式，element width = border+padding+content
  •   border-box  -------改变css2.1盒模型的组成模式，elemnet width = content
贴上两个图----资源来源于http://chic.chicchina.net/shuxin/box-sizing.asp


 border-box下的width    (注释：发现图错了，宽高度还是200*70)
 content-box下的width

兼容性：



 

  • -moz-box-sizing:border-box          Firefox(Gecko) 
  • -webkit-box-sizing:border-box      Safari(Webkit) 3.0
  • box-sizing:border-box                   Opera 7以上 |  IE8  |  IE9
 
 
  • 大小: 939 Bytes
  • 大小: 1.7 KB
  • 大小: 31.1 KB
1
顶
1
踩
分享到：
| css之writing-mode
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    详解CSS3中的box-sizing（content-box与border-box）

    CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...

    css详解box-sizing.zip

    css详解box-sizing.zip

    CSS3 box-sizing属性详解

     3、border-box，border和padding计算入width之内，其实就是怪异模式了~ 注意： ie8+浏览器支持content-box和border-box； ff则支持全部三个值。 使用时： -webkit-box-sizing: 100px; // for ios-safari, and

    CSS3属性box-sizing使用指南

    box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码代码如下:box-sizing: content-box | padding-box | border-box 默认值是 content-box ，对应CSS2.1规范中标准的盒子...

    使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

    这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing 这个css属性来实现。 1，box-sizing 属性介绍box-sizing 允许我们以特定的方式定义匹配某个区域的特定...

    前端开源库-tachyons-box-sizing

    前端开源库-tachyons-box-sizing超光速管盒尺寸，CSS模块，更智能的默认盒模型。

    css3 box-sizing属性使用参考指南

    基础知识 语法： box-sizing ： content-box | border-box | inherit 相关属性 ： 无 取值： content-box:此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content} ...

    浅谈CSS3 box-sizing 属性 有趣的盒模型

    盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. ...这里用到了CSS3 的属性 box-sizing(默认值：content-box) /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; co

    LessGrid:基于less的自适应栅格系统，可以单独给每个栅格padding属性，且不依赖css3的box-sizing

    LessGrid 基于less的自适应栅格系统，可以单独给每个栅格padding属性，且不依赖css3的box-sizing

    解决CSS 中box-sizing与background-clip解决背景显示范围的问题

    今天遇到的问题是出在我用了一个半透明的border，但却无法顺利地透过并显示背景的图案或颜色，后来发现原来box预设的border，其实是在这个box之内的，虽然border在box的内部，但其实与刚刚的box model并没有相违背，...

    CSS3 box-sizing属性

    说到 IE 的 bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 ...这种情况在 CSS3 时代有了改善，得益于这个叫做 box-sizing 的属性，

    谈谈对css属性box-sizing的了解

    本篇文章主要介绍了css属性box-sizing，box-sizing属性是CSS3中引入的，有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度。

    css3 盒模型以及box-sizing属性全面了解

    在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。 在W3C模型中: 总宽度 = margin-...

    emotion-box-sizing-reset:Emotion CSS-in-JS库的框大小重置

    情感框大小重置 CSS-in-JS库的。...npm install --save emotion-box-sizing-reset Java脚本 import { Global , css } from "@emotion/core" ; import reset from "emotion-box-sizing-reset" ; // … 执照

Magicbox
Global site tag (gtag.js) - Google Analytics