/* css注释 */

* {
    margin: 0;
/*     margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
    margin:10px 5px 15px 20px;
    上外边距是 10px
    右外边距是 5px
    下外边距是 15px
    左外边距是 20px 

    margin:10px 5px 15px;
    上外边距是 10px
    右外边距和左外边距是 5px
    下外边距是 15px
    等多种写法
    */
    padding: 0;
    /* padding 简写属性在一个声明中设置所有内边距属性。 
    padding:10px 5px 15px 20px;
    等同margin多种写法
    */
    box-sizing: border-box;
    /* 指定两个boxes接壤
    指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
    box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。
    没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)
    上述设置即为边框零距离接壤
     */
}

body {
    max-width: 700px;
    margin: auto;

    /* 浏览器计算外边距。 */
    /* 
    值	描述
    auto	浏览器计算外边距。
    length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
    %	规定基于父元素的宽度的百分比的外边距。
    inherit	规定应该从父元素继承外边距。 
    */
}

h1 {
    margin: 50px 0;
    border-bottom: 1px solid #000;
    /* 设置下边框的样式： 体现出的是下划线 */
    text-align: center;
    /* text-align 属性规定元素中的文本的水平对齐方式。 */
    /* 
    值	描述
    left	把文本排列到左边。默认值：由浏览器决定。
    right	把文本排列到右边。
    center	把文本排列到中间。
    justify	实现两端对齐文本效果。----最后一个水平对齐属性是 justify，它会带来自己的一些问题。
    inherit	规定应该从父元素继承 text-align 属性的值。 */
}

textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
    /* 设置 * 元素的下外边距： */
}

input {
    width: 100%;
    padding: 10px;
    margin-right: 20px;
    /* 设置 * 元素的右外边距： */
}

/* <footer> 标签定义文档或节的页脚。 */
.footer {
    text-align: center;
    margin: 50px 0;
}