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. dubbo负载均衡是如何实现的?

    dubbo的负载均衡全部由AbstractLoadBalance的子类来实现 RandomLoadBalance 随机 在一个截面上碰撞的概率高,但调用量越大分布越均匀,而且按概率使用权重后也比较均匀 ...

  2. centos7安装mongodb详解

    记录一下linux下安装mongodb数据库过程. 安装mongodb #下载linux版本的tar文件#  例如笔者下载的是:mongodb-linux-x86_64-rhel70-3.4.4.tg ...

  3. python自动化测试框架unittest

    对于刚学习python自动化测试的小伙伴来说,unittest是一个非常适合的框架: 通过unittest,可以管理测试用例的执行,自动生成简单的自动化测试报告: 首先我们尝试编写编写一个最简单的un ...

  4. python_0基础开始_day05

    第五节 一.字典 python的数据结构之一 字典 —— dict 定义:dic = {"key":"dajjlad"} 作用:存储数据,大量,将数据和数据起到 ...

  5. mysql limit分页查询效率比拼

    1.直接使用数据库提供的SQL语句 limit M ,N SELECT * from message limit 0 , 10 ; -- 0.044 SELECT * from message lim ...

  6. weblogic10.3.6漏洞修改方案

    1.CVE-2018-2628漏洞 CVE-2018-2628漏洞利用的第一步是与weblogic服务器开放在服务端口上的T3服务建立socket连接,可通过控制T3协议的访问来临时阻断攻击行为. W ...

  7. javaweb基础整理随笔------jstl与el表达式

    虽然jsp中可以写java代码,但是现在不推荐这么做. jsp虽然本质是servlet,但是主要作用只是视图,视图的任务就是显示响应,而不是在JSP中做任何关于程序控制和业务逻辑的事情.所以在JSP页 ...

  8. Go和Python学习计划

    计划虽然不一定能实现,但还是要有的,万一实现了呢. 一.学习Go 1.先看尚雪谷https://www.bilibili.com/video/av48141461/?p=12的go语言全套,把基础的过 ...

  9. [转载]关于ActiveMQ集群

    转载于 http://blog.csdn.net/nimmy/article/details/6247289 近日因工作关系,在研究JMS,使用ActiveMQ作为提供者,考虑到消息的重要,拟采用Ac ...

  10. 消息中间件——RabbitMQ(三)理解RabbitMQ核心概念和AMQP协议!

    前言 本章学习,我们可以了解到以下知识点: 互联网大厂为什么选择RabbitMQ? RabbiMQ的高性能之道是如何做到的? 什么是AMQP高级协议? AMQP核心概念是什么? RabbitMQ整体架 ...