二、帖子父盒子的常规属性


首先得有个选择器名称，可以用id选择器，也可以用类选择器。我们用id选择器来举例说明：


<style>
#papa { /* 代码 */ }
</style>


<div id="papa"></div>


#papa 选择器体现在了 HTML 代码中的 id="papa" 之上，这是CSS选择器和HTML关联的做法。如果是 类选择器，.papa {/* 代码 */}，则HTML代码用 class="papa" 来建立二者间的关联。


下面来讲讲 #papa 的具体设置的属性代码（为了简洁我们将 <style>和</style>暂时去掉）：


#papa {
    position: relative; /* 设置相对定位 */
    width: 1024px; /* 设置宽度 */
    height: 640px; /* 设置高度 */
    left: -214px; /* 设置左边偏移量 */
    background: #ccc url('图片地址'); /* 设置背景颜色和背景图片 */
    box-shadow: 3px 3px 20px #000; /* 设置阴影 */
    border-radius: 6px; /* 设置圆角 */
}


做宽幅HTML帖子，上述的代码中，除了后两个属性不是必须的，前面的缺一不可。背景颜色建议加上与图片主色相近的颜色，这样当图片失效时整体还可一看。背景图片尺寸如果与盒子的尺寸一致，像上面这么设定就可以，否则的话，建议这样处理，以保证背景的美观：


    background: #ccc url('图片地址') no-repeat center / cover;


如果需要，还可以在父盒子设置字体，所设置的字体将在子元素中得到继承（除非子元素设置了自己的字体）。


此外，父盒子还可根据需要加入其它属性，如 padding（内边距）、margin（外边距）、border（边框线）等。例如上外边距、边框线：


    margin-top: 50px;
    border: 1px solid red;


盒子的属性没有顺序要求，也可以不分行，但每一个属性和属性值写完，需要用小角分号表达。小角分号是属性和属性之间的分隔符号。

前一篇: 一、CSS与HTML的关系及关联
下一篇: 三、简单了解文档流