1 水平对齐

文本对齐 text-align

h1 { text-align: center }

运行效果：

1-1 使用 margin 属性来水平对齐

把左和右外边距设置为 auto，规定的是均等地分配可用的外边距

div {

  width: 300px;

  background-color: #a7d;

  margin-right: auto;

  margin-left: auto

}

运行效果：

1-2 使用 position 属性进行左和右对齐

对齐元素的方法之一是使用绝对定位：

div {

  width: 300px;

  background-color: #a7d;

  position: absolute;

  red: 150px;

  top: 100px

}

运行效果：

绝对定位元素会被从正常流中删除，并且能够交叠元素。

.div1 {

  width: 300px;

  height: 300px;

  background-color: #a7d;

  position: relative;

  left: 150px;

  top: 100px

}

.div2 {

  width: 100px;

  height: 100px;

  background-color: #07ccd3;

  position: absolute;

  top: 150px;

  left: 150px

}

运行效果：

1-3 使用 float 属性来进行左和右对齐

对齐元素的另一种方法是使用 float 属性：

.div2 {

  width: 100px;

  height: 100px;

  background-color: #07ccd3;

  float: right;

  margin: 10px

}

运行效果：

2 尺寸

2-1 像素

像素（px）设置宽度，文本宽度会被固定，不会发生变化！

h1 {

  width: 200px;

  background-color: #a7d

}

运行效果：

2-2 百分比

百分比（%）设置宽度，文本宽度会随着父元素宽度的变化而变化，若无父元素，便随视图宽度的变化而变化

h1 {

  width: 20%;

  background-color: #a7d

}

运行效果：

文本宽度可以设置最大宽度和最小宽度！

最大宽度 “ max-width ”

最小宽度 “ min-width ”

用百分比（%），像素（px）和数值来设置段落的行间距

p {

line-height: 200%

/* line-height: 30px */

/* line-height: 2 */

}

运行效果：

用 百分比（%）设置段落的行间距

大多数浏览器中默认行高大约是 110% 到 120%

用 像素（px）设置段落的行间距

大多数浏览器中默认行高大约是 20px

用 数值 设置段落的行间距

默认行高大约是 1