css关于width和height的计算方式

box-sizing的允许值包括：

content-box(默认值)，标准的盒子模型。border和padding不计算入width之内，对象的实际宽度element width=width+border+padding。
border-box（怪异模式）。border和padding计算入width之内。对象的实际宽度element width=width。
padding-box(一般不支持)。padding计算入width之内。对象的实际宽度element width=width+padding。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">.content-box{box-sizing:content-box;-moz-box-sizing:content-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #E6A43F;background: blue;}.padding-box{box-sizing:padding-box;-moz-box-sizing:padding-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #186645;background: red;                }.border-box{box-sizing:border-box;-moz-box-sizing:border-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #3DA3EF;background: yellow;}
</style>
</head>
<body>
<div class="content-box">content-box</div>
<div class="padding-box">padding-box</div>
<div class="border-box">border-box</div>
</body>
</html>

浏览器显示效果如下：

css关于width和height的计算方式相关推荐

【CSS中width、height的默认值】
对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...
web前端入门到实战：CSS属性width和height
width 是定义元素内容区的宽度: height是定义元素在内容区的高度. 在内容区外面可以增加内边距(padding).边框(border)和外边距(margin),这样的话就成了我们常说的盒子模 ...
css中width、height、margin、padding默认值总结
默认值 left top right bottom width height: 默认值为 auto margin padding: 默认值为 0 百分比参照于谁 width ...
jQuery中的样式（七）：addClass()、removeClass()、toggleClass()、hasClass()、css()、width()、height()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head ...
CSS中百分比单位计算方式整理
整理于:https://www.w3cplus.com/css/a-percentage-unit-in-css.html 1.font-size 相对于父元素的font-size来计算,如果父元素( ...
CSS样式表引入的三种方式，及优先级顺序
CSS样式表引入的三种方式,及优先级顺序 CSS可以通过三种方式引入样式表,三种方式分别是行内样式表,内部样式表和外部样式表. 行内样式表通过给标签设定style属性 <body>< ...
css 水平垂直居中的几种常见方式
下面是几种常见的水平垂直居中方式,可在不同情形下方便采用不同的方式 html <body><div class="box"><div class=&q ...
CSS文字居中显示的几种方式
1.利用line-height和vertical-align html <div class="box"><span>测试文字</span> & ...
CSS元素上下左右居中的几种方式
CSS元素上下左右居中的几种方式假设以以下父子元素实现上下左右居中为例: <div class='father'><div class='son'></div> ...

css关于width和height的计算方式

css关于width和height的计算方式相关推荐

最新文章

热门文章