box-sizing

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

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

具体如下图:

box-sizing_第1张图片

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

你可能感兴趣的:(css)