box-sizing

来源：互联网发布：c排序算法编辑：程序博客网时间：2024/06/06 10:51

重新回顾box-sizing中的两种模式：content-box,和border-box.
用语言来描述他们的区别就是：
content-box: 在此种模式是标准盒子模型模式，宽高width 和 height是内容区的宽高，不包括边框，内边距，外边距，内边距和边框的宽高会增大该元素整体大小。

border-box:在此种模式即对应IE怪异模式，即，指定的是该元素整体的宽高。无论元素的内边距和边框如何变化，元素整体宽高不变。元素内容区尺寸会变化，即，内容区宽 =元素width-border*2-padding(左右)。

具体如下图：

这里写图片描述

第一图：内容宽为100px；
第二图：内容宽为78px ;
代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #dv1{            width: 100px;            height: 100px;            border:1px solid red;            margin:20px;            padding:10px;            box-sizing:content-box;        }        #dv2{            width: 100px;            height: 100px;            border:1px solid red;            margin:30px;            padding:10px;            box-sizing: border-box;        }    </style></head><body>    <div id="dv1"></div>    <div id="dv2"></div></body><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>    console.log('dv1 width:',$('#dv1').width(),'dv2 width:',$('#dv2').width());</script></html>

阅读全文

0 0