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{
width: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{
width: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{
width: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{
width: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
>
|
计算结果：
4997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
