Html和Css学习笔记-css进阶-盒模型

此篇博客是我的复习笔记，html和css学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开html的书略读，后记录了标签，元素，属性的具体意义。

这里所介绍的html和css的版本为html5与css3

Html是超文本标记语言（英语全称：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

Css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来html和xml等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

Html和Css验证工具的地址：http://validator.w3.org/

一.盒模型的概念

从css角度来看每个元素就是一个盒子，每个盒子由一个内容区以及可选内边距，边框和外边距组成，内容区包括内容（例如文本或图像），内容区被可选的透明内边距包围，内边距可能放置一个可选的边框，最后，有一个可选的透明外边距包围所有部分。

内容区：每个元素都会有一些内容，如文本或图像，这个内容会放在一个盒子里，这个盒子的大小正好能包含所有内容。注意，在内容区中，内容与盒子边缘之间没有空间

内边距：所有盒子在内容区周围可能有一层内边距。内边距是可选的，所以不一定有，不过通过使用内边距们可以在内容与盒子边框之间创建一些看得到的空间。内边距是透明的，没有颜色，也没有自己的装饰，通过css可以控制整个内容区周围内边距的宽度，甚至可以控制任意一边的内边距宽度。

边框：元素周围可以有一个可选的边框。这个边框会包围内边距，另外，因为它是围绕内容与同一页面上的其他元素隔开，边框可以有不同的宽度，颜色和样式。

外边距：外边距也是可选的，包围着边框。利用外边距，可以在同一页面上的不同元素之间增加空间。如果两个盒子紧挨着，外边距就相当于它们之间的空间，类似于内边距，外边距也是透明的，本身没有颜色或装饰。

二.新增css属性

1.line-height：xxx;设置行间距（大小单位可以使用百分比，em，px表示）

2.padding：xxx;设置内边距（大小单位可以使用百分比，em，px表示）

3.padding-left：xxx；设置左边增加内边距（大小单位可以使用百分比，em，px表示）

4.margin：xxx；设置外边距（大小单位可以使用百分比，em，px表示）

5.margin-right：xxx；设置右边增加外边距（大小单位可以使用百分比，em，px表示）

6.background-image: url(xxxx/xxxx);为某一个元素设置背景图像（url属性后面可以使相对路径，也可以是完整的url链接）

7.background-position:xxxx;设置图像位置

8.background-repeat:xxx;设置图像在水平或垂直方向上重复（repeat），不重复（no-repeat），repeat-x(图像只在水平方向上重复)，repeat-y（图像只在垂直方向上重复），inherit（按父元素的设置来处理）

9.border-style:xxx;设置边框样式可选参数有：solid（实线），double（双线），groove（槽线），outset（外凸），dotted（虚线），dashed（破折线），inset（内凹），ridge（脊线）

10.border-width:xxx;设置边框宽度可使用关键字，像素来指定宽度。

11.border-color：xxx;设置边框颜色

12.border-top（可更改方向）-color（可更改颜色，样式，宽度）指定某一边的边框

13.border-radius:xxx;设置边框圆角（大小单位可以使用百分比，em，px表示）

14.border-top（可更改位置）-left（可更改方向）-radius：xxx；分别指定每一个角

三.id属性的使用

1.在html中加入id属性的格式，如下

<元素 id="id属性的名字"xxxxxxxxxxx>

2.在css中使用id的格式，如下

第一种：

#id属性的名字{
    属性：参数；
    属性：参数；
}
这会选择id属性名字的任意元素

第二种

元素#id属性的名字{
    属性：参数；
    属性：参数；
}
这会选择一个id为属性名字的元素

四.混合css样式表

1.在同一个页面中可以使用多个css样式表对不同的元素，id，类，字体，颜色等进行分别配置，具体设置如下

<link type="text/css"  href="xxxx.css"rel="stylesheet">
<link type="text/css"  href="xxxx.css"rel="stylesheet">
<link type="text/css"  href="xxxx.css"rel="stylesheet">

多个样式表由上到下排列，最下面的样式表最优先

2.对css样式表指定设备，例如，笔记本电脑，手机，平板，都有其对应的css样式表

需要加入media参数，格式如下

<link type="text/css"  href="xxxx.css"rel="stylesheet" media="screen and (max-device-width):xxx">

其中screen参数指定了有屏幕的设备，max-device-width指定屏幕宽度，还可以指定显示方向，使用orientation属性，横向（landscape），纵向（portrait）

还有一种指定打印设备，如下

<link type="text/css"  href="xxxx.css"rel="stylesheet" media="print">

另外一种方法为css指定特殊属性的设备，写入css中，格式如下：

@media screen and (min-device-width:xxxx;){
   属性：参数;
   属性：参数;
   属性：参数;
}