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. java高并发系列 - 第21天:java中的CAS操作,java并发的基石

    这是java高并发系列第21篇文章. 本文主要内容 从网站计数器实现中一步步引出CAS操作 介绍java中的CAS及CAS可能存在的问题 悲观锁和乐观锁的一些介绍及数据库乐观锁的一个常见示例 使用ja ...

  2. vue中使用vue-amap(高德地图)

    因为项目要求调用高德地图,就按照官方文档按部就班的捣鼓,这一路上出了不少问题. 前言: vue-cli,node环境什么的自己安装设置推荐一个博客:https://blog.csdn.net/wula ...

  3. UEM“探针”技术及用户体验管理

    随着互联网产品越来越多,用户群体越来越庞大以及用户品位的多样性增加,我们会发现这样的一个规律,就是相同类型的产品,比如播放器中的QQ影音和暴风影音,再比如小游戏平台中的腾讯游戏和联众等等,他们的功能是 ...

  4. 如何为 caddy 添写自定义插件

    如何为 caddy 添写自定义插件 项目地址:https://github.com/yhyddr/quicksilver/tree/master/gosample/caddy-plugin 前言 Ca ...

  5. WebGL简易教程(二):向着色器传输数据

    目录 1. 概述 2. 示例:绘制一个点(改进版) 1) attribute变量 2) uniform变量 3) varying变量 3. 结果 4. 参考 1. 概述 在上一篇教程<WebGL ...

  6. java并发编程(十六)----(线程池)java线程池的使用

    上节我们简单介绍了线程池,这次我们就来使用一下.Executors提供四种线程池,分别是:newCachedThreadPool,newFixedThreadPool ,newScheduledThr ...

  7. Eclipse+CXF框架开发Web服务实战

    一. 说明 采用CXF框架开发webservice. 所用软件及版本如下.  操作系统:Window XP SP3.  JDK:JDK1.6.0_07,http://www.oracle.com/ ...

  8. 使用JMS接口接入WebSphere MQ消息

    在你的应用程序中利用IBM WebSphere MQ消息中间件提供Java消息服务开放接口. IBM WebSphere MQ(WMQ)是一套面向消息的中间件(message-oriented mid ...

  9. shell 提取文件名和目录名

    转自http://blog.csdn.net/universe_hao/article/details/52640321 shell 提取文件名和目录名 在写shell脚本中,经常会有需要对路径和文件 ...

  10. Docker入门-搭建docker私有仓库

    Docker Hub 目前Docker官方维护了一个公共仓库Docker Hub,其中已经包括了数量超过15000个镜像.大部分需求都可以通过在Docker Hub中直接下载镜像来使用. 注册登录 可 ...