CSS 盒子模型（三）

最新推荐文章于 2024-06-18 23:59:11 发布

转载最新推荐文章于 2024-06-18 23:59:11 发布 · 208 阅读

收录于

web前端

盒子模型布局稳定性

开始学习盒子模型，同学们最大的困惑就是，分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

答案是：其实他们大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。

但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：

按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。

  width >  padding  >   margin

原因：

margin 会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题（嗨皮）我们经常使用宽度剩余法高度剩余法来做。

CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: border-box 盒子大小为 width

2、box-sizing: content-box 盒子大小为 width + padding + border

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3盒子模型</title>
	<style>
	  div:first-child {
	  	width: 200px;
	  	height: 200px;
	  	background-color: pink;
	  	box-sizing: content-box; /* 就是以前的盒模型 w3C*/
	  	padding: 10px;
	  	border: 15px solid red;  /* 盒子大小为 width + padding  + border */
	  }
	  div:nth-child(2) {
	  	width: 200px;
	  	height: 200px;
	  	background-color: purple;
	    box-sizing: border-box; /*padding border 不撑开盒子*/
	  	padding: 10px;
	  	border: 15px solid skyblue; 
	  	margin: 10px;
	  }
	</style>
</head>
<body>
	<div>content-box</div>
	<div>border-box</div>
</body>
</html>

盒子阴影

语法格式

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子阴影</title>
	<style>
	h1 {
		font-size: 100px;
		text-shadow: 5px 3px 3px rgba(0,0,0,0.5);/* 水平距离 垂直距离 模糊 阴影颜色 */
	}
	div {
		width: 200px;
		height: 200px;
		border: 1px solid #F00;
		/* 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影 */
		box-shadow: 0px 15px 30px  rgba(0,0,0,0.4) ; /* 小米商品的效果 */
	}
	</style>
</head>
<body>
	<h1>逆天了</h1>
	<div></div>
</body>
</html>

在这里插入图片描述

水晶

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水晶图片案例</title>
	<style>
	div {
		width: 246px;
		height: 246px;
		line-height: 246px;
		background-color: pink;
		margin: 100px;
		background: url(../images/shui.jpg) 0 0 no-repeat;
		font-size: 30px;
		text-align: center;
		color: rgba(255,255,255,0.7); /* 颜色半透明 */
		border-radius: 50%; /* 变成一个圆 */
		box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.4) inset,
		5px 4px 10px rgba(0,0,0,0.3)  /* 多效果 */
		; /* 内阴影 */
	}
	</style>
</head>
<body>
	<div>水晶图片</div>
</body>
</html>

在这里插入图片描述