Web实训学习-day04：盒子模型

盒子边框

属性	属性值	作用
border-width	px	边框粗细
border-style	none/solid(实线)/dashed(虚线)/dotted(点线)/double(双实线)	边框样式
border-color	RGB/十六进制/预定颜色	边框颜色
border-radius	百分比/px	边框圆角

border的三角原理

实现

将不需要方向的border设置为透明（transparent），就可以用来实现三角形了。

.box {
    width: 0;
    height: 0;
    border-top: 20px solid red;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
}

内边距

属性	属性值	描述
padding-top	px	上内边距
padding-right	px	右内边距
padding-bottom	px	下内边距
padding-left	px	左内边距

.box {
    padding: 20px 20px;/*上下 左右*/
    padding: 20px 20px 20px;/*上 左右 下*
}

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度或者说是继承了父亲的宽度，则padding 不会影响本盒子大小。

外边距

属性	属性值	描述
margin-top	px	上内边距
margin-right	px	右内边距
margin-bottom	px	下内边距
margin-left	px	左内边距

.box {
    margin: 20px 20px;/*上下 左右*/
    margin: 20px 20px 20px;/*上 左右 下*
}

外边距实现盒子居中

实现盒子居中的前提条件

1. 必须设置宽度
2. 必须是块级元素

然后给左右外边距设置为 auto 就可以使块级元素水平居中

标准盒子模型的大小计算

内盒子：content + padding + border

外盒子：content + padding + border + margin

清除内外边距

* {
    margin: 0;
    padding: 0;
}

外边距合并

使用margin定义块元素的上下外边距时，有可能出现外边距合并

• 外边距合并之后以距离大的为准
• 如果出现外边距塌陷，就要避免这种情况发生

嵌套的盒子外边距也有可能出现塌陷

解决嵌套的盒子塌陷问题：

1. 给父元素添加overflow: hidden;
2. 设置1像素的边框，上下内边距

插入图片和背景图片区别

1. 插入图片我们用的最多 比如产品展示类
2. 背景图片一般用于小图标背景或者超大背景图片

CSS盒模型大小计算

盒子模型分为：标准盒模型、怪异盒模型

IE盒子（border-box）：又称怪异盒模型，是指块元素box-sizing属性为border-box的盒模型，一般在IE浏览器中默认为这种怪异盒模型。

在这种盒模型下，我们所说的元素的width，实际上包含了 content + padding - border

盒子总宽 = margin + width

区别：

• 标准盒模型：content = width + padding + border
• IE盒模型：width = content + padding + border

盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;