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

content-box 默认值,让元素维持W3C的标准盒模型。元素的宽度/高度(width/height)= 元素内容框宽度/高度(content width/height),即:Element width/height = content width/height;
在宽度和高度之外绘制元素的内边距和边框
border-box

让元素维持IE6即以下版本盒模型。元素的宽度/高度(width/height)= 元素边框宽度(border)+ 内边距(padding)+ 元素内容框宽度/高度(content width/height),即:

Element width/height = border + padding + content width/height;

为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制;
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应该从父元素继承box-sizing的属性。

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

box-sizing(CSS3)的更多相关文章

  1. AOS – 另外一个独特的页面滚动动画库(CSS3)

    AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...

  2. 盒模型Box Model(浮动)

    一.标准盒模型的大小:border+padding+content(width)        怪异盒模型大小:padding+border   二.display inline  默认,且变为行由内 ...

  3. Virtual Box 工具栏(菜单栏)消失的解决方法

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 现在Virtual Box非常牛逼(不排除Oracle又准备像Java SE那样 ...

  4. 会动的大风车(css3)

    今天用css3的写了一个会动的大风车,使用translate和rotate布局,使用animation制作动画效果:分享给大家 <!DOCTYPE html> <html lang= ...

  5. mac 环境下使用virtual box 虚拟机(win7)与主机之间互相ping通

    首先选择virtual box设置网络连接方式为网桥 混杂模式设置为全部允许 如下图: 进入虚拟机把虚拟机IP设置和主机在一个网段.如主机是192.168.1.100虚拟机可以设置为192.168.1 ...

  6. 水平垂直居中div(css3)

    一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...

  7. Codeforces Round #228 (Div. 2) C. Fox and Box Accumulation(贪心)

    题目:http://codeforces.com/contest/389/problem/C 题意:给n个箱子,给n个箱子所能承受的重量,每个箱子的重量为1: 很简单的贪心,比赛的时候没想出来.... ...

  8. radio与img对齐 (CSS3)

    实现方式: html: <div class="pay-four"> <div class="pay-four-border"> < ...

  9. 笔记 — 动画效果(Css3)

    /** * animation-name: 调用 @keyframes 所定义的动画 * animation-duration: 动画周期所花费的时间长度 * animation-timing-fun ...

随机推荐

  1. Extjs的使用总结笔记

    一:Extjs自带验证 1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等) 2.alphanum//只能输入字母和数字,无法输入其他 3.email//email验证,要求的格式是& ...

  2. Linux下,为应用程序添加桌面图标(ubuntu18.4)

    一.桌面图标位置 Lniux下桌面图标储存路径为:/usr/share/applications 二.桌面图标格式 所有桌面图标格式均为desktop,即名为XXX.desktop 三.编辑内容(常用 ...

  3. [NUnit] discover test finished: 0 found issue

    %Temp%\VisualStudioTestExplorerExtensions & restart visual studio

  4. vue之手把手教你写日历组件

    ---恢复内容开始--- 1.日历组件 1.分析功能:日历基本功能,点击事件改变日期,样式的改变 1.结构分析:html 1.分为上下两个部分 2.上面分为左按钮,中间内容展示,右按钮 下面分为周几展 ...

  5. Netty学习(一)-为什么选择Netty

    前面我们简单学习了NIO.我们知道java的I/O模型一共有四种,分别是:传统的BIO,伪异步I/O,NIO和AIO.为了澄清概念和分清区别,我们还是先简单的介绍一下他们的概念,然后再去比较优劣.以及 ...

  6. DIY cnblog——背景渐变切换

    进来的小伙伴应该已经看过了我的博客样式,但还是贴张图先: 先大致说一下实现的思路,然后把代码贴出来供小伙伴们参考. 由于不是特别技术性的文章,格式就放宽松一点,跟着意识流走吧. 先跟大家分享一个渐变背 ...

  7. jmh源码解析-整体架构

    我理解的jmh运行架构图 生成字节码,字节码负责维护测试的状态和调用被测试的方法 默认在fork的进程中进行测试,可以配置多个fork进程,以减少误差 通过线程池,提交每个迭代的测试任务,任务执行后, ...

  8. scrapy xpath用法

    一.实验环境 1.Windows7x64_SP1 2.anaconda3 + python3.7.3(anaconda集成,不需单独安装) 3.scrapy1.6.0 二.用法举例 1.开启scrap ...

  9. Java Socket:飞鸽传书的网络套接字

    在古代,由于通信不便利,一些聪明的人就利用鸽子会飞且飞得比较快.会辨认方向的优点,对其进行了驯化,用来进行消息的传递——也就是所谓的“飞鸽传书”.而在 Java 中,网络套接字(Socket)扮演了同 ...

  10. 纯数据结构Java实现(1/11)(动态数组)

    我怕说这部分内容太简单后,突然蹦出来一个大佬把我虐到哭,还是悠着点,踏实写 大致内容有: 增删改查,泛型支持,扩容支持,复杂度分析.(铺垫: Java语言中的数组) 基础铺垫 其实没啥好介绍的,顺序存 ...