初识盒子模型

1.盒子模型组成

• 内容区域 - width & height

• 边框线 - border

属性值：边框线粗细 线条样式 颜色（不区分顺序）

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

设置单方向边框线

属性名：boder-方位名词

属性值：边框线粗细 线条样式 颜色（不区分顺序）

如：

    <style>
        div{
            border-left: 2px solid red;
            border-right: 2px solid green;
            border-top: 3px dotted orange;
            border-bottom: 3px dashed #D419F2;
            width: 200px;
            height: 200px;
        }
    </style>

•  内边距 - padding（出现在内容与盒子边缘）

​​​​​​​书写方式为
padding: 数字 + px;

作用：设置内容与盒子边缘之间的距离。

属性名：padding/padding-方位名词

padding多值写法

 按上下左右的顺序分配值，如果没有就往回走，往回走也不够？那就接着往后走！

加padding以及border会把尺寸变大的解决办法

• 默认情况

盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸

• 结论：给盒子加border / padding属性会撑大盒子

• 解决
  • 手动减法：减掉bodder / padding 的尺寸
  • 内减模式： box-sizing： border-box

• 外边距 - margin（出现在盒子外面）

margin: 数字 + px;

与padding属性值写法相同、含义相同

在页面水平居中的方法  margin：0 auto；利用auto自动设置左右外边距，前提要求是要有宽度

2.元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值：

3.外边距问题

3.1合并现象

场景：垂直排列的兄弟元素，中间的margin会合并

现象：取两个margin中较大值生效

解决办法：给一个盒子设置外边距就行

3.2塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷

现象：导致父级一起向下移动

子级div标签设置了外边距属性，但是父级同样向下移动，导致整体移动

解决办法：

• 取消子级margin，父级设置padding
• 父级设置overflow：hidden
• 父级设置border-top

下面两种方法是通过确定盒子的边缘来解决问题

4.行内元素 -- 内边距问题

场景：行内元素添加margin和padding，无法改变元素垂直位置

解决办法：给行内元素添加line-height行高属性可以改变垂直位置

5.盒子模型 -- 添加圆角

作用：设置元素的外边框为圆角

属性名：border-radius

属性值：数字+px 或者 百分比

属性值的意义为圆角半径

属性值可以写多个，从左上角开始赋值，与padding实现相同。

正圆形状

        给正方形盒子设置圆角属性为宽高一般 / 50%

    

img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border-radius: 50%;
}

胶囊形状

给长方形盒子设置为高度一半

    div {
            margin: 50px auto;
            width: 200px;
            height: 80px;
            background-color: orange;
            border-radius: 40px;
        }

6.盒子模型 -- 阴影属性

作用：给元素设置阴影效果

属性名：box-shadow

属性值：x轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

• X轴偏移量和Y轴偏移量必须书写
• 默认是外阴影，内阴影需要添加inset

加大阴影的尺寸以及偏移量