CSS

CSS的出现

在页面成型的初期，我们当靠HTML就能完成一些简单的页面设计和控制，但是随着互联网的发展以及用户的需求越来越高，所以最页面的要求也越来越高，最初的HTML虽然能满足一些简单的样式需求，但是随着功能的增加，HTML里面的内容也越来越多，显得杂乱无章，所以这个时候CSS就出现了！

CSS的功能

如果说页面是一个人的整个部分，那么HTML是骨架，而CSS就是他的衣服了！

CSS功能：样式的控制，让页面更加丰富多彩。(美化样式)

• 设置HTML的文本内容（字体，大小，对齐方式等等）
• 图片的外形（宽高，边框样式，边距等等）
• 版面的布局等外观显示
• 以HTML为基础，提供字体，背景，颜色，等控制整体排版，而且还可以针对不同的浏览器设置不同的样式。如何引入CSS样式表

如何引入CSS样式表？（书写位置）

CSS可以写到那个位置？ 是不是一定写到html文件里面呢？

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1……;">内容

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

注意：

• link是自闭合标签！

• link标签需要放在head头部标签中，并且必须指定link标签的三个属性

• 属性如下：

  herf：定义所链接外部样式表文件的URL，可以相对路径和绝对路径。
  type：定义所链接文档的类型，如（text/css），表示链接的外部文件为css样式
  rel：定义当前文档与被链接文档之间的关系，在这里指定为”stylesheet“，表示被链接的文档是一个样式表文件。
  

三种选择器整合

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

CSS的使用规则

h1{
    color:red;font-size:25px
}

在上面的样式规则中:

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

2.属性和属性值以“键值对”的形式出现。

3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

4.属性和属性值之间用英文“:”连接。

5.多个“键值对”之间用英文“;”进行区分。

可以用段落 和 表格的对齐的演示。

CSS基础选择器

标签选择器（元素）

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

标签选择器 可以把某一类标签全部选择出来 div span

类选择器&&多类名选择器

类选择器

* .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
* 标签调用的时候用 class=“类名”  即可。

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。

注意事项：

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名， 尽量使用英文字母来表示。

多类名选择器

注意：

1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。

使用：

刘德华
邓超
彭于晏
天

类名选择器 ：< div class=“nav”> 这个 div 的名字 就是 nav nav 就是 div 这个 div 也是 nav

< 人 class = 刘德华 > 我们想要吧div 找到 div {} .nav {}

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

id选择器和类选择器的区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

通配符选择器

通配符 选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

 * {
     属性1:属性值1;
     属性2:属性值2;
     属性3:属性值3;
 }

常用来设置一些默认值 如：

 * {
    margin:0;  /*定义外边距 */
    padding:0; /*定义内边距*/
}

CSS字体样式属性

字号大小：font-size

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

字体样式：font-family

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p {
    font-family:"微软雅黑";
}

注意事项：

1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

字体粗细：font-weight

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-weight属性用于定义字体的粗细
其可用属性值：normal(正常) 
bold 
bolder 
lighter 
数字使用方式（100~900）

注意：

数字 400 等价于 normal，而 700 等价于 bold。

字体风格：font-style

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格
其可用属性值：normal 默认样式
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

注意：

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

综合设置：font

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{
    font: font-style font-weight font-size/line-height font-family;
}

注意事项：

1.使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
2.其中不需要设置的属性可以省略（取默认值）
3.但必须保留font-size和font-family属性，否则font属性将不起作用。

CSS外观

文本颜色：color

color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

行间距：line-height

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

水平对齐方式：text-align

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

注意：

​ 是让盒子里面的内容水平居中， 而不是让盒子居中对齐。

首行缩进：text-indent

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

文本的装饰：text-decoration

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。（取消下划线）
underline	定义文本下的一条线。下划线 也是我们链接自带的
overline	定义文本上的一条线。（相当于头顶线）
line-through	定义穿过文本下的一条线。（相当于删除线）

CSS符合选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

[图片上传失败...(image-b21f14-1561095936860)]

交集选择器 是 并且的意思。 即...又...的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。  

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。[图片上传失败...(image-469039-1561095936860)]

并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。[图片上传失败...(image-9826a0-1561095936860)]

子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。[图片上传失败...(image-424298-1561095936860)]

白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

链接伪类选择器

• :link /* 未访问的链接 */
• :visited /* 已访问的链接 */
• :hover /* 鼠标移动到链接上 */
• :active /* 选定的链接 */

a {   /* a是标签选择器  所有的链接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
            color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

标签显示模式

标签的类型(显示模式)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

块级元素：block-level

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

行内元素：inline-level

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

注意：

1. 只有 文字才 能组成段落  因此 p  里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。

块级元素和行内元素的区别

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

行内元素块inline-block

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

标签显示模式转换：display：...

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

CSS书写规范

空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例： .selector { }

【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

示例：

font-size: 12px;

选择器规范

【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

属性规范

【强制】 属性定义必须另起一行。

示例：

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【强制】 属性定义后必须以分号结尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

CSS三大特性

三大特性如下：

1.层叠性
2.继承性
3.优先级

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
2. 样式不冲突，不会层叠

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先性

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

权重注意：

1.继承样式的权重为0。
    即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都    为0，也就是说子元素定义的样式会覆盖继承来的样式。
2.行内样式优先。
    应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。    总之，他拥有比上面提高的选择器都大的优先级。
3.权重相同时，CSS遵循就近原则。
    也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最    大。
4.!important命令。
    CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不    管权重如何以及样式位置的远近，!important都具有最大优先级。

CSS权重贡献值

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

CSS背景

背景图片（image）

语法：

background-image：none|url（uri）

参数：

​ none : 　无背景图（默认的）
url : 　使用绝对或相对地址指定背景图像

注意：

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多                背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地  方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

背景平铺（repeat）

语法：

background-repeat：repeat|no-repeat|repeat-x|repeat-y

参数：

​ repeat : 　背景图像在纵向和横向上平铺（默认的）

​ no-repeat : 　背景图像不平铺

​ repeat-x : 　背景图像在横向上平铺

​ repeat-y : 　背景图像在纵向平铺

​ 设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

背景位置（position）

语法：

background-position：length
background-position：position

参数：

​ length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : 　top | center | bottom | left | center | right

注意：

​ 1.设置或检索对象的背景图像位置。必须先指定background-image属性。默认 值为：(0% 0%)。
2.如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意：

背景附着

语法：

background-attachment : scroll | fixed 

参数：

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

背景简写

background属性的值的书写顺序官方并没有强制标准的。

建议如下：

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
例如：
    background: transparent url(image.jpg) repeat-y  scroll     50% 0 ;

背景透明（CSS3）

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意：

​ 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子边框

语法：

border : border-width || border-style || border-color 

​ 边框属性—设置边框样式（border-style）

​ 边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线

圆角边框

​ 语法格式：

border-radius: 左上角  右上角  右下角  左下角;

内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意：跟多个数值时的意思。

值的个数	表达意思
1个值	padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值	padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值	padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

外边距实现盒子居中

需要满足一下两个条件：

1. 必须是块级元素。
2. 盒子必须指定了宽度（width）
3. 然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

代码如下：

.header{ width:960px; margin:0 auto;}

文字居中与盒子居中区别

1. 文字水平居中是 text-align: center
2. 盒子水平居中 左右margin 改为 auto
3. 代码如下：

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

插入图片和背景图片的区别

1. 插入图片：用的最多 比如产品展示类
2. 背景图片：一般用于小图标背景 或者 超大背景图片
3. 代码如下：

section img {  
        width: 200px;/* 插入图片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入当图片也是一个盒子 */
    }

aside {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
    
        background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */
        background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
    }

清楚元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。[图片上传失败...(image-a6d891-1561095936860)]

解决方案： 避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。[图片上传失败...(image-18f9f2-1561095936860)]

解决方案：

1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

盒子模型布局稳定性

什么情况下使用内边距，什么情况下使用外边距？

建议：

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距 （margin）。

  width >  padding  >   margin   

原因：

1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。

2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。

3. width 我们经常使用宽度剩余法 高度剩余法来做。

   ​

盒子阴影

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

[图片上传失败...(image-c9fa43-1561095936860)]

1. 前两个属性是必须写的。其余的可以省略。
2. 外阴影 (outset) 但是不能写 默认 想要内阴影 inset

div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
            /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
            box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
            
}

浮动(float)

普通流(normal flow)

普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。[图片上传失败...(image-6082a2-1561095936860)]

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动详细内幕特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

[图片上传失败...(image-db4ca6-1561095936860)]

浮动的目的就是为了让多个块级元素同一行上显示。

版心和布局流程

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构 。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

最普通的，最为常用的结构

[图片上传失败...(image-e54978-1561095936860)]

两列左窄右宽型

[图片上传失败...(image-ef6c85-1561095936860)]

通栏平均分布型

[图片上传失败...(image-361950-1561095936860)]

清除浮动

为什么要清除浮动

浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现， 但是，你不能说浮动不好

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响

清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC*/
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 小米、腾讯等

定位（position）

如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

就是网页中所有元素都默认的是静态定位， 其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

相对定位relative

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：

注意：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

绝对定位absolute

如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

子绝父相

子级是绝对定位的话， 父级要用相对定位。

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。

固定定位fixed

固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
3. ie6等低版本浏览器不支持固定定位。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2;

注意:

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，

注意:

比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了

元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它就会出现。

display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置。

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

CSS高级

CSS用户界面样式

所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。 防止表单域拖拽

鼠标样式：cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性：

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

实例：

  
我是小白
  
我是小手
  
我是移动
  
我是文本

注意：

hand 火狐不支持 pointer ie6以上都支持

轮廓：outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

属性：

 outline : outline-color ||outline-style || outline-width 

一般用于去掉轮廓：so直接设置如下即可 outline: 0;

防止拖拽文本域：resize

直接设置 resize：none 可以防止文本域被拖拽 影响布局

vertical-align 垂直对齐

块级元素居中对齐：margin：0 auto;

文字居中对齐：text-align： center；

垂直居中对齐 属性如下：

vertical-align : baseline  基线对齐 （默认）
                top 顶部对齐
                middle 垂直对齐
                bottom  底部对齐

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片和表单等。

图片和文字对齐

用 vertical-align ： middle 来控制图片和文字的垂直对齐

去除图片底侧空白缝隙

何为空隙？

如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。 这样会造成一个问题，就是图片底侧会有一个空白缝隙。

如何去除？

1.给图片 （img）vertical-align:middle | top等等。 让图片不要和基线对齐。

2.给图片（img） 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字隐藏

自动换行：word-break

属性：

normal   使用浏览器默认的换行规则。

break-all   允许在单词内换行。

keep-all    只能在半角空格或连字符处换行。

文字溢出：text-overflow

属性：

clip : 　不显示省略标记（...），而是简单的裁切 

ellipsis : 　当对象内文本溢出时显示省略标记（...）

CSS精灵技术（sprite）

何为精灵技术？

CSS精灵是一种处理网页背景图像的方式。

它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

使用方式

使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

★注意：

​ 背景图多的时候才使用！

字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。ps：移动响应端完美实现字体图标的缩放比例。

字体图标使用方式

1.UI设计字体图标效果图（svg格式）

2.网络下载svg格式

3.引入html页面中

上传包

推荐网站： http://icomoon.io

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。

icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

推荐网站： http://www.iconfont.cn/

阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

fontello

http://fontello.com/

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings

http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8

https://icons8.com/

提供PNG免费下载，像素大能到500PX

下载包

引入包

1. 首先把 以下4个文件放入到 fonts文件夹里面。 通俗的做法

   [图片上传失败...(image-9719d8-1561095936860)]

   第一步：引入项目下面生成的fontclass代码：

   第二步：挑选相应图标并获取类名，应用于页面：

滑动门技术

利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

  
    导航栏内容
  

总结：

1. a 设置 背景左侧，padding撑开合适宽度。
2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以a包含span就是因为 整个导航都是可以点击的。

CSS3的伸缩布局

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

属性：

flex-direction调整主轴方向（默认为水平方向）

justify-content调整主轴对齐

align-items调整侧轴对齐

flex-wrap控制是否换行

align-content堆栈（由flex-wrap产生的独立行）对齐

flex-flow是flex-direction、flex-wrap的简写形式

flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

order控制子项目的排列顺序，正序方式排序，从小到大

before/after伪元素

伪元素 其实和元素的效果是一样的 功能也是一样的 只是他不会占用布局 用于在div前面或者后面追加内容

采用 双冒号 为了区分 伪类

用法：

​```

div::before{
content : "" //可以不写 内容 但是必须存在
}

after同理
```

CSS3过度动画

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

例子：

img{
    width:80px;
    height:80px;
    border: 1px solid #ccc;
    border-raduis: 50%;
    transition: transform 0.5s ease-in 0s;
}

img:hover{
    transform:rotate(180deg);
}

CSS3 2D变形

变形转换 transform

移动 translate(x, y)

[图片上传失败...(image-282393-1561095936860)]

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

利用变形 让定位的盒子居中对齐

.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

缩放 scale(x, y)

[图片上传失败...(image-3d98e-1561095936860)]

transform:scale(0.8,1); //水平缩小20% 垂直不变  默认为1

可以对元素进行水平和垂直方向的缩放。

旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

[图片上传失败...(image-f6c76b-1561095936860)]

transform:rotate(45deg);

1. 当元素旋转以后，坐标轴也跟着发生的转变
2. 调整顺序可以解决，把旋转放到最后
3. 注意单位是 deg 度数

倾斜 skew(deg, deg)

[图片上传失败...(image-8e17e0-1561095936860)]

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

转换原点 transform-origin

[图片上传失败...(image-10cf7e-1561095936860)]

 div{transform-origin: left top;transform: rotate(45deg); }  /* 改变元素原点到左上角，然后进行顺时旋转45度 */    

CSS3 3D变形

变形转换 transform

坐标轴如下：

[图片上传失败...(image-81eb12-1561095936860)]

旋转 (rotate)

rotateX():沿着X轴旋转

rotateY():沿着Y轴旋转

rotateZ():沿着Z轴旋转

用法 ：

transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg)

透视(perspective)

其实就是3D立体感 实现原理：近大远小

perspective有两种写法

1. 作为一个属性，设置给父元素，作用于所有3D转换的子元素
2. 作为transform属性的一个值，做用于元素自身

移动(translate)

translateX():沿着X轴移动

translateY():沿着Y轴移动

translateZ():沿着Z轴移动

3D呈现(transform-style)

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换元素。

flat：所有子元素在 2D 平面呈现

preserve-3d：保留3D空间

用法：给这些元素的父元素设置transform-style: preserve-3d 使其成为一个真正的3D图形