Web实训学习day04：盒子模型

盒子边框

border的三角原理

实现

将不需要方向的border设置为透明&＃xff08;transparent&＃xff09;&＃xff0c;就可以用来实现三角形了。

.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;
}


内边距

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


注意&＃xff1a;

1、宽度属性width和高度属性height仅适用于块级元素&＃xff0c;对行内元素无效&＃xff08; img 标签和 input除外&＃xff09;。

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

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

外边距

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


外边距实现盒子居中

实现盒子居中的前提条件

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

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

标准盒子模型的大小计算

内盒子&＃xff1a;content &＃43; padding &＃43; border

外盒子&＃xff1a;content &＃43; padding &＃43; border &＃43; margin

清除内外边距

* {margin: 0;padding: 0;
}


外边距合并

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

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

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

解决嵌套的盒子塌陷问题&＃xff1a;

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

插入图片和背景图片区别

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

CSS盒模型大小计算

盒子模型分为&＃xff1a;标准盒模型、怪异盒模型

IE盒子&＃xff08;border-box&＃xff09;&＃xff1a;又称怪异盒模型&＃xff0c;是指块元素box-sizing属性为border-box的盒模型&＃xff0c;一般在IE浏览器中默认为这种怪异盒模型。

在这种盒模型下&＃xff0c;我们所说的元素的width&＃xff0c;实际上包含了 content &＃43; padding - border

盒子总宽 &＃61; margin &＃43; width

区别&＃xff1a;

• 标准盒模型&＃xff1a;content &＃61; width &＃43; padding &＃43; border
• IE盒模型&＃xff1a;width &＃61; content &＃43; padding &＃43; border

盒子阴影

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