css 盒模型

原创

已于 2023-03-22 18:42:18 修改 · 394 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2022-12-04 17:05:30 首次发布

本文详细介绍了CSS盒模型，包括标准盒子模型和怪异盒子模型，以及它们的计算方式。此外，还讨论了外边距margin的设置，如外边距重叠和传递的问题，并给出了解决方案。同时，文章涵盖了内边距padding、边框border的使用，如何用边框创建三角形，以及盒阴影box-shadow的实现。最后，文章讲述了多种基于边距的居中布局方法。

一、盒模型 box

1、标准盒子模型

盒模型包含四个部分，分别是外边距margin，外边框border，填充区padding，内容区content。不设置时外边距和内边距是透明的。我们称border+padding+content为可视空间，margin为占位空间。

占位总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
占位总高度=margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom

盒模型图示：
在这里插入图片描述

2、怪异盒子模型

当我们设置padding和border时，盒子会被撑大，这时候就会使用怪异盒子模型。它规定padding和border都包含在了width之内，设置时不会改变盒子的大小，只会向内挤压。它的占位空间为width/height(content+padding+border)+margin。

box-sizing：content-box为默认值，border-box切换异盒模型。

二、外边距 margin

外边距显示在元素边框以外的空白区域。允许设置负值，元素设置margin正值向右下移动，负值向左上移动。可以设置margin:0 auto;使块元素适应浏览器水平居中，垂直不可，且不能设置定位和浮动。

margin:上下左右;：设置一个值时为四个方向的外边距，数值+单位。值为百分数时，水平和垂直方向外边距的参照物都为父元素的宽度。
margin:上下左右;
margin:上左右下;
margin:上右下左;：注意顺序。
margin-top/bottom/left/right;：设置单边的外边距。

设置margin的两个问题

外边距重叠

因为BFC原则，水平方向的margin会重合。解决方案就是把总的margin写一个元素即可。

外边距传递

父元素当中的第一个子元素（块元素）的margin-top会向上传递。解决方案为把原本设置给子元素的margin-top换成父元素的padding-top；给父元素或者儿子元素添加浮动；给父元素设置上边框；给父元素添加overflow:hidden;

三、内边距 padding

一般把内边距设置给父元素。padding区域内正常显示背景。padding不允许设置负值。

padding:上下左右;：设置一个值时为四个方向的外边距，数值+单位。值为百分数时，水平和垂直方向外边距的参照物都为父元素的宽度。
padding:上左右下;
padding:上下左右;
padding:上右下左;：注意顺序。

用margin设置外边距，padding设置内边距，处理间距。

实例：

<head>
    <style>
        div{
     
     
            width:100px;
            height:100px;
            background-color: skyblue;
        }
        .one{
     
     
            margin:auto

最低0.47元/天解锁文章