盒子模型布局稳定性
开始学习盒子模型,同学们最大的困惑就是, 分不清内外边距的使用,什么情况下使用内边距,什么情况下使用外边距?
答案是: 其实他们大部分情况下是可以混用的。 就是说,你用内边距也可以,用外边距也可以。 你觉得哪个方便,就用哪个。
但是,总有一个最好用的吧,我们根据稳定性来分,建议如下:
按照 优先使用 宽度 (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>