CSS 内外边距

padding 内边距

padding 属性用来指定元素的内容与元素边框之间的空隙。

padding 属性的单位通常是像素，也可以是EM和百分比。

如果使用百分比，内边距就是浏览器窗口的一个百分比。

如果一个盒子的宽度已经指定，后面再添加内边距，原来盒子的整体大小会增大。

如下面的示例：

<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个内边距设置不同的数值，可以做不不规则的外观。

示例：

<!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和百分比。

如果使用百分比，外边距就是浏览器窗口的一个百分比。

如果一个盒子的宽度已经指定，后面再添加外边距，原来盒子的整体大小会增大。

两个一样大小的盒子，有外边距的盒子会多出空隙。

示例：

<!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即可。

如果要盒子在页面中居中，需要为盒子指定一个宽度。

示例：

<!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 将一个元素从页面上隐藏。

内联元素与块级元素之间的转换，最典型的应用是菜单，如：

<!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显示元素。

示例：

<!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>

计算结果：