• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

css盒模型以及如何计算盒子的宽度

开发技术 开发技术 6天前 3次浏览

css盒模型以及如何计算盒子的宽度

盒模型

每个存在于可访问性树中的元素都会被浏览器绘制成一个盒子[1]

每个盒子都可以看成由4部分组成,它们分别是 — 元素外边距(margin)元素边框(border)元素内边距(padding)元素内容(content)

css盒模型以及如何计算盒子的宽度

元素外边距(margin)

元素外边距(margin)用来控制元素与相邻元素之间间隔大小。

用法:

/*上方对外边距12像素*/
margin-top: 12px;
/*右方对外边距24像素*/
margin-right: 24px;
/*下方对外边距6像素*/
margin-bottom: 6px;
/*左方对外边距3像素*/
margin-left: 3px;
/*上方、右方、下方、左方皆对外边距12像素*/
margin: 12px;
/*上方、下方对外边距12像素 左方、右方对外边距24像素*/
margin: 12px 24px;
/*上方对外边距12像素 右方对外边距24像素 下方对外边距6像素 左方对外边距3像素*/
margin: 12px 24px 6px 3px;

按照left与right对应以及top与bottom对应,自动补充缺省值

/*上方对外边距12像素 右方对外边距24像素 下方对外边距6像素 左方对外边距24像素*/
margin: 12px 24px 6px;

水平方向相邻元素的margin值不会叠加

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>margin-horizontal-test</title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                background-color: #f00;
            }            
            .margin-horizontal-test {
                display: inline-block;
                margin: 0 50px;
            }
        </style>
    </head>
    <body>
        <div class="margin-horizontal-test"></div>
        <div class="margin-horizontal-test"></div>
    </body>
</html>

效果图:
css盒模型以及如何计算盒子的宽度

垂直方向相邻元素margin值会叠加,最终以两者之间最大值为准

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>margin-vertical-test</title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                background-color: #f00;
            }            
            .margin-vertical-test {
                margin: 50px 0;
            }
        </style>
    </head>
    <body>
        <div class="margin-vertical-test"></div>
        <div class="margin-vertical-test"></div>
    </body>
</html>

效果图:
css盒模型以及如何计算盒子的宽度

利用margin属性使块级元素水平居中

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>利用margin属性使块级元素水平居中</title>
        <style type="text/css">
            body {
                border: 1px solid black;
            }
            p {
                margin: 0 auto;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <p>Fatman</p>
    </body>
</html>

效果图:
css盒模型以及如何计算盒子的宽度

元素边框(border)

元素边框(border)位于元素外边距与元素内边距之间。

用法:

/*边框样式为实线*/
border-style: solid;
/*边框宽度为12像素*/
border-width: 12px;
/*边框颜色为黑色*/
border-color: black;
/*边框角度为36像素*/
border-radius: 36px;
/*边框宽度为12像素 样式为实线 颜色为黑色*/
border: 12px solid black;

border的属性也可以像margin一样根据上下左右设置,笔者就不再一一举例了。

利用边框颜色差设置3D按钮

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>border</title>
        <style type="text/css">
            button {
                width: 200px;
                height: 96px;
                background-color: #888888;
                border: 12px solid ;
                border-color: #cccccc #444444 #444444 #cccccc;
                color: white;
            }
        </style>
    </head>
    <body>
        <button>按钮</button>
    </body>
</html>

效果图:
css盒模型以及如何计算盒子的宽度

元素内边距(padding)

元素内边距(padding)是用来定义元素内容距离元素边框之间间隔大小。

内边距和外边距的区别在于 — 外边距位于边框外部,而内边距位于边框内部。

用法:

/*上方对内边距12像素*/
padding-top: 12px;
/*右方对内边距24像素*/
padding-right: 24px;
/*下方对内边距6像素*/
padding-bottom: 6px;
/*左方对内边距3像素*/
padding-left: 3px;
/*上方、右方、下方、左方皆对内边距12像素*/
padding: 12px;
/*上方、下方对内边距12像素 左方、右方对内边距24像素*/
padding: 12px 24px;
/*上方对内边距12像素 右方对内边距24像素 下方对内边距6像素 左方对内边距3像素*/
padding: 12px 24px 6px 3px;

padding也可以按照left与right对应以及top与bottom对应,自动补充缺省值

/*上方对内边距12像素 右方对内边距24像素 下方对内边距6像素 左方对内边距24像素*/
padding: 12px 24px 6px;

使用padding增大元素的可点击范围

<!DOCTYPE html>
<html>
    <head>
        <meta title="charset" content="utf-8">
        <title>使用padding增大元素的可点击范围</title>
        <style type="text/css">
            img {
                width: 48px;
                height: 48px;
                padding: 24px;
            }
        </style>
    </head>
    <body>
    	<!-- 注意你的本地可能没有这个文件 -->
        <img id="click-img" src="./assets/icon.jpg">

        <script type="text/javascript">
            let img = document.getElementById('click-img');
            //点击padding处也可以触发点击事件
            img.addEventListener('click',function(){
                alert('click img');   
            })
        </script>
    </body>
</html>

效果图:
css盒模型以及如何计算盒子的宽度

元素内容(content)

当box-sizing属性值为content-box时:

元素内容宽度 === 元素设置宽度

盒子宽度 === 元素左右外边距和 + 元素左右边框宽度和 + 元素左右内边距和 + 元素内容宽度

比如:

div {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px solid blue;
    margin: 20px;
    background-color: red;
    box-sizing: content-box;
}      

20 + 10 + 20 + 100 + 20 + 10 + 20
= 200

整个盒子的宽度为200px,元素内容的宽度值等于width值。

示意图:
css盒模型以及如何计算盒子的宽度

当box-sizing属性值为border-box时:

元素内容宽度 === 元素设置宽度 – 元素左右边框宽度和 – 元素左右内边距和

盒子宽度 === 元素左右外边距和 + 元素设置宽度

比如:

div {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px solid blue;
    margin: 20px;
    background-color: red;
    box-sizing: border-box;
}      

20 + 100 + 20
= 140

整个盒子的宽度为140px,元素内容的宽度值等于width值减去padding值和border值。

示意图:
css盒模型以及如何计算盒子的宽度


  1. 元素设置display:none后不存在于可访问性树中,不被浏览器绘制。 ↩︎


程序员灯塔
转载请注明原文链接:css盒模型以及如何计算盒子的宽度
喜欢 (0)