一、box-sizing属性

box-sizing属性的三个值：
content-box，border-box，inherit

content-box
chrome浏览器默认的盒子属性值。
content-box的width和height从content算起，不包含border和padding。
border-box
IE浏览器默认的盒子属性值。
border-box的width和height从border算起,包含border和padding
inherit
inherit 关键字指定一个属性应从父元素继承它的值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="author" content="lanye" /><meta name="description" content="HTML CSS JavaScript" /><meta name="generator" content="" /><meta name="keywords" content="HTML, CSS, JavaScript" /><title>Document</title><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script><![endif]--><style>/*content-box的width和height从content算起，不包含border和padding*/.chrome {width: 100px;height: 100px;background-color: green;border: 5px solid black;padding: 5px;box-sizing: content-box;}/*border-box的width和height从border算起,包含border和padding*/.ie {border: 5px solid black;box-sizing: border-box;width: 100px;height: 100px;background-color: red;padding: 5px;position: relative;bottom: 110px;left: 10px;}</style>
</head><body><div class="chrome"></div><div class="ie"></div>
</body></html>

chrome显示如下：

IE显示如下：

二、 content-box和border-box的区别

当width和height属性设置为同一个值时，content-box的内容区域大小等于border-box整个盒子的大小。content-box额外多出来border和padding区域的大小。
content-box的width，height与padding，border的大小无关。border-box的width，height与padding，border的大小有关。

CSS盒子模型box-sizing属性详解相关推荐

从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
php中li标签,li标签有哪些属性？css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
html css data-,HTML+CSS入门 HTML自定义data属性详解
本篇教程介绍了HTML+CSS入门 HTML自定义data属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 可以在HTML标签上添加任意以 "data-&q ...
css一个盒子里可以装3个图片并排吗_John: CSS浮动与清除浮动属性详解（CSS float clear）...
CSS里的浮动,可以让元素脱离标准流,从左上角或右上角依次贴边排列. 下面这个案例将会帮我们了解浮动的基本情况.下面这段代码块,外面是一个大div,里面包含着3个div,第一个左浮动,后两个无浮动. ...
Django模型之Meta属性详解
Django模型类的Meta是一个内部类,它用于定义一些Django模型类的行为特性.而可用的选项大致包含以下几类 abstract 这个属性是定义当前的模型是不是一个抽象类.所谓抽象类是不会对应数据 ...
CSS轮廓（outline）属性详解及 outline 与 border 的区别
轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元 ...
教你吃透CSS的盒子模型(Box Model)
目录 CSS 盒子模型(Box Model) 元素的宽度和高度浏览器的兼容性问题 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&q ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
详细认识一下CSS盒子模型
定义 CSS把每个元素看成是一个个单独的框,这里就叫它"元素框"吧.而CSS 盒子模型 (Box Model) 可以理解成一种规范,它规定了元素框处理其"最里边的内容区域 ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...

CSS盒子模型box-sizing属性详解

一、box-sizing属性

二、 content-box和border-box的区别

CSS盒子模型box-sizing属性详解相关推荐

最新文章

热门文章