CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem

// 设置元素尺寸
div {
	width: 200px;
	height: 200px;
}

// 限制元素尺寸
div {
	min-width: 100px;
	min-height: 100px;
	max-width: 300px;
	max-height: 300px;
}

// auto 自适应
div {
	width: auto;
	height: auto;
}

// 百分比方式
#a {
	background: silver;
	width: 200px;
	height: 200px;
}
#b {
	background: gray;
	width: 80%;
	height: 80%;
}
<div id="a">
<div id="b">我是 html5</div>
</div>

// 设置四个内边距
div {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}
// 简写形式，分别为上 10px、右 10px、下 10px、左 10px
div {
	padding: 10px 10px 10px 10px;
}
// 简写形式，分别为上 10px，左右 50px，下 200px
div {
	padding: 10px 50px 200px;
}
// 简写形式，分别是上下 10px，左右 20px
div {
	padding: 10px 20px;
}
// 简写形式：上下左右均 10px
div {
	padding: 10px;
}

// 设置四个外边距
div {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
// 简写形式，分别为上 10px、右 10px、下 10px、左 10px
div {
	margin: 10px 10px 10px 10px;
}
// 简写形式，分别为上 10px，左右 50px，下 200px
div {
	margin: 10px 50px 200px;
}
// 简写形式，分别是上下 10px，左边 20px
div {
	margin: 10px 20px;
}
// 简写形式：上下左右均 10px
div {
	margin: 10px;
}

// 设置溢出为 auto 值
div {
	overflow-x: auto;
}

// 设置元素隐藏，但占位
div {
	visibility: hidden;
}
// 隐藏表格的行或列，但不占位，Chrome 和 Opera 不支持
table tr:first-child {
	visibility: collapse;
};

// 将行内元素转成块级元素
span {
	background: silver;
	width: 200px;
	height: 200px;
	display: block;
}
// 将块级元素转换成行内元素
div {
	background: silver;
	width: 200px;
	height: 200px;
	display: inline;
}
// 将块级元素转化成行内-块元素
div {
	background: silver;
	width: 200px;
	height: 200px;
	display: inline-block;
}
// 将元素隐藏且不占位
div {
	display: none;
}

// 实现联排效果
#a {
	background: gray;
	float: left;
}
#b {
	background: maroon;
	float: left;
}
#c {
	background: navy;
	float: left;
}
// 实现元素右浮动
#c {
	background: navy;
	float: right;
}
// 取消元素的浮动
#c {
	background: navy;
	float: none;
}

// 两边均不可浮动
#c {
	background: navy;
	clear: both;
}

// 最简单的边框，边框长度默认 3px，边框颜色为黑色
div {
	border-style: solid;
}
// 配置完整的边框
div {
	border-style: solid;
	border-width: 2px;
	border-color: red;
}

// solid 实线使用频率最高
div {
	border-style: solid;
	border-width: 10px;
	border-color: red;
}

// 只设置顶端
div {
	border-top-style: solid;
	border-top-width: 10px;
	border-top-color: red;
}

// 简写形式四条边设置
div {
	border: 10px solid red;
}

// 设置圆角矩形
div {
	border: 10px solid red;
	border-radius: 10px;
}
// 四条边分别设置
div {
	border: 10px solid red;
	border-radius: 10px 20px 30px 40px;
}

div {
	background-color: silver;
}

div b {
	background-color: transparent;
}

body {
	background-color: silver;
}

body {
	background-image: url(loading.gif);
}

div {
	background-image: none;
}

body {
	background-image: url(loading.gif);
	background-repeat: no-repeat;
}

body {
	background-image: url(loading.gif);
	background-repeat: no-repeat;
	background-position: top;
}

body {
	background-image: url(loading.gif);
	background-repeat: no-repeat;
	background-position: 20px 20px;
}

body {
	background-image: url(loading.gif);
	background-size: cover;
}

div {
	background-image: url(loading.gif);
	background-size: contain;
}

body {
	background-image: url(loading.gif);
	background-size: 240px 240px;
}

body {
	background-image: url(loading.gif);
	background-attachment: fixed;
}

div {
	width: 400px;
	height: 300px;
	border: 10px dashed red;
	padding: 50px;
	background-image: url(img.png);
	background-repeat: no-repeat;
	background-origin: content-box;
}

div {
	width: 400px;
	height: 300px;
	border: 10px dashed red;
	padding: 50px;
	background-image: url(img.png);
	background-repeat: no-repeat;
	background-origin: border-box;
	background-clip: padding-box;
}

div {
	width: 400px;
	height: 300px;
	border: 10px dashed red;
	padding: 50px;
	background: silver url(img.png) no-repeat scroll left top/100%
	border-box content-box;
}

[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position] / [ background-size]
[background-origin]
[background-clip];

table {
	border-collapse: collapse;
}

table {
	border-spacing:10px;
}

table {
	caption-side: bottom;
}

table {
	empty-cells: hide;
}

table {
	table-layout: fixed;
}

ul {
	list-style-type: square;
}

ul {
	width: 120px;
	list-style-position: inside;
}

ul {
	list-style-image: url(bullet.png);
}

ul {
	list-style: lower-alpha inside url(bullet.png);
}

table tr td {
	vertical-align: bottom;
}

b {
	vertical-align: super;
}

div span {
	vertical-align: -200px;
}

p {
	color: red;
}

p {
	color: red;
	opacity: 0.5;
}

div {
	width: 200px;
	height: 200px;
	border: 10px solid silver;
	box-shadow: 5px 4px 10px 2px gray;
}

box-shadow: 5px 4px 10px 2px gray inset;

div {
	width: 200px;
	height: 200px;
	border: 10px solid silver;
	outline: 10px double red;
}

div {
	cursor: move;
}

// 因为目前处在标准阶段，没必要写前缀了
div {
	border-radius: 50px;
}
// 实验阶段的写法
div {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

// 前缀写法写在标准后面，且值不一样，就会出现问题
div {
	border-radius: 50px;
	-webkit-border-radius: 100px;
}

// 首先，来一段 HTML
<h1>标题<em>小标题</em></h1>
<p>我是一个段落，我是一段<code>代码</code></p>
// 其次来一段 CSS
html {
	font-size: 62.5%;
}
h1 {
	font-size: 3em;
}
p {
	font-size: 1.4em;
}

// 直接基于<html>的单位
code {
	font-size: 1.1rem;
}