padding 内边距
padding 属性用来指定元素的内容与元素边框之间的空隙。
padding 属性的单位通常是像素，也可以是EM和百分比。
如果使用百分比，内边距就是浏览器窗口的一个百分比。
如果一个盒子的宽度已经指定，后面再添加内边距，原来盒子的整体大小会增大。
如下面的示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html lang="en"><head> <meta charset="UTF-8"> <title>内边距padding</title> <style> p{ 300px; border:2px solid #333; } p.one{ padding:10px; } </style></head><body><p>学编程，上利永贞网</p><p class="one">study hard, improve every day</p></body></html> |
study hard, improve every day 这段话内边距加大后，整个盒子增大了。
计算结果：
内边距还有4个方向的属性，分别指明4个内边。
- padding-top
- padding-right
- padding-bottom
- padding-left
这样排序的序列是因为padding属性的快捷试写法指定的值是按这样的序列的。
分别为4个内边距设置不同的数值，可以做不不规则的外观。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>不规则内边距padding</title> <style> p{ 300px; border:2px solid #333; } p.one{ padding-top:20px; padding-right:30px; padding-bottom:10px; padding-left:50px; } </style></head><body><p>学编程，上利永贞网</p><p class="one">study hard, improve every day</p></body></html> |
计算结果：
margin 外边距
margin 属性用盒子之间的空隙。
margin 属性的单位通常是像素，也可以是EM和百分比。
如果使用百分比，外边距就是浏览器窗口的一个百分比。
如果一个盒子的宽度已经指定，后面再添加外边距，原来盒子的整体大小会增大。
两个一样大小的盒子，有外边距的盒子会多出空隙。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>外边距margin</title> <style> p{ 300px; border:2px solid #333; padding:10px; } p.one{ margin:10px; } </style></head><body><p>学编程，上利永贞网</p><p class="one">study hard, improve every day</p></body></html> |
计算结果：
下面的盒子有外边，上面的盒子没有外边，放在一起就产生了折叠效果。
外边距在页面排版细节处理上特别有用，如一点细微调整、对齐等。
外边距还有4个方向的属性，分别指明4个外边。
- margin-top
- margin-right
- margin-bottom
- margin-left
这样排序的序列是因为margin属性的快捷试写法指定的值是按这样的序列的。
分别为4个外边距设置不同的数值，可以做不不规则的外观。
示例，略，同学们可以尝试下。
内容居中
居中是排版中常见的需求，有文本居中对齐，盒子居中对齐。
盒子居中对齐很简单，只要将margin-left和margin-rigth的值设置为auto即可。
如果要盒子在页面中居中，需要为盒子指定一个宽度。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子居中</title> <style> p{ 300px; border:2px solid #333; padding:10px; margin-top:100px; margin-left:auto; margin-right:auto; } </style></head><body><p>学编程，上利永贞网</p></body></html> |
计算结果：
内联元素与块级元素的转换
块级元素：块元素换行显示，它的实例包括<h1>~<h6>、<p>和<div>元素等。
内联元素：内联元素流动于文本中并且不会换行，它的实例包括<b>、<i>、<img>、<em>和<span>
内联元素和块级元素之间可以相互转换。关键技术使用dispaly属性。display属性的值有：
- inline 将一个块级元素的外观像内联元素一样。
- block 将一个内联元素的外观像块级元素一样。
- inline-block 可以让一个块级元素像内联元素一样浮动，并保持其它的块级元素特征。
- none 将一个元素从页面上隐藏。
内联元素与块级元素之间的转换，最典型的应用是菜单，如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>块级元素转内联元素实现菜单</title> <style> li{ display:inline; margin-right:10px; } li.one{ display:none; } </style></head><body> <ul> <li>首页</li> <li>HTML</li> <li>CSS</li> <li class="one">Java</li> <li>关于</li> </ul></body></html> |
计算结果：
而使用none值的<li>没有显示。
隐藏盒子
visibility属性可让盒子隐藏，它有两个值：
hidden隐藏元素，隐藏后，它的位置会显示空白，仍然点个位置。
visible显示元素。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>隐藏元素</title> <style> li{ display:inline; margin-right:10px; } li.one{ visibility:hidden; } </style></head><body> <ul> <li>首页</li> <li>HTML</li> <li>CSS</li> <li class="one">Java</li> <li>关于</li> </ul></body></html> |
计算结果：
