Skip to main content

盒模型

盒子模型

HTML 元素可以看成一个大的仓库，盒子与盒子之间的距离是 margin（外边距），盒子与货物之间的泡沫是 padding（内边距），货物本身有宽高（width/height），盒子本身有厚度（border）（边框）

width 宽度 height 高度 border 边框 padding 内边距 margin 外边距

padding 内边距 padding：20px；设置 4 个方向的值 padding: 20px，30px；设置上下、左右方向的值 padding: 20px，30px，40px 设置上、左右、下的值 padding: 20px，30px，40px，60px 设置上、右、下、左方向的值

padding-top:1px; 上内边距 padding-right:1px; 右内边距 padding-bottom:1px; 下内边距 padding-left:1px; 左内边距

margin 外边距 margin 外边距 margin:10px;设置四个方向的值 margin:10px 20px;上下 左右 margin:10px 20px 30px;上 左右 下 margin:10px 20px 30px 40px;上 右 下 左

margin-top:1px; 上外边距 margin-right:1px; 右外边距 margin-bottom:1px; 下外边距 margin-left:1px; 左外边距

盒子和盒子之间，块级元素与块级元素之间的距离，一般都会设置外边距 margin 盒子内的间距或者行内元素与行内元素之间的间距，一般都会设置 padding 内边距

margin 外边距可以设置负值 margin: -100px; margin-left/margin-top 设置负值时，不会撑出浏览器的屏幕，不会出现滚动条，会被浏览器吃掉一部分。

margin 外边距的问题

  • 两个元素是平级或同级关系时，给第一个元素设置 margin-bottom，给第二个元素设置 margin-top 值时，两个元素之间的间距是去 margin 的最大值，而不是两个 margin 值得相加之和。

  • 两个元素是包含关系时，给子元素设置 margin-top 时会出现值传递（传递给了父元素） - 解决方法： - 1、给父元素加一个 CSS 属性 overflow:hidden;溢出隐藏 - 2、去掉子元素的 margin-top 值，给父元素添加 padding-top 值----常用

border 边框 border 常用写法 border:1px solid red; border-top:1px solid red; 上边框 border-bottom:1px solid red;下边框 border-left:1px solid red; 左边框 border-right:1px solid red; 右边框

border-width:1px; 边框的宽度 border-width:1px 2px;上下 左右 border-width:1px 2px 3px;上 左右 下 border-width:1px 2px 3px 4px;上 右 下 左

border-style:solid; 边框的样式 border-style:dashed dotted; 上下 左右 border-style:dashed dotted solid;上 左右 下 border-style:dashed dotted solid double; 上 右 下 左

border-color:red; 边框的颜色 border-color:red,yellow,blue,green; 上 右 下 左

border 制作三角形

<style>
    div{
        width:0;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent transparent green;
        /*transparent 透明*/
    }
</style>
<div></div>

盒模型的计算公式 ALLWidth=width+左右 padding+左右 border ALLHiehgt = height + 上下 padding + 上下 border 和 margin 没有关系

通过属性 box-sizing 来设置盒子模型的解析模式

可以为 box-sizing 赋三个值：

content-box： 默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)

border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型

padding-box：将 padding 算入 width 范围