border padding margin bg shadow font inline-block

最新推荐文章于 2021-10-23 09:03:05 发布

原创最新推荐文章于 2021-10-23 09:03:05 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨CSS中padding、margin的使用技巧，包括解决盒子高宽被撑大及外边距塌陷问题，同时介绍行内块元素的懒式写法与复杂样式如box-shadow、text-shadow的设置方法。

文章目录

1. 设置padding 盒子高宽被撑大

在这里插入图片描述

2. margin 垂直外边距塌陷

相邻

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>padding border margin</title>
	<style type="text/css">
		div.first {
			background: gray;
			width: 100px;
			height: 100px;
			margin-bottom: 20px;
		}
		div.two {
			background-color: blue;
			width: 100px;
			height: 100px;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<div class="first"></div>
	<div class="two"></div>
</body>
</html>

在这里插入图片描述

嵌套

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin</title>
	<style type="text/css">
		.one {
			width: 200px;
			height: 200px;
			background-color: gray;
		}
		.two {
			margin-top: 60px;
			background-color: blue;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div class="one">
		<div class="two"></div>
	</div>
</body>
</html>

外盒子也跟着移动了

定义外盒子 border 或者padding 或者 overflow:hidden

3. 懒式写法

magin padding
一个值：全部
两个值：上下、左右
三个值：上、左右、下
四个值：上、右、下、左
border-radius
一个值：全部
两个值：左上右下、右上左下

三个值：左上、右上左下、右下

四个值：左上、右上、右下、左下
魔性 background 无顺序要求

background: transparent 50% 0  repeat-y url(L:\\1.png) scroll  ;

background-position 混合写
background-position: 30px bottom;
顺序从左到右依次： x坐标、y坐标
box-shadow
box-shadow:水平阴影位置垂直阴影位置模糊距离（虚实）阴影尺寸（影子大小）阴影颜色内/外阴影；
text-shadow
text-shadow:水平位置垂直位置模糊距离阴影颜色;
font
选择器{font: font-style font-weight font-size/line-height font-family;}
固定顺序，size和familiy必写