前端学习（五）

第二part——CSS。

CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS 将网页内容和显示样式进行分离，提高了显示功能。

01-CSS属性：字体属性和文本属性

1、CSS的单位

html默认单位px，可以省略。

CSS中的单位是必须要写的。

1.1 绝对单位

1 in=2.54cm=25.4mm=72pt=6pc。

1.2 相对单位

px：像素

em：印刷单位相当于12个点

%：百分比，相对周围的文字的大小  

2、font字体属性 

css样式中，常见的字体属性有以下几种：

p{
    font-size: 50px;         /*字体大小*/
    line-height: 30px;      /*行高*/
    font-family: 幼圆,黑体;     /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
    font-style: italic ;        /*italic表示斜体，normal表示不倾斜*/
    font-weight: bold;    /*粗体*/
    font-variant: small-caps;  /*小写变大写*/
}

3、让单行文本垂直居中

vertical-align: middle; 属性

vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。

4、字号、行高、字体三大属性

（1）字号： font-size:14px;

（2）行高： line-height:24px;

（3）字体： font-family:"宋体";（font-family就是“字体”，family是“家庭”的意思）

是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）

格式： font: 加粗 字号/行高/ 字体 ​

注：连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。  

4.1 字体属性

（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：

    font-family: "华文彩云";

上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。

页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。

（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）

    font-family: "微软雅黑","宋体";

上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。

（3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：

    font-family: "Times New Roman","微软雅黑","宋体";

上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于smyhvae哈哈哈这段文字，smyhvae会采用Times New Roman字体，而哈哈哈会采用微软雅黑字体。

可是，如果我们把中文字体写在前面：(错误写法)

    font-family: "微软雅黑","Times New Roman","宋体";

上方代码会导致，中文和英文都会采用微软雅黑字体。

（4）所有的中文字体，都有英语别名。

微软雅黑的英语别名： font-family: "Microsoft YaHei";

宋体的英语别名： font-family: "SimSun";

于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：

    font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

（5）行高可以用百分比，表示字号的百分之多少。

一般来说，百分比都是大于100%的，因为行高一定要大于字号。

比如说， font:12px/200% “宋体”等价于font:12px/24px “宋体”。200%可以理解成word里面的2倍行高。

反过来， font:16px/48px “宋体”;等价于font:16px/300% “宋体”。

4.2 字体加粗属性 

在设置字体是否加粗时，属性值既可以填写normal、bold这样的加粗字体，也可以直接填写100至900这样的数字。normal的值相当于400，bold的值相当于700。  

5、文本属性 

• letter-spacing: 0.5cm ; 单个字母之间的间距

• word-spacing: 1cm; 单词之间的间距

• text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线

• text-transform: lowercase; 单词字体大小写。uppercase大写、lowercase小写

• color:red; 字体颜色

• text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify

• text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）

6、overflow属性：超出范围的内容要怎么处理

 overflow属性的属性值可以是：

• visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。

• hidden：不显示超过对象尺寸的内容。

• auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。

• scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。

7、鼠标的属性 cursor

• auto：默认值。浏览器根据当前情况自动确定鼠标光标类型。

• pointer：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

• hand：和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

02-CSS属性：背景属性 

background 的常见背景属性

css2.1 中，常见的背景属性有以下几种：（经常用到，要记住）

• background-color:#ff99ff; 设置元素的背景颜色。

• background-image:url(images/2.gif); 将图像设置为背景。

• background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）

  • no-repeat不要平铺；

  • repeat-x横向平铺；

  • repeat-y纵向平铺。

• background-position:center top; 设置背景图片在当前容器中的位置。

• background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。 属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。

• 另外还有一个综合属性叫做background，它的作用是：将上面的多个属性写在一个声明中。

CSS3 中，新增了一些background属性：

• background-origin

• background-clip 背景裁切

• background-size 调整尺寸

• 多重背景

1、background-color：背景颜色的表示方法

CSS2.1 中，颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。

CSS3 中，有一种新的表示颜色的方式：RGBA或者HSLA。RGBA、HSLA可应用于所有使用颜色的地方。下面分别介绍。

（1）用英语单词表示

能够用英语单词来表述的颜色，都是简单颜色，比如red、green、blue、orange、gray等。代码举例：

background-color: red;

（2）RGB 表示法

RGB 表示三原色“红”red、“绿”green、“蓝”blue。

光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。

比如红色：background-color: rgb(255,0,0);

黑色：background-color: rgb(0,0,0);

颜色可以叠加，比如黄色就是红色和绿色的叠加：background-color: rgb(255,255,0);

（3）RGBA 表示法

    background-color: rgba(0, 0, 255, 0.3);
​
    border: 30px solid rgba(0, 255, 0, 0.3);

代码解释：

• RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。

• R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1。

RGB色彩模式：

• 自然界中绝大部分颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。

• RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青。

• RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。

在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。

（4）十六进制表示法

比如红色：

background-color: #ff0000;

所有用#开头的色值，都是16进制的。

这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。

问：16进制中的28等于10进制的多少？ 答：2*16+8 = 40。

16进制中的af等于10进制的多少？ 答：10 * 16 + 15 = 175

以此类推：

• #ff0000等于rgb(255,0,0)。

• background-color: #123456;等价于background-color: rgb(18,52,86);

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc。

（4）HSLA 表示法

举例： background-color: hsla(240,50%,50%,0.4);

解释：

• H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。

• S 饱和度，取值范围 0%~100%。值越大，越鲜艳。

• L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。

• A 透明度，取值范围 0~1。

关于设置透明度的其他方式：

（1）opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。

（2）background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。

2、background-repeat属性

background-repeat:no-repeat;设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：

• no-repeat（不要平铺）

• repeat-x（横向平铺）

• repeat-y（纵向平铺）

3、background-position属性

background-position属性指的是背景定位属性。公式如下：在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。

（1）用像素值描述属性值：

格式如下：

        background-position:向右偏移量 向下偏移量;

属性值可以是正数，也可以是负数。比如：100px 200px、-50px -120px。

（2）用单词描述属性值：

格式如下：

        background-position: 描述左右的词 描述上下的词;

• 描述左右的词：left、center、right

• 描述上下的词：top 、center、bottom

比如说，right center表示将图片放到右边的中间；center center表示将图片放到正中间。

比如说，bottom表示图片的底边和父亲底边贴齐（好好理解）。

3、background-attachment 属性

background-attachment:scroll; 设置背景图片是否固定。属性值可以是：

• fixed（背景就会被固定住，不会被滚动条滚走）。

• scroll（与fixed属性相反，默认属性）

4、background 综合属性

background属性和border一样，是一个综合属性，可以将多个属性写在一起。

举例1:

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

    background-color:red;
    background-image:url(1.jpg);
    background-repeat:no-repeat;
    background-position:100px 100px;
    background-attachment:fixed;

5、backgroud-size属性：背景尺寸

（1）宽、高的具体数值
background-size: 500px 500px;

（2）宽高的百分比（相对于容器的大小）
background-size: 50% 50%;   // 如果两个属性值相同，可以简写成：background-size: 50%;

background-size: 100% auto;  //这个属性可以自己试验一下。

（3）cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。
background-size: cover;

（4）contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。
background-size: contain;

这里我们对属性值 cover 和 contain 进行再次强调：

• cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。

• contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域留白。

6、背景原点：background-origin属性

控制背景从什么地方开始显示。

（1）从 padding-box 内边距开始显示背景图
    background-origin: padding-box;           //默认值

padding：内边距

（2）从 border-box 边框开始显示背景图
    background-origin: border-box;

（3）从 content-box 内容区域开始显示背景图
    background-origin: content-box;

7、backgroud-clip属性

设置元素的背景（背景图片或颜色）是否延伸到边框下面

属性值可以是：

• border-box 超出 border-box 的部分，将裁剪掉

• padding-box 超出 padding-box 的部分，将裁剪掉

• content-box 超出 content-box 的部分，将裁剪掉

8、同时设置多个背景

我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。  

9、渐变：background-image

渐变分为：

• 线性渐变：沿着某条直线朝一个方向产生渐变效果。

• 径向渐变：从一个中心点开始沿着四周产生渐变效果。

• 重复渐变。

（1）线性渐变 

background-image: linear-gradient(方向, 起始颜色, 终止颜色);

方向可以是：to left、to right、to top、to bottom、角度30deg（指的是顺时针方向30°）。

（2）径向渐变

background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); 

中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。

10、clip-path：裁剪出元素的部分区域做展示

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

虽然clip-path不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。

clip-path属性的好处是，即使做了任何裁剪，容器的占位大小是不变的。比如上方代码中，容器的占位大小一直都是 320px * 320px。这样的话，也方便我们做一些动画效果。  

03-CSS样式表和选择器 

为什么需要css呢，html不可以吗？

HTML 的缺陷：

1. 不能够适应多种设备

2. 要求浏览器必须智能化足够庞大

3. 数据和显示没有分开

4. 功能不够强大

CSS 优点：

1. 使数据和显示分开

2. 降低网络流量

3. 使整个网站视觉效果一致

4. 使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）

比如说，有一个样式需要在一百个页面上显示，如果是 html 来实现，那要写一百遍，现在有了 css，只要写一遍。现在，html 只提供数据和一些控件，完全交给 css 提供各种各样的样式。

1、CSS语法

语法格式：（其实就是键值对）

选择器{ 属性名: 属性值; 属性名: 属性值; }

• 选择器代表页面上的某类元素，选择器后一定是大括号。

• 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。

• 冒号和属性值之间可以留一个空格（编程习惯的经验）。

• 如果一个属性有多个值的话，那么多个值用空格隔开。

2、CSS注释

CSS 只有/* */这种注释，没有//这种注释。而且注释要写在<style>标签里面才算生效。

3、CSS 的一些简单常见的属性

（1）字体颜色：（c）

color:red;

color 属性的值，可以是英语单词，比如 red、blue、yellow 等等；也可以是 rgb、十六进制。

（2）字号大小：（fos）

font-size:40px;

font 就是“字体”，size 就是“尺寸”。px 是“像素”。单位必须加，不加不行。

（3）背景颜色：（bgc）

background-color: blue;

background 就是“背景”。

（4）加粗：（fwb）

font-weight: bold;

font 是“字体” weight 是“重量”的意思，bold 粗。

（5）不加粗：（fwn）

font-weight: normal;

normal 就是正常的意思。

（6）斜体：（fsi）

font-style: italic;

italic 就是“斜体”。

（7）不斜体：（fsn）

font-style: normal;

（8）下划线：（tdu）

text-decoration: underline;

decoration 就是“装饰”的意思。

（9）没有下划线：（tdn）

text-decoration:none;

4、CSS的书写方式

1.行内样式：在某个特定的标签里采用 style 属性。范围只针对此标签。

2.内嵌样式（内联样式）：在页面的 head 标签里里采用<style>标签。范围针对此页面。

3.外链样式：引入外部样式表 CSS 文件。这种引入方式又分为两种：

3.1 采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

3.2 采用 import 导入，必须写在<style>标签中。然后用类似于@import url(a.css) ;这种方式导入。

4.1 行内样式

<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>

4.2 内嵌样式表

在 head 标签中加入<style>标签，对多个标签进行统一修改，范围针对此页面。

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

4.3 外部样式表

引入样式表文件的方式又分为两种：

• （1）采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

• （2）采用 import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

注：<link>标签的 rel 属性有两种值：

• stylesheet：定义的样式表

• alternate stylesheet：候选的样式表

5、CSS 的四种基本选择器

CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS 的选择器分为两大类：基本选择器和扩展选择器。

5.1 基本选择器：

• 标签选择器：针对一类标签

• ID 选择器：针对某一个特定的标签使用

• 类选择器：针对你想要的所有标签使用

• 通用选择器（通配符）：针对所有的标签都适用（不建议使用）

5.1.1 标签选择器：选择器的名字代表 html 页面上的标签

 标签选择器，选择的是页面上所有这种类型的标签，描述“共性”。

p{ font-size:14px; }

上方选择器的意思是说：所有的<p>标签里的内容都将显示 14 号字体。

【总结】

（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

5.1.2 ID选择器：规定用#定义

针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义。

#mytitle{ border:3px dashed green; }

id 选择器的选择符是“#”。

任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

• （1）只能有字母、数字、下划线。

• （2）必须以字母开头。

• （3）不能和标签同名。比如 id 不能叫做 body、img、a。

另外，特别强调的是：HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。

5.1.3 类选择器：规定用圆点.来定义

针对你想要的所有标签使用。css 中用.来表示类。

.one{ width:800px; }

和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：

• 特性 1：类选择器可以被多种标签使用。

• 特性 2：同一个标签可以使用多个类选择器。用空格隔开。

<h3 class="teshu  zhongyao">我是一个h3啊</h3>

注：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

问题：到底用 id 还是用 class？

答案：尽可能的用 class，除非极特殊的情况可以用 id。

原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有 id 的元素，有动态效果。

类上样式，id 上行为  

★ 上面这三种选择器的区别：

• 标签选择器针对的是页面上的一类标签。

• ID 选择器是只针对特定的标签(一个)，ID 是此标签在此页面上的唯一标识。

• 类选择器可以被多种标签使用。

6、CSS的几种高级选择器

高级选择器：

• 后代选择器：用空格隔开

• 交集选择器：选择器之间紧密相连

• 并集选择器（分组选择器）：用逗号隔开

• 伪类选择器

6.1 后代选择器: 定义的时候用空格隔开

对于E F这种格式，表示所有属于 E 元素后代的 F 元素，有这个样式。空格就表示后代。

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

后代选择器，描述的是祖先结构。

<style type="text/css">
    .div1 p {
        color: red;
    }
</style>

.div1 p 表示.div1的后代所有的p。

上方代码的意思是说：定义了<h3>标签中的<b>标签中的<i>标签的样式。

同理：h3 和 b 和 i 标签不一定是连续紧挨着的，只要保持一个后代的关联即可。  

6.2 交集选择器：定义的时候紧密相连

定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如div.haha，再比如p.special。

如果后一个选择器是类选择器，则写为div.special；如果后一个选择器 id 选择器，则写为div#special。

h3.special {
    color: red;
}

注意，交集选择器没有空格。

所以，没有空格的div.red（交集选择器）和有空格的div .red（后代选择器）不是一个意思。  

6.3 并集选择器

三种基本选择器都可以放进来。  

p,h1,.title1,#one {
    color: red;
}

04-CSS选择器：伪类

1、伪类

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

伪类选择器分为静态伪类和动态伪类两种。

（1）静态伪类：只能用于超链接的样式。如下：

• :link 超链接点击之前

• :visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

• :hover “悬停”：鼠标放到标签上的时候

• :active “激活”： 鼠标点击标签，但是不松手时。

• :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

2、超链接a标签

2.1 超链接a标签有4种伪类（即对应四种状态）

• :link “链接”：超链接点击之前

• :visited “访问过的”：链接被访问过之后

• :hover “悬停”：鼠标放到标签上的时候

• :active “激活”： 鼠标点击标签，但是不松手时。

在css中，这四种状态必须按照固定的顺序写（“爱恨准则”：love hate。必须先爱，后恨）：

a:link 、a:visited 、a:hover 、a:active

a:link、a:visited这两个伪类，要么同时写，要么同时不写。如果只写a属性和a:link属性，不规范。  

2.2 超链接的美化

a{}和a:link{}的区别：

• a{}定义的样式针对所有的超链接(包括锚点)

• a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

05-CSS样式表的继承性和层叠性

1、CSS的继承性

• 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。

• 关于盒子、定位、布局的属性，都不能继承。

2、CSS的层叠性

层叠性：计算权重，就是css处理冲突的能力。

当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：

• id 选择器

• 类选择器、属性选择器、伪类选择器

• 标签选择器、伪元素选择器

因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器

（1）计算权重

统计各个选择器的数量，优先级高的胜出。

（2）权重相同时

第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准。

如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的。

 3、CSS样式表的冲突的总结

• 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）

• 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器

• 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

4、!important标记：优先级最高

k:v !important;

（1）!important提升的是一个属性，而不是一个选择器

（2）!important无法提升继承的权重，该是0还是0

（3）!important不影响就近原则  

如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？ 答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。

 06-CSS盒模型详解

盒子模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。因为一张图片里并不能放东西，它自己就是自己的内容。

1、盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。

• width和height：内容的宽度、高度（不是盒子的宽度、高度）。

• padding：内边距。

• border：边框。

• margin：外边距。

CSS盒模型和IE盒模型的区别：

• 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

<body>标签也有margin

2、认识padding

2.1 padding区域也有颜色

padding就是内边距。css2.1前提下，padding的区域有背景颜色，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。  

2.2 padding有四个方向

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

（1）小属性的写法：

	padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 100px;

（2）综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

padding:30px 20px 40px 100px;

如果写了四个值，则顺序为：上、右、下、左。

如果只写了三个值，则顺序为：上、右和左、下。

如果只写了两个值，则顺序为：上和下、左和右。

（3）用小属性层叠大属性。  

padding: 20px;
padding-left: 30px;

如果顺序反过来，那么第一行的小属性无效，因为被第二行的大属性层叠掉了。

padding-left: 30px;
padding: 20px; 

3、认识border

border就是边框。边框有三个要素：像素（粗细）、线型、颜色。

.div1{
	width: 10px;
	height: 10px;
	border: 2px solid red;
}

颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。

3.1 border-style

`border:10px ridge red;`

3.2 border拆分

border属性是能够被拆开的，有两大种拆开的方式：

• （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）

• （2）按方向拆开：border-top、border-right、border-bottom、border-left。

现在我们明白了：一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

（1）按三要素拆：

border-width:10px;    //边框宽度
border-style:solid;   //线型
border-color:red;     //颜色。

等价于：

border:10px solid red;

(2)按方向来拆：

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

等价于：

border:10px solid red;

（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)

    border-top-width:10px;
    border-top-style:solid;
    border-top-color:red;
    border-right-width:10px;
    border-right-style:solid;
    border-right-color:red;
    border-bottom-width:10px;
    border-bottom-style:solid;
    border-bottom-color:red;
    border-left-width:10px;
    border-left-style:solid;
    border-left-color:red;

等价于：

border:10px solid red;

3、border-image属性

border-image: url(.img.png) 30 round;

07-浮动​

1、标准文档流

宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。

1.1 标准文档流的特性

（1）空白折叠现象：

无论多少个空格、换行、tab，都会折叠为一个空格。

（2）高矮不齐，底边对齐

（3）自动换行，一行写不满，换行写。  

1.2 行内元素和块级元素

1.2.1区别：

行内元素：

• 与其他行内元素并排；

• 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

• 霸占一行，不能与其他任何元素并列；

• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

1.2.2 分类

从HTML的角度来讲，标签分为：

• 文本级标签：p、span、a、b、i、u、em。

• 容器级标签：div、h系列、li、dt、dd。

现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

• 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。

• 块级元素：所有的容器级标签都是块级元素，还有p标签。

1.2.3 行内元素和块级元素的相互转换

（1）块级元素转换为行内元素：

一旦，给一个块级元素（比如div）设置：display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

• 此时这个div不能设置宽度、高度；

• 此时这个div可以和别人并排了。

（2）行内元素转换为块级元素：

一旦给一个行内元素（比如span）设置：display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

• 此时这个span能够设置宽度、高度

• 此时这个span必须霸占一行了，别人无法和他并排

• 如果不设置宽度，将撑满父亲

2、脱离标准流

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！  

css中一共有三种手段，使一个元素脱离标准文档流：

• （1）浮动

• （2）绝对定位

• （3）固定定位

2.1 浮动的性质

性质1：浮动的元素脱标

脱标即脱离标准流。

一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。

性质2：浮动的元素互相贴靠

性质3：浮动的元素有“字围”效果

标准流中的文字不会被浮动的盒子遮挡住。  

性质4：收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

2.2 浮动的清除

方法1：给浮动元素的祖先元素加高度

如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。

方法2：clear:both

clear就是清除，both指的是左浮动、右浮动都要清除。clear:both的意思就是：不允许左侧和右侧有浮动对象。

这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。

方法3：隔墙法

上面这个例子中，为了防止第二个div贴靠到第一个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。

内墙法：

方法4：overflow:hidden;

overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。

3、浏览器兼容问题 

兼容性1（微型盒子）

兼容性的第一条：IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。即：IE 6不支持微型盒子。

解决办法很简单，就是将盒子的字号大小，设置为小于盒子的高，比如，如果盒子的高为5px，那就把font-size设置为0px(0px < 5px)。

只要给css属性之前，加上下划线，这个属性就是IE6的专有属性。

于是乎，为了解决微型盒子（即height小于12px）的问题，正确写法：（注意不要忘记下划线）

height: 10px;
_font-size:0;

兼容性2

兼容性的第二条：IE6不支持用overflow:hidden;来清除浮动。

4、margin

margin塌陷/margin重叠

标准文档流中，竖直方向的margin不叠加，取较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。

后面还有一堆，太复杂了，等我实际敲代码的时候再说叭。 内容太多了，换一节继续码字。