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. nginx lua集成kafka

    NGINX lua集成kafka 第一步:进入opresty目录 [root@node03 openresty]# cd /export/servers/openresty/ [root@node03 ...

  2. JavaScript数据结构——链表的实现与应用

    链表用来存储有序的元素集合,与数组不同,链表中的元素并非保存在连续的存储空间内,每个元素由一个存储元素本身的节点和一个指向下一个元素的指针构成.当要移动或删除元素时,只需要修改相应元素上的指针就可以了 ...

  3. 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能

    常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...

  4. Python学习系列(四)Python 入门语法规则2

    Python学习系列(四)Python 入门语法规则2 2017-4-3 09:18:04 编码和解码 Unicode.gbk,utf8之间的关系 2.对于py2.7, 如果utf8>gbk, ...

  5. 1关于如何用Navicat连接到xampp安装的mysql

    打开xampp,打开config打开my.ini. 检索bind-address,后面的数字是你的IP地址 检索 port,后面的数字是端口号 打开Navicat新建连接,选中mysql 连接名随便起 ...

  6. vue 辅助开发工具(利用node自动生成相关文件,自动注册路由)

    vue 辅助开发工具 前言 有没有因为新建view,component,store的繁琐操作而苦恼,需要新建文件件,新建vue文件,新建js文件,注册路由...等一系列无价值操作浪费时间,为了解决这个 ...

  7. 【PYTHON】语法基础 | 开始使用Python

    Python的热度不言而喻,机器学习.数据分析的首选语言都是Python,想要学习Python的小伙伴也很多,我之前也没有认真用过Python,所以也想体验一下它的魅力,索性花了两天集中看了一下它的基 ...

  8. golang学习(1)---快速hello world

    很多著名的计算机语言都是一两个人在业余时间捣鼓出来的,但是Go语言是由Google的团队打造的.可能一些基础的知识点我不会细讲,因为这个时代你真的得快速学习,才能适应发展. 来看看go的hello, ...

  9. (二十九)c#Winform自定义控件-文本框(二)

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  10. K8S搭建-1 Master 2 Workers(dashboard+ingress)

    本文讲述k8s最新版的搭建(v1.15.2) 分如下几个topic步骤: 各个节点的基本配置 master节点的构建 worker节点的构建 安装dashboard 安装ingress 常见命令 do ...