Head First and HTML-盒模型

目录

调整行高

line-height属性

Box model

修正背景图像

如何只在左边增加内边距

边框

样式

宽度

颜色

指定边框圆角

指定某一边的边框

id属性

---

调整行高

line-height属性

1.作用：允许指定文本中各行之间的垂直间距量；

2.可以继承；

3.类型：(1)像素px

              (2)百分数%

              (3)em

Box model

1. 理解：元素可以看作一个完整的盒子，其中包括了内容区(content area)、内边距(padding)、边框(border)以及外边距(margin)，在除内容区以外的其他区域里，又分为上部(top)、下部(bottom)、左部(left)以及右部(right);

2.内容区被透明的内边距、边框以及外边距包围，它们都是可选的；

3.在内容区中，内容与盒子边缘之间没有空间；

4.外边距提供元素之间的间距，而内边距是在内容周围增加额外的空间；

5.元素的背景颜色或背景图像(利用background-image、background-position、background-repeat属性)会延伸到内边距之下，但不会延伸到外边距。

修正背景图像

1.默认的，背景图像会重复，这时候就需要利用background-repeat属性中的no-repeat值使得图像只显示一次，其中，还包括repeat-x(只在水平方向上重复)、repeat-y(只在垂直方向上重复)以及inherit(按父元素的设置来处理）;

2.浏览器会默认的将背景图像放在元素的左上角，这时候可以利用background-position属性调整图像的位置，可以按像素指定，也可以指定为一个百分数，或者还可以使用关键字指定，如top、left、right、bottom以及center，例如top left就是“左上角”的意思。

如何只在左边增加内边距

1.利用padding-left属性；

2.顺序很重要:

.guarantee
{
    padding:        25px;
    padding-left:   80px;
}

这样会先设置整体的内边距为25px，在单独设置左边的内边距覆盖原先的。但如果将两者调换位置，左边内边距的设置就会失败，所以要严格注意顺序。

边框

样式

利用border-style属性控制边框的视觉样式:

                                                                  1.ridge(脊线)

                                                                  2.solid(实线)

                                                                  3.double(双线）

                                                                  4.groove(槽线)

                                                                  5.outset(外凸)

                                                                  6.inset(内凹）

                                                                  7.dotted(虚线)

                                                                  8.dashed(破折线)

宽度

利用border-width属性控制边框宽度，可以使用关键字(thin、medium以及thick)或像素指定宽度。

颜色

利用border-color属性设置边框颜色，可以使用颜色名、rgb值或十六进制码来指定颜色。

指定边框圆角

利用border-radius属性，可以使用像素或em指定圆角半径的大小，如果使用em，则是相对于元素字体的大小。

指定某一边的边框

e.g.border-top-color、border-bottom-style、border-top-left-radius等。

id属性

1.作用:如果只有一个元素需要增加样式，或者页面上只有一个元素，那就使用id来唯一的命名元素；

2.每个元素只能有一个id；

3.id名中不能出现空格或其他特殊字符；

4.如何在css中使用id：

(1)选择id为footer的任意元素：

#footer
{
    color: red;
}

(2)选择id为footer的一个p元素：

p#footer
{
    color: red;
}