属性值	作用
repeat	重复，默认属性值，表示图片会重复加载填满整个盒子区域
no-repeat	不重复，不论背景图是否大于盒子范围，都只加载一次图片
repeat-x	水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
repeat-y	垂直重复，使用背景图片垂直重复加载铺满第一行，水平方向不重复

属性值	说明
scroll	滚动的，表示背景图片与盒子保持相对位置不对，随着页面滚动而滚动
fixed	固定的，背景图的定位的参考点从盒子的border以内的左上角顶点变成了浏览器窗口的左上顶点，页面滚动时是不会改变的，导致了背景图固定在浏览器窗口的某个位置，不会随着页面的滚动而滚动

属性值	说明
px值	1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值加载
百分比	同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
cover	自动调整缩放比例，把背景图像拓展到足够大，以使背景图完全覆盖背景区域，溢出部分会自动被隐藏
contain	自动调整缩放比例，把图像拓展到最大尺寸，保证图片始终完整的显示在背景区域

CSS常用样式

字体属性

粗细font-weight

作用：设置文字是否加粗显示
属性名：font-weight，属于font属性的一个单一属性
属性值有两种方式：单词类型，数字类型

单词类型

属性值与说明

数字类型

整百数字：100-900
数字越大，文字越粗
注意：400=normal，700=bold。

字体风格font-style

作用：设置文字是否斜体显示
属性名：font-style，font属性的单一属性
属性值：单词

属性值与说明

要注意，italic与oblique的区别，在日常工作中我们通常使用italic去实现斜体效果

显示效果

注明：i标签也可以实现斜体效果,且内部的样式为italic

i标签的内部font-style属性

行高line-height

作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的
属性值：line-height，font属性的单一属性

属性值与说明

 div {
      font-size: 16px;
      line-height: 26px;

    }

设置行高为26px

行高的数值是通过设计图获取的，量取数值时需要使用一些辅助软件工具，比如fireworks
如果设计师没有提交具体数据，就需要进行测量
步骤：

第一步：确定文字字号与字体。使用文字工具，书写与文本内容相同的文字，调整文字字号与字体，直到两个文字完全重合，就得到了我们需要的字号和字体数据，颜色差异要大才好分辨。
第二步：书写两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到文字两行都对齐了，就得到了行高值。

大概效果是这样的

字体综合

字体，字号，行高，加粗，斜体都是font综合属性的单一属性
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔

写法一

font进行综合书写时，有要字号与字体的参与（必须），而且必须字号在前，字体在后，不能颠倒顺序。

font: 14px "宋体";

写法二

font属性值经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号与行高之间要用/进行分隔

font: 14px/28px "宋体";

写法三

如果要设置加粗字体，或者斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能改变位置

font: bold italic 14px/28px "宋体";
font: italic bold 14px/28px "宋体";

以上两行代码都是等效的

文本属性

水平对齐text-align

作用：文本水平方向的对齐
盒子中，单行或者多行，都会对应方向对齐
属性值：三个方向的单词

属性值与说明

文本修饰text-decoration

作用：设置文本整体是否有线条修饰的效果

属性值与说明

演示效果

如上

缩进text-indent

作用：设置段落首行是否进行缩进

属性值与说明

实际工作中，常用的是em为单位的属性值，注意百分比：父级标签的width属性值，比如p标签是body的子级标签，50%就是向右缩进到正中间
属性值区分正负，正数表示向右缩进，负数表示向左缩进

盒模型属性

盒模型又叫做框模型，有五个用来描述盒子位置，尺寸的属性，分别是：width，height，padding（内边距）、border（边框）、margin（外边距）

盒模型

content中，宽高就是width与height

常见盒模型区域

1.书写元素内容区域：width+height
2.可以实体化的区域：width+height+padding+border
3.实际盒占位的区域：width+height+padding+border+margin

通常，网站控制台是可以看到盒模型图的

F12开发者工具内的盒模型

宽度width

作用：设置可以添加元素内容的区域的宽度

属性值与说明

特殊用途：
若是一个元素没有添加width属性，默认为auto，不同的元素浏览器会根据它的特点进行自动计算，得出实际宽度，比如：
等独自占了一行的，它的width属性的值就会自动填满父元素的width区域，若是等不需要占一行的，width属性的值是内部元素内容自动撑开的宽度。
比较特殊，不需要设置width属性，宽度自动适应浏览器窗口的宽度。

高度height

作用：设置可以添加元素内容的区域的高度

属性值与说明

特殊用途：
一个元素不添加height属性，默认值为auto，浏览器会自动计算出高度，也就是说内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度

内边距padding

设置的是元素的边框内部到宽高区域之间的距离
可以去加载背景，不能书写嵌套的内容
padding是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性

单一属性

书写规律：上右下左（顺时针）

p {
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;
        }

简写

四值法：上右下左

      p {
            padding: 10px 20px 30px 40px;
        }

四值法

三值法：上，左右，下

 p {
            padding: 10px 20px 30px;
        }

三值法

二值法：上下，左右

 p {
            padding: 10px 20px;
        }

二值法

单值法：分配方向为上右下左，四边相同

 p {
            padding: 10px;
        }

单值法

案例

三边框内边距相同，一边不同
方法1.四值法，三值法，进行属性值设置
方法2.利用层叠：

 padding: 10px;
 padding-right: 20px;

方法二会更加灵活，推荐使用，注意书写顺序，单一属性要放在后面

边框border

作用：设置的是内边框外面的边界区域，作为盒子的实体化的最外层
属性值：线的宽度，线的形状，线的颜色
border属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。

p {
  border: 10px solid #f00
}

线宽border-width

作用：边框线的宽度
属性值：常用px形式的数值，四个方向都有边框，属性值类似于padding，也有四种值的写法

p {
    border-width:10px 20px 30px 40px;
}

线型border-style

作用：设置边框的线条形状
属性值：形状的单词，类似于padding的综合属性写法
属性值的单词：

只需要记住前三个

边框颜色border-color

作用：设置边框的颜色
属性值：颜色名或颜色值，整体类似padding综合属性写法

p {
    border-color: #ff0 #0f0 # 00f #ff0;
}

代码

结果

根据边框的方向划分

上右下左：border-top，border-right，border-bottom，border-left
每个单一属性必须与复合属性border一致，设置三个属性值

p {
    border-top: 10px solid #ff0;
    border-right: 20px solid #0f0;
}

根据方向和类型，进一步细分

类似border-top的单一方向属性，也可以根据属性值类型继续进行单一属性划分。
单一属性写法：boder-方向-类型
细分时必须要先写方向划分再写类型划分，否则属性名错误

p {
    border-right-color: #0f0;
    border-right-style: dash;
}

外边距margin

作用：设置的是盒子与盒子之间的距离
特点：不能渲染背景
属性值：常用px为单位的数值
外边距的设置方式与内边距padding一模一样的

单一属性

margin-top: 20px;
margin-right:20px;
margin-left:20px;
margin-bottom:10px;

复合属性的四种值的写法

margin :10px 20px 30px 40px;（上右下左）
margin:10px 20px 30px;（上，左右，下）
margin:10px 20px;（上下，左右）
margin:10px;（全部一样）

盒模型扩展应用

清除默认样式

大部分标签都有默认加载样式，会对布局有影响。避免影响，需要清除默认样式。
盒模型属性中内外边距：大部分容器级标签，有默认边距，要么用标签选择器的并集方式，要么通配符
还可以给标签设置整体文字样式，让大部分后代标签全部去继承
```
body {
    color : #ff0;
    font-size:18px;
    font-famliy: "宋体";
}
```
height应用
- 根据不同的需求，高度属性可以设置可以不设置
- 若设置了高度：盒子占有的高度位置就确定了，后面的同级元素会紧紧挨着加载
- 若没设置高度：会根据标签内部内容高度自动撑开
- 以
  标签为例，根据不同选择是否设置高度
必须设置高度的情况

设计图中盒子高度是固定的，后面同级的元素在高度下面加载，自身盒子内部内容过多会溢出

溢出

overflow属性
设置了高度的盒子出现了上图的情况，可以通过一个溢出的属性overflow，进行溢出部分内容的显示效果设置

属性值与说明

必须不设置高度

要求盒子高度必须自适应内部的高度
或者设置height的属性值是自动的
```
div {
    height: auto;
}
```
居中

文本水平居中
- 水平居中：text-align属性
- 不论单行还是多行都能设置
```
div {
    text-align:center;
}
```
文本垂直居中
- 单行文本垂直居中：让文本行高line-height等于盒子高度height
  
  代码
  
  效果
- 多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同
  
  代码，高度自适应，内边距上下相同
  
  效果
元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距

代码

设置padding上下边距，高度自适应，可以实现垂直的居中

效果图

元素水平居中

针对类似于
样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度宽度，可以设置子盒子的margin值，水平方向值都设置为auto
解释：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中

代码

效果图

注释：上下有空隙是因为设置了padding内边距，30px

父子盒模型

一般情况下，一个父元素内部可以放一个或者多个子元素，多个子元素要排成一排显示，必须要保证父元素的宽度要够，需要一个规律：所有子元素的宽度加在一起不能大于父元素的width
也就是说：父元素的width≥所有子元素的width+padding+margin+border
如果没能满足这个条件：
1.多余的子元素掉下来不能在一排
2.溢出
怎么解决？
计算或者取尺寸的时候要计算准确，一个像素都不能偏差

特殊情况：盒模型自动内减

父子盒模型中，只有一个子元素，且子元素是类似
标签必须占一行的。 不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。 如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。
高度不会出现这种情况
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

margin塌陷现象

margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

同级塌陷

代码

如果所述：box1盒子的下边距是50px，box2的上边距是100px，但是实际情况是两者的边距只有100px，而没有150px

效果图

这就是塌陷现象

父子元素塌陷

父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向的的margin-top的值，两个元素之间没有其他内容的隔离，导致两个属性相遇了，并且发生了margin塌陷现象

代码

子元素被压在了父元素内

另外：
如果本身父元素与上一个元素的距离是0，但是子元素设置了上边距，那么就会把父元素也一起掉下来。

例图

解决办法：

1.同级元素：只设置给一个元素间距，不要拆分，设置一个方向的，比如就是margin-bottom，而不是第一个有bottom第二个还有top
2.父子元素：让两个边距不要相遇，中间可以使用父元素border或者padding将边距分隔开来；更常用的方法是父子盒模型之间的距离就用父元素的padding就好

水平方向的margin没有塌陷现象

标准文档流

标准文档流，指的是元素排版布局过程中，元素会默认自动从左到右，从上往下的流式排列方式。前面内容发生了变化，后面的位置也会发生变化

HTML就是一种标准文档流文件

HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级

微观现象

1.空白折叠现象
2.文字类的元素如果排在一行会出现一种高低不齐，底边对齐的效果
3.自动换行，元素内一行内容写满元素的width时会自动换行

元素等级

在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。

块级元素：大部分容器级标签包括p标签都是块级元素，比如
、
等。

行内元素：大部分的文本级标签，比如、、等。

行内块元素：比如、等。

各种等级的元素有自己的加载特点。

块级元素

1.块级元素可以设置宽高，在浏览器中正常加载
2.块级元素必须独占一行，不能与其他的任何标签并排一行
3.块级元素如果不设置宽高，会自动撑满父级的width；高度不设置，会被内容自动撑开高度

行内元素

1.行内元素不能正常加载宽度和高度，其他的盒模型虽能设置，但是容易出现加载问题
2.行内元素可以与其他的行内元素或者行内块元素并排一行显示
3.行内元素不论是否设置宽高，高度和宽带都只能被内容自动撑开

行内块元素

1.行内块元素可以设置宽度和高度
2.行内块元素可以与其他的行内块或者行内并排一行显示
3.行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
4.行内块依旧具有标准流的微观性质，例如空白折叠现象

img标签与input

显示模式

显示模式display

可以通过display属性更改一个标签的显示模式

属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点

属性值与说明

代码

效果图

脱离标准流

display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制

标签元素脱离标准流包括：浮动、绝对定位、固定定位

浮动

浮动定义

浮动是一种非常重要的布局属性。

属性名：float，漂流、浮动的意思。

属性值：
left 左浮动
right 右浮动

作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。

上图是左浮动，下图是右浮动

浮动性质

1.浮动的元素脱离标准流：

脱离了标准流的控制，具备行快二象性，浮动的元素可以设置宽高，还可以排成一行，不会有空白折叠现象，若是不设置宽高，则会被元素内容自动撑开

2.浮动的元素依次贴边

浮动属性值：left，right

浮动方向设置不同，进行布局时，加载位置方向不同

举例：left

前提：父元素宽度足够。则贴边顺序大概是：父元素左边←子元素1←子元素2← 子元素3←子元素4。

父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。

例子

如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。

例子

如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。

例子

如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。

例子

右浮动与左浮动贴边效果是一致的，只是贴边方向不同。按照 HTML 书写顺序依次向右向上一个元素贴边，第一个元素贴父元素的右边。

例图

注意：同一个盒子中，可以有左浮动和右浮动的子盒子共存，子盒子会根据浮动方向，向上一个同方向的子盒子贴边，空间不够的话会出现依次贴边的情况

Document 1 2 3 4 5 6 7 8 9 10 11 12

上述代码的展示结果为：

效果图

贴边性质应用

利用浮动的这个依次贴边性质，可以完成多种网页布局效果
①.上面的表格效果
②.导航栏效果
③.电商或企业网站布局

练习

练习题

Document

实现效果

3.浮动的元素没有margin塌陷

margin塌陷现象出现在标准流中的，浮动元素已经脱离了标准流，所以不再有塌陷现象

Document 1 2

效果如上，两个盒模型的间距为50+50

4.浮动的元素让出标准流位置

元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素

Document 1 2

取消ps2的浮动，出现的效果为

如上

在IE6、7浏览器中，有兼容问题：

在IE7中有兼容性问题

因为兼容性问题的存在，压盖效果一般使用后期学习的定位制作。

没有特殊需求的前提下，不允许一个父元素的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动

5.字围现象

同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝色盒子会压住粉色盒子的一部分，文字内容又不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它加载

这种效果我们一般称之为字围现象

字围效果代码

效果图

浮动的问题

1.如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

问题体现图

2.父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

Document

问题

解决办法：清除浮动

清除浮动一：height

给标准流父元素强制加一个合适的高度

.box { width: 1000px; height: 100px;/*添加一行高度*/ border: 10px solid #f00; }

解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边

解决问题

问题：父元素高度不是自适应，子元素高度一变化就会再次出现问题

.box p { float: left; width: 100px; height: 200px;/*更改为200px*/ margin-right: 10px; background-color: skyblue; }

出现问题

清除浮动二： clear

clear，清除。

作用：清除标签元素自身受到的前面的浮动元素的影响。

属性值：
left 清除前面左浮动带来的影响
right 清除前面右浮动带来的影响
both 清除前面所有浮动带来的影响
给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置

.box { width: 1000px; border: 10px solid #f00; clear: both; /*新加clear：both 清除浮动*/ }

清除浮动clear

解决：浮动元素影响后面元素标准流位置和贴边。

问题：父元素不能高度自适应，两个父元素之间如果有margin效果不正确。

清除浮动三：隔墙法

外墙法：在两个大的父盒子之间，添加一个空的
标签，标签上带有clear:both属性。

.cl { clear: both; }

解决了浮动影响后面元素标准流位置和贴边，模拟父元素间的距离
换汤不换药，父元素没有高度自适应

内墙法：在父元素内部，所有的浮动子元素后面添加一个空的
元素，标签高度为 0，添加 clear 属性。

解决：父元素高度自适应，浮动影响后面的元素位置和贴边。

缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余

清除浮动四：伪类

本质是使用伪类方法利用css代码书写一堵内墙。

伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。

:after：这个伪类表示选中的是某个标签内部的最后的位置。

书写方法：前面必须加普通的选择器，后面连续书写伪类名称。

将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。

.clearfix::after { content: "1"; /*添加一个文字内容*/ display: block; /*将文字内容转换为块级元素*/ height: 0; /*将盒子的高度固定为0，避免影响父盒子高度*/ clear: both; /*清除前面浮动影响*/ visibility: hidden; /*将创建的元素占位置隐藏*/ }

解决：父元素高度自适应，浮动影响后面的元素位置和贴边

效果

清除浮动五：溢出隐藏

偏方：给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题

补充：overflow属性

元素高度设置之后，overflow：hidden，效果是将超过高度的部分直接隐藏

元素高度没有设置之后，如果元素同时设置了overflow：hidden，元素会自适应内容的高度

高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。

浮动影响后面的元素：父元素有了高度之后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

总结：

1.如果父元素高度固定，使用height属性解决浮动问题
2.如果父元素高度自适应，使用overflow属性解决浮动问题

CSS伪类选择器

概念

伪类与类有明显的区别

普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器上

伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须要搭配其他选择器使用，后面添加的样式不一定立即加载，需要触发某种行为才能加载

伪类选择器的权重和普通类选择器相同

写法：普通选择器：伪类名

 标签的伪类

根据用户的行为不同，划分为四种状态，用户触发了对应的行为就会加载对应的样式

a:link { /*点击之前的样式*/ color: red; } a:visited { /*点击后的样式*/ color: royalblue; } a:hover { /*鼠标悬浮在上面时的样式*/ color:green } a:active { /*鼠标点击时的样式*/ color: yellow; }

a标签的伪类书写顺序

可能会有2-3个同时触发的状态，每个状态的属性都会进行加载，相同的属性会发生层叠

伪类书写顺序非常重要

要是想要每一个伪类都进行正常的加载，书写顺序是link->visited->hover->active

记忆小技巧：love hate （爱恨准则）link，visited，hover，active

一般来说访问前访问后应该设置为一样的效果，保证了页面的统一性。

a:link,a:visited { color:red; }

有一种更加常用的做法是使用a标签选择器，同时选中四种状态，然后声明需要修改的属性对应修改就行了，节省了代码量

a { display: block; width: 150px; height: 150px; background-color: skyblue; font: bold 20px/50px "宋体"; text-align: center; color: #fff; text-decoration: none; } a:hover { background-color: red; }

其他的标签也可以设置:hover伪类

背景属性

background-color

background-color: skyblue;

background-image

background-image: url(images/meng.jpg);

注意：

1.加载范围：默认的加载到边框及以内部分。后期图片不重复加载的话，从border以内开始加载
2.颜色和图片可以同时设置，图片会压住背景颜色，没压住的部分显示设置的背景色

background-repeat

作用：是否要在盒子内重复进行加载

属性值作用

repeat 重复，默认属性值，表示图片会重复加载填满整个盒子区域

no-repeat 不重复，不论背景图是否大于盒子范围，都只加载一次图片

repeat-x 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复

repeat-y 垂直重复，使用背景图片垂直重复加载铺满第一行，水平方向不重复

background-repeat: repeat-x;

background-position

作用：设置不重复的图片在背景区域的加载开始位置

三种写法，但是都有两个属性值，并且是一个意思：第一个表示水平方向的位置，第二个表示垂直方向的位置

第一种写法：单词表示法

水平方向：center，right，left

垂直方向：top，center，bottom

background-position: right bottom;

图片的位置就在右下角：

右下角

第二种写法：像素表示法

第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。

第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离

background-position: 100px 50px;

右移100px，向下50px

注意：区分正负

正数：向右，向下

负数：向左，向上
可以使用fw软件进行尺寸的测量

第三种写法：百分比表示法

100%代表的数值：

水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。

垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。

background-position: 100% 100%；

效果

background-attachment

作用：设置背景图片是否要随着页面或者盒子的滚动而滚动

属性值与说明：

属性值说明

scroll 滚动的，表示背景图片与盒子保持相对位置不对，随着页面滚动而滚动

fixed 固定的，背景图的定位的参考点从盒子的border以内的左上角顶点变成了浏览器窗口的左上顶点，页面滚动时是不会改变的，导致了背景图固定在浏览器窗口的某个位置，不会随着页面的滚动而滚动

综合写法

background: url(images/bg4.jpg) no-repeat center top scroll lightblue;

注意

1.如果属性没有一次性写全，那么其他没有设置的属性会按照默认值进行加载
2.如果想去掉综合属性的一部分，其他的不变，建议使用单一属性写法进行层叠

background: url(images/bg4.jpg) no-repeat center top scroll lightblue; background-attachment: fixed;

背景应用

一、场景替换图

标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片、最大的标题等。

另外
内部的文字，可以帮助提高 SEO 搜索排名。在设置的是 logo 图片时，如果使用插入图，就不能书写搜索关键字。
所有我们为了解决SEO问题，可以在HTML内把插入图换成文字，使用CSS添加背景图给a标签或者h1标签

h1 { width: 146px; height: 58px; margin: 0 auto; } h1 a { display: block; width: 146px; height: 58px; background: url(images/logo.png) no-repeat; /* font-size: 0; */ text-indent: -15em; overflow: hidden; }

淘宝网|购物|衣服|直播

效果图

解释：
1.h1标签内部还是使用文字，提高seo搜索排名
2.给a标签添加背景图，将字号写成0，除了IE7有兼容问题之外不会有显示问题，但是为了便于浏览器都能运行，选择了text-index
3.text-index：-15em的作用是将文本往左移，移出盒子内部，然后使用overflow:hidden，进行隐藏（注意：a标签要先转换为块级元素才可以移动）

二、padding区域背景图

四个方向的padding都可以用来添加背景图

.list { width: 300px; padding-left: 10px; border: 1px solid #333; margin: 10px; list-style: none; font: 16px/32px "微软雅黑"; } .list li { padding-left: 20px; background: url(images/s.png) no-repeat left center; }

新闻标题新闻标题新闻标题新闻标题新闻标题新闻新闻标题新闻标题新闻标新闻标题新闻标题新闻标题新闻标题新闻标题

效果图

三、精灵图技术

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术

CSS精灵

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

技术依据

1.网页中需要用到的小尺寸背景图制作成一张背景透明的png图片
2.利用背景定位技术，将精灵图的每个小图片加载到对应的标签上

使用方法

1.使用fw定位到精灵图里需要用得到的图标，然后进行定位如下

p { width: 80px; height: 30px; background: url(images/icons.png) no-repeat -146px -48px; }

精灵图

定位到的极有家icon

注意事项

1.不能放上插入图片
2.精灵图的宽度取决于最宽的背景图片的标签宽度
3.每个图片之间要留有足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容
4.最低端要留有空白，方便以后添加更多的精灵图
在线生成精灵图网址

https://www.toptal.com/developers/css/sprite-generator/

CSS3新增背景属性

背景半透明

CSS3新增背景半透明的写法，颜色值增加了一种rgba模式。

rgba模式：在rgb基础上增加了一个不透明度的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5表示半透明

书写方式：rgba（红色，绿色，蓝色，不透明度）

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

div { background-color: rgba(0,255,0,0.4) }

半透明其他应用

同样，可以给文件和边框透明，都是rgba的格式来写

color: rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.3);

背景缩放background-size

通过background-size设置背景图片的尺寸，在移动web开发中做屏幕适配非常广泛

属性值说明

px值 1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值加载

百分比同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性

cover 自动调整缩放比例，把背景图像拓展到足够大，以使背景图完全覆盖背景区域，溢出部分会自动被隐藏

contain 自动调整缩放比例，把图像拓展到最大尺寸，保证图片始终完整的显示在背景区域

多背景

CSS中规定，一个盒子上，可以添加多个背景图片

background-image的属性值书写时，以逗号分隔多背景的URL路径地址

注意：背景加载时，先写的背景压盖后写的背景图片

background-image: url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);

定位属性

属性名：position

属性值：
1.relative 相对定位
2.absolute 绝对定位
3.fixed 固定定位

作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移

偏移量属性

定义的元素要想发生位置的移动，必须搭配偏移量属性进行设置

水平方向：left，right

垂直方向：top，bottom

属性值：常用px为单位的数值，或者百分比

相对定位

属性值：relative，相对的意思

参考元素：标签加载的原始位置

必须搭配偏移量属性才能发生位置移动

positon:relative; left:100px; top:100px;

对应的效果

相对定位的性质

性质：相对定位的元素不脱离标签的原始状态（标准流，浮动），不会让出原来的占有的位置

元素：显示效果上，原位留坑，形影分离

注意事项

1.偏移量属性的值是区分正负的
正数：表示偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同。

position: relative; left: ‐50px; top: ‐100px;

效果图

2.同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和right 属性，只会加载 left 属性。垂直方向只加载 top 属性。
建议：书写时从水平方向和垂直方向各挑一个属性进行组合。
3.由于相对定位的参考元素是自身，left 的正值等价于right的负值，top的正值等价于 bottom 的负值。
为了方便记忆，可以选择只使用 left、top 组合。

两者是等价的

实际应用

由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素

相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

绝对定位

属性值：absolute

参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考。
必须要搭配偏移量属性才会发生位置移动

position: absolute; left: 50px; top: 50px;

效果图

绝对定位的性质

脱离了标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高，只能被内容撑开
注意1：参考元素是不固定的，不同的参考元素以及不同的偏移量组合的参考点是不一样的

right bottom是右下角的参考点，right top是右上角的，同理，left bottom是左下，left top是左上

注意2：在绝对定位中，参考点有差距，所以left的正值≠right的负值

为参考元素的参考点

以为参考元素时，参考点的确定与偏移量方向有关。

第一，如果有 top 参与的定位，参考点就是页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。

第二，如果有 bottom 参与的绝对定位，参考点是页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
首屏的意思是如果body的height很大，只是浏览器看到的那个页面

实际应用中，如果以为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素，就不会去参考。

参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先。

例子

显而易见的图例

注意事项

根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。

祖先元素参考点

如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。

left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。

right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角。

left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角。

right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角

相对于自身的位移量，两点之间的距离

固定定位

属性值：fixed

参考元素：浏览器窗口。

参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。

由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置

.backtop { position: fixed; right: 100px; bottom: 100px; width: 100px; height: 50px; background-color: #ccc; font: 18px/50px "微软雅黑"; text-align: center; color: #333; text-decoration: none; }

顶部

效果图

无论滑动到那儿，链接：顶部都不会变化位置，始终与浏览器的右下角点保持参考偏移

固定定位的性质

性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上

定位应用

压盖效果

所有的定位类型都可以实现压盖效果。由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。

居中

定位的元素，如果想在参考元素中居中显示：

第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度。

第二步：：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半。

.demo2 { width: 100px; height: 100px; position: absolute; left: 50%; background-color: red; margin-left: -50px; }

效果图

拓展应用

1.解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。
2.浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

压盖顺序

默认压盖顺序

如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位

自定义压盖顺序

如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性。

属性值：数字。

注意事项

①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。

CSS核心样式

CSS常用样式

字体属性

粗细font-weight

单词类型

数字类型

字体风格font-style

行高line-height

字体综合

写法一

写法二

写法三

文本属性

水平对齐text-align

文本修饰text-decoration

缩进text-indent

盒模型属性

常见盒模型区域

宽度width

高度height

内边距padding

单一属性

简写

四值法：上右下左

三值法：上，左右，下

二值法：上下，左右

单值法：分配方向为上右下左，四边相同

案例

边框border

线宽border-width

线型border-style

边框颜色border-color

根据边框的方向划分

根据方向和类型，进一步细分

外边距margin

单一属性

复合属性的四种值的写法

盒模型扩展应用

清除默认样式

height应用

必须设置高度的情况

必须不设置高度

居中

文本水平居中

文本垂直居中

元素垂直居中

元素水平居中

父子盒模型

特殊情况：盒模型自动内减

margin塌陷现象

同级塌陷

父子元素塌陷

解决办法：

标准文档流

微观现象

元素等级

等。

块级元素

行内元素

行内块元素

显示模式

显示模式display

脱离标准流

浮动

浮动定义

浮动性质

1.浮动的元素脱离标准流：

2.浮动的元素依次贴边

贴边性质应用

3.浮动的元素没有margin塌陷

4.浮动的元素让出标准流位置

5.字围现象

浮动的问题

清除浮动一：height

清除浮动二： clear

清除浮动三：隔墙法

清除浮动四：伪类

清除浮动五：溢出隐藏

总结：

CSS伪类选择器

内部的文字，可以帮助提高 SEO 搜索排名。在设置的是 logo 图片时，如果使用插入图，就不能书写搜索关键字。
所有我们为了解决SEO问题，可以在HTML内把插入图换成文字，使用CSS添加背景图给a标签或者h1标签