第四课 盒子模型★

1.布局标签(作为容器,没有语义)

• div(division) 块状标签 会自动换行
• span 行内标签 不会自动换行

2.盒子模型/框模型

组成部分	单词
外边距	margin
边框	border
内边距/填充	padding
内容	content

盒子分为两类:
默认是内容盒子,此类盒子加填充会随之变大;

<style>
div{
	boxsizing:content-box;
}
</style>

常用的是边框盒子,不会随加填充而变大,但会压缩内容.

div{
	boxsizing:border-box;
}

盒子的部分属性演示:

<style>
div{
	border-width:1px     线框粗细为1像素
	margin-top:10px;     上方外边距为10像素
	border-style:solid   线型为实线(虚线dashed  点dotted  立体groove)
	padding-top:20px     上方填充20像素
}
</style>

或

<div  style="width: 10px; height: 10px; display:inline-block;"></div>

这里本身的style中描述的是盒子的大小为10*10像素,并保持在同一行内

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

---

*①在div标签中添加 display:inline-block 将两个div放在同一行
*②可以将border属性合并来写:border:10px dashed blue;
**③当合并给盒子设置不同数值的边框线或者弧度时,按照顺时针顺序对应 上/右/下/左 ;写三个值的时候为 上/左右/下 ;两个值的时候为 上下/左右 *
*用 color:transparent; 可以将边框设为透明色
*弧度值设置为 50% 时显示为 正圆
*颜色,线型,弧度都可以像线宽一样通过不同数值设置不同样式,顺序都是上右下左

---

第③点举例:

<style>
div{
	border-radius:20px 0 30px;
	边框弧度    20px对应 左上, 0px对应 右上左下 ,30px对应 右下
}
</style>

---

附:盒子阴影

<style>
	div{
		box-shadow:10px 20px 10px red;
	}
</style>