CSS层叠样式表
格式
A可将css样式编写到标签（元素）的style属性中，“名：值”，多个之间用；隔开，称为内联标签，只对当前标签有作用。不方便复用。不方便后期维护，不推荐。
<p style="color:red;font-size:40px;">谁知盘中餐，粒粒皆辛苦</p>
B编写到head中的<style></style>，也可以使表现和结构进一步分离。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>css</title>
<style type="text.css"> <!--文本.css-->
p{
color:red;
font-size:40px;
} <!--所有p标签适用-->
</style>
</head>
<body>
<p>谁知盘中餐，粒粒皆辛苦</p>
<p>谁知盘中餐，粒粒皆辛苦</p>
<p>谁知盘中餐，粒粒皆辛苦</p>
</body>
</html>C还可以将样式表写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面(.html文件)中,这样外部文件中的css样式表将会应用到当前页面中,将css样式一编写到外部的样式表中,使完全结构和表现分离,可以使样式表可以在不同的页面中使用,最大限度的使样式可以进行复用,将样式統一写在样式表中,然后通过link标签引入,可以利用测览器的缓存，加快用户访问的速度提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的css文件
<link rel="stylesheet" type="text/css" href="style. css"/> rel,type固定；href为css文件路径。
语法规范
1.注释 ： /* */ ，必须编写在style标签中，或者css文件中。ctrl+shift+/
2.选择器：可以选中页面中指定标签，并将生命块中的样式应用到选择器对应的元素上。
3.声明块：紧跟选择器，使用{}括起来，实际就是一组一组的名值对结构，一对名值对又称为声明。一个声明块可由多个声明，之间用；隔开。样式名:样式值
4.块元素：无论内容有多少会独占一行，块里可以放块
-<div></div>,没有任何语义，不会为里边的元素设置任何的默认样式，主要用于对页面的布局
-高度，行高，外边距，内边距都可以控制
-宽度默认容器的100%
-可以容纳内联元素及其他块元素
p,h1,h2…,br也是块元素
5.内联元素：（行内元素），只占自身大小，不会占一行，主要用来选中文本设置样式
－<span></span>无任何语义，专门用来选中文字。a , img , iframe, span
－一般情况下，只使用块元素去包含内联元素，而不会用内联元素包含块元素。
－高，宽，无效，但水平方向的padding 和margin可以设置，垂直方向无效
－默认宽度为内容宽度
－行内元素只能容纳文本元素和其他内联元素
－img input td可以设置宽高和对齐属性
<a></a>可以包含任意元素，除了自己本身
<p></p>不可以包含任何其他块元素
6.display： 修改标签类型
可选值：inline ：可以将一个元素作为内联元素显示
block：可以将一个元素作为块 元素显示
inline-block：可以将一个元素转换为行内块元素显示。使一个标签有行内，块元素的特点，既可以设置行高，又不会独占一行。默认宽度为本身内容宽度，高度，行高，内外边距都可以控制，和相邻行内元素在一行上，但是之间会有空白空袭。
none：不显示标签，并且不会再页面中占有位置
visibility：设置标签的隐藏和显示状态
可选值：visible 默认值，元素默认会在页面显示
hidden 元素会隐藏显示，但是位置会依然保存
常用选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
1.id选择器：通过标签的id属性值选中唯一的一个标签
语法： #id属性值{}
2.类选择器：与id类似，但class可重复，可以为一个标签设置多个class属性值，使用空格隔开
语法：.class属性值{}
3.选择器分组（并集选择器）：同时选中多个选择器对应的元素
语法：选择器1，选择器2，选择器N{}
4通配选择器：选中页面所有的元素
语法：*{}
5.复合选择器（交集选择器） ：可以同时满足多个选择器标签，id选择器不建议使用符合
语法：选择器1选择器2选择器3{}既满足选择器1，又满足选择器2…
6.元素之间的关系
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
兄弟元素:拥有相同父元素的元素叫做兄弟元素
7.后代元素选择器： 选中指定元素的后代元素，必要时配合id使用
语法：祖先元素 后代元素{}
8.子元素选择器：选中指定父元素的指定子元素(IE6以下浏览器不支持)
语法：父元素>子元素
9.伪类选择器：伪类用来 表示元素的一种特殊状态，比如：访问过的链家，普通的链接，获取焦点的文本框，当我们需要为处在这种状态的元素设置样式时，使用伪类。
链接语法：a:link 正常链接 未访问过 历史记录判断
a:visited 访问过链接 只能设置字体颜色，隐私问题，color，background-color，border- color可访问
标签:hover 鼠标移入状态 其他标签也可以 IE6不支持
标签:acctive 超链接被点击状态 其他标签也可以 IE6不支持
input:focus 获取焦点 IE6不支持,
:disable 匹配被禁用的表单
:checked 匹配选中的表单
:enabled 匹配可编辑的表单
::selection 为选中的内容设置样式，火狐中::-moz-selecction
10.伪元素选项器：表示元素中的一些特殊位置
语法： 标签:first-letter 首字母
标签 :first-line 首行
标签：before 表示标签最前边部分，一般需要结合content样式使用，通过content可以向before或after的位置添加一些内容
标签：after 表示标签的最后边
p:before{
content: "我是新加";
}/*会在所有p标签开头加入content内容*/
p:after{
content: "我是最后";
}/*会在所有p标签内容最后加入content内容*/
11.属性选择器：
属性： title属性，可给任何标签指定，当鼠标移入到元素时，title属性的值将会作为提示文字显示
属性选择器：可以根据元素中的属性或者属性值来选取指定元素
语法：标签[属性名] {} 选取该属性名的元素，无论属性名为何值
标签[属性名=“属性值”] {}
[attr~=val]:表示带有以attr命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至
标签[属性名|=‘"属性值] {} 选取属性值以指定内容开头或包容的元素
标签[属性名^=‘"属性值] {} 选取属性值以指定内容开头的元素
标签[属性名$=“属性值”]{} 选取属性以指定内容结尾的元素
标签[属性名*=“属性值”]{} 选取属性值以包含指定内容的元素
12.子元素伪类选择器：
语法：标签：first-child 该标签为父元素的第一个子标签，若前还有其他兄弟标签不显示，不考虑父元素是谁，只要该标签为第一个子标签
标签：last-child 选择最后一个子标签
标签：nth-child（n） 选择指定位置子标签 even偶数 odd 奇数
标签：first-of-type 选择指定标签类型的第一个父元素的子标签
标签：last-of-type
标签：nth-of-type 以元素为中心! ! !
:not
:empty(内容必须是空的，有空格都不行，有attr没关系)
#wrap li:nth-child(1)
找到中warp底下的所有子元素,并且选中第一-个子元素,并且这个子元素必须是li
13.兄弟选择器： 可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个标签+后一个标签
前一个标签~后所有标签 选中后边所有兄弟标签，标签中间逗号隔开
14. 否定伪类选择器：可以从已近选中的标签中剔除某些标签
语法： 标签:not(选择器) （.class）
选择器优先级
不同选择器，选中同一个标签并且设置相同的样式，这时由优先级决定。
当选择器包含多种选择器时，需要将多种选择器的优先级相加然后比较。但是，选择器优先级不会超过他的最大数量集。
如果选择器优先级一样选择靠后。覆盖
并集选择器单独计算。
在样式最后加！important （分号里），优先级为最高，尽量避免使用
内联样式，行内样式 1000
id选择器 100
类和伪类 10
标签选择器 1
通配 0
继承的样式 无优先级
<style type="text/css">
p{
color: blue !important;
}/*优先级：1*/
p#i1{
color: red;
}/*优先级1+100=101*/
span,.c1{
color: pink;
}/*span优先级1，.c1优先级10，低于上边p，要单独看每一个*/
</style>
</head>
<body>
<p id="i1">我是一个p标签</p>
<p class="c1">我是一个p标签</p>
<span class="c1">我是一个p标签</span>
</body>
</head>
伪类的顺序
a标签的伪类有四个，优先级一样，但要注意顺序，后边可能把前边覆盖
样式的继承
祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以将一些基本样式设置给祖先元素，这样后代元素会自动继承这些样式
并不是所搜的样式会被子元素继承 ，比如背景相关的样式不会被继承 边框相关
长度单位
像素px：最常使用，一个像素相当于一个小点，屏幕由多个小点构成，不同的显示器一个像素大小不相同，越小越清晰
百分比%： 浏览器将会根据父元素的样式来计算该值。优点会根据父元素变化而变化，创建一个自适应页面使用
**em：**相对于当前元素的字体大小来计算。1em=1font-size。字体大小发生变化随之变化。设置字体相关时使用
颜色
颜色单词
RGB值：三元色设置，不同浓度表示不同颜色，
语法：rgb（红色的浓度，绿色的浓度，蓝色的浓度，）0-255之间的值表示,或0%-100%，或十六进制表示，使用三组俩位的十六进制表一个颜色。
语法：#红色绿色蓝色。00-ff。例如#ff0000，俩位俩位重复，可以简写#f00
字体
color：文字颜色
font-size：文字大小，默认16px，实际上设置的格的高度，不是字体大小
font-family：指定文字字体。例如：微软雅黑。默认为宋体，浏览器不支持指定则使用默认，**可设置多个字体，逗号分开，**第一个不支持使用第二个。
字体分类：serif(衬线字体)
sans-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚幻字体）
font-size中，将字体设为这些大的分类以后，浏览器会自动选择指定的字体并应用样式，不同浏览器不一样。指定多个字体时一般放在最后。
font-style：设置文字斜体。
可选值：nomal，默认值
italic，文字以斜体显示
oblique,文字以倾斜效果显示。一般浏览器不做倾斜和斜体区分
font-weight：设置文本的加粗效果
可选值：nomal,默认，正常显示
bold，文字加粗显示
也可指定100-900值，由于很多计算机没有这么多分级，效果跟我们想的会不一样
font-variant：设置小型大写字母显示，所有字母大写显示，但是原本的小写字母转大写会小一些
可选值：nomal， 默认正常显示
small-caps，文本以小型大写字母显示
简写样式：font
可以同时设置上述所有样式，斜体，加粗，大写字母无顺序要求可不写，但是文字大小，字体必须设置，且大小必须为倒数第二个，字体为倒数第一个！
也可设置行高。font：30px/30px "微软雅黑"; 大小/行高，不指定使用默认值。 line-height的默认值在font后会覆盖font中设置的样式。注意顺序
语法：font:样式1 样式2 样式3； 空格隔开
行间距
css没有提供直接设置行间距的方式。只能通过设置行高来实现，行高越大，行间距越大。
行间距 = 行高 — 字体大小
对于单行文本，可以将行高设置为与父元素一直，则会垂直居中
line-height：设置行高，行高类似与单线本，一行行的，线与线之间距离为行高，文字在行高中垂直居中显示
可选值：直接一个大小
指定一个百分数，则会相对于字体去计算行高
直接传一个正整数，行高会设置相对于的倍数
文本样式
text-transform：可以用来设置文本的大小写
可选值：none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格区分
uppercase 所有字母都大写
lowercase 所有字母都小写
text-decoration：设置文本修饰
可选值：none 默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是 underline，若要去除，要将样式设置为none
letter-spacing 指定字符间距
word-spacing 设置单词之间的距离 ，实际上就是设置词与词之间空格的大小
text-align ：设置文本的对齐方式
可选值：left 默认值，文本靠左对齐
righr 文本靠右对齐
center 文本剧中对齐
justify 文本俩端对齐，通过控制文本之间的空格大小，达到俩端对齐的效果
text-indent：设置首行缩进。
当给他一个正值时，自动向右缩进指定像素。
一个负值时，向左移动指定像素。通过这种方式可以将一些不想显示的文字隐藏起来
盒子模型（框模型）
包括：内容区（content），内边距（padding），边框（border），外边距（margin）。
每个标签都可以设置为一个盒子，将所有的元素都设置为盒子，是为了方便页面的布局。当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子
内容区
标签的的width，height设置的是盒子内容区的宽度，高度。不是盒子整个的大小，盒子可见框的大小由内容区，内边距，边框共同决定。
边框
为标签设置边框，必须指定三个样式：border-width：边框宽度。border-color：边框颜色。border-style：边框的样式。
border-width：可以分别指定四个边框宽度。空格分开
为其指定四个值，则会分别设置给上，右，下，左。顺时针方向
为其指定三个值，则会分别设置给上，左右，下，
为其指定俩个值，则会分别设置给上下，左右
为其指定一个值，则会分别设置给四边
border-xxx-width：xxx可选top right bottom left ，专门设置指定边的宽度
border-width：10px 20px 30px 40px;
border-width：10px 20px 30px;
border-width：10px 20px ;
border-width：10px ;
border-color：边框颜色。用法同border-width。
boder-style：边框样式。用法同border-width。
可选值：none 默认值 没有变宽
solid 实线
dotted 点状边框
dashed 虚线
double 双线
**大部分浏览器边框的宽度和颜色都有默认值，而边框的样式默认值都是none，所以style不可不写，其他俩个可不写
border：边框的简写样式通过它可以同时设置四个边框的样式，宽度，颜色，而且无任何顺序要求。但是border一指定就是四个，不能单独指定某个边。
border:red solid 10px;
dorder-top dorder-right dorder-bottom dorder-left ，可以单独设置四个边的样式，规则和border一样，只不过只对一个边生效
border:red solid 10px;
border-right:none;用此方法可以达到一些功能。内边距
指的是盒子内容区与盒子边框之间距离，分为四个方向：
padding-top padding-right padding-bottom padding-left 来设置四个方向内边距
内边距会影响盒子的可见框大小，标签背景（内容区背景）会延伸到内边距，
使用padding可以同时设置四个边框的样式，规则同border-width
盒子大小由内容区，内边距，边框共同决定。
盒子可见框的高度：border-left-width+padding-left+width+padding-right+border-right-width
边框左边宽度 内边距左距离 内容区宽度 内边距右距离 边框右边宽度
可见框的高度：border-top-width+padding-top+height+padding-bottom+border-bottom-width
边框高宽度 内边距高距离 内容区高度 内边距底距离 边框底边宽度
外边距
指的是当前盒子和其他盒子之间的距离，不会影响可见框大小，而是会影响盒子位置。也是分为四个方向：
margin-top margin-right margin-bottom margin-left
由于页面中的元素都是靠左上摆放，所以 设置上，左外边距时，自身位置发生改变。设置下，右外边距时，会改变其他盒子位置
外边距可以是一个负值，元素会向反方向移动。
同样可以简写margin，同时设置四个外边距，规则同padding
margin还可以设置为auto，auto一般只设置给水平方向的margin。必须设置width，针对盒子居中不是盒子里的文字，文字居中还需要行高结合 margin：0 auto；
如果只指定，左外边距和右外边距的margin为auto则会将外边距设置为最大值。
垂直方向外边距设置为auto，则外边距默认为0
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中。（子元素在父元素中居中）
垂直外边距的重叠：在网页中垂直方向的相邻外边距会发生外边距重叠，指兄弟元素之间的相邻外边距会取最大值而不是取和！如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。
解决方式：加一个标签隔开。
加边框。
加内边距。
**浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding.而它的这些默认样式，正常情况下我们是不需使用的。所以我们往往在编写样式之前需要先清楚默认的margin和padding。
*{
marign：0；
padding：0；
}内联元素盒子
内联元素不能设置width，height
内联元素可以设置水平方向的内边距，垂直方向内边距不会影响页面的布局（不会对其他盒子造成影响）。水平方向会影响
垂直边框不会影响布局，水平会影响
支持水平方向外边距， 水平方向相邻不会重叠，而是求和。不支持垂直方向
父子元素注意
子元素默认是存在于父元素的内容区当中，理论上讲最大可以等于父元素内容区大小
如果子元素的大小超过父元素内容区，超过元素会在父元素以外地区显示。超出的称为溢出内容。通过overflow处理溢出。
可选值：visible 默认值，不会对溢出进行处理，元素会在父元素以外位置显示
hidden 溢出的内容会被修剪，不会被显示
scroll 会为父元素添加滚动条，通过滚动条查看完整内容。该属性不论溢出，都会添加滚动条
auto 会根据需求添加滚动条，需要水平加水平，需要垂直加垂直
文档流
文档流处在网页最底层，他表示的是一个页面中的位置，我们所创建的元素默认都处在文档流当中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距。
布局
浮动
块元素在文档流中默认垂直排列,所以三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流，
使用 float来使元素浮动,从而脱离文档流
可选值: none,默认值,元素默认在文档流中排列
left,元素会立即脱离文档流,向页面的左侧浮动
right,元素会立即脱离文档流,向页面的右侧浮动
当为一个标签设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，他下边的元素会立即向上移动。元素浮动以后，会尽量向左上或右上（right）浮动。直到遇到父元素边框，或者其他浮动元素停止。float会覆盖文档流。如果浮动元素上边是一个没有浮动块元素，不会超过块元素。
页面不够显示时，浮动元素会自动下移，但是不会超过兄弟元素，最多与兄弟元素一边齐
浮动的元素不会盖住文字，文字会环绕在浮动元素周围，所以可以通过浮动设置文字环绕图片的效果
在文档流中，子元素的宽度默认占父元素的全部，当设置浮动以后：
块元素：高度和宽度都被内容撑开
内联元素：脱离后变成块元素，即一旦脱离文档流都是块元素，宽度与高度都被内容撑开。
ctrl+方向键 调解代码顺序
高度塌陷问题
在文档流中，父元素的高度时被子元素撑开的，及子元素多高父元素就有多高但为子元素设置浮动后，子元素完全脱离文档流，此时父元素没有内容撑起，造成高度坍塌问题。
坍塌后，父元素下面的元素都会向上移动，导致局面混乱。
解决方法1：将父元素高度写死，但这样父元素高度不能自适应子元素高度。不推荐！
根据 W3C标准，页面中都有一个隐藏的属性BFC，打开或关闭状态。默认关闭。
打开后，标签具有以下特性：
1.父元素的垂直外边距不会与子元素发生重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素，既高度被子元素撑开
开启方式：
1.设置元素浮动
－该方式虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且下边的元素上移，不能解决问题
2.设置元素定位
3.设置元素为display：in-line-block
－可以解决问题，但是宽度会丢失，不推荐
4.将元素的overflow设置为非visible值。推荐auto，hidden
**但是IE6及以下浏览器不支持BFC，但具有另一个隐含的属性haslayout。与BFC类似，所以IE6打开hasLayout解决问题。zoom只再IE6起作用
开启方式选择zoom：1。
zoom表示放大，后边跟着的数值表示放大几倍
为标签指定width也会激活
为了兼容所有浏览器，二者都写。
解决问题2 clear：清楚其他元素浮动对当前元素产生的影响，
可选值：none默认值，不清楚浮动
left清楚左侧浮动元素对当前元素的影响
right清楚右侧浮动元素对当前元素的影响
both清楚俩侧浮动元素对当前元素的影响，清楚对他影响最大的内侧
清楚浮动后，元素会回到其他元素浮动之前的位置
＊＊可以直接再高度坍塌的父元素的最后，加一个空白的div，由于div并没有浮动，所以他是可以撑开父元素的高度的，在对其进行clear，这样可以通过空白的div来撑开父元素的高度，基本没有副作用，兼容各浏览器。
使用这种方式虽然可以解决问题，但是会在页面添加多余的结构
解决问题3：IE6不支持cafter伪类
/*通过after伪类，选择坍塌的元素后边*/
/*
*可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清楚浮动
*这样做和添加一个div的原理一样，可以达到相同的效果，而且不会在页面中添加多余的div，这是最推荐的方式，几乎没有副作用
*/
会坍塌的元素（或者给有可能坍塌的类添加到同一类中 .clearfix）:after{
content:"";/*添加一个空白内容*/
display:block;/*将空白内容转化为块元素*/
clear:both;/*清楚俩测浮动*/
}
导航条
定位
标签.class名称￥*3 复制三次
定位是指，将指定元素摆放到页面的任意位置
position：设置元素定位
可选值：static 默认值，元素没有开启相对定位
relative 开启元素相对定位
-不设置偏移量，元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流（原有位置会保留）
相对定位会使元素提升一个层级
相对定位不会改变元素的性质，块还是块，内联还是内联
absolute 开启元素绝对定位
-绝对定位会脱离文档流
开启绝对定位后，不设置偏移量，元素不会发生变化
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位，
若所有的祖先元素都没有开启定位，则会先对于浏览器窗口进行定位
（一般开启子元素的绝对定位都会同时开启父元素的相对定位）
绝对定位会使元素提升一个层级
绝对定位会改变元素性质，内联元素变成块元素，块元素的宽和高会被内容撑开。
fixed开启元素的固定定位（也是绝对定位的一种)
-固定定位也是绝对定位，拥有绝对定位的绝大多数ted
固定定位永远相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
IE6不支持固定定位
＊＊当开启了元素的定位（非static值）时，可以通过left，right，top，bottom设置元素偏移量，通常偏移量使用俩个即可定位，一般为一个水平方向，一个垂直方向
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上侧偏移量
bottom：元素相对于其定位位置的下侧偏移量
position:relative;
left:100px;元素的层级
如果元素的层级是一样的，则下边的元素会盖住上边的（结构上 body）
z-index：设置元素层级
可选值：指定一个正整数，该值会作为当前元素的层级，层级越高越优先显示
对于没有开启定位的元素，不能使用z-index
父元素的层级再高，也不会盖住子元素
opacity：设置元素背景的透明，
需要一个0-1之间的值，0表示完全透明，1表示完全不透明
IE8及以下不支持，filter：alpha（opacity=透明度）代替，透明度0-100。这种方式IE6支持，但是在IE Tester中无法测试
背景
background-image:设置背景图片
background-image:url(图片相对路径);相对路径写在哪就相对于哪个文件
-如果背景图片大于元素，默认显示图片的左上角，改变元素的宽高解决
如果背景图片小于元素，默认将背景图片平铺直到排满
背景图片默认贴着元素左上角显示
可以同时为一个标签指定背景颜色和背景图片，颜色将会作为图片的底色。一般情况下二者会同时指定
background-repeat:设置背景图片的重复方式
可选值：repeat默认值，背景图片会双方向（水平与垂直）重复（平铺）
no-repeat背景图片不会重复
repea-xt背景图片会沿水平方向重复
repeat-y背景图片会沿垂直方向重复
background-position：选择背景图片的位置
可选值：可以使用top right left bottom center 中的至少俩个值来指定一个背景图片的位置。
如果只给一个值第二个值默认center
例如：top left，左上。bottom right，右下
也可以直接指定俩个偏移量，第一个值是水平偏移量，
正值，图片向右移动指定像素。负值，图片向左移动指定像素
第二个是垂直偏移量
正值，图片向下移动指定像素。负值，图片向上移动指定像素。
background-attachment：设置背景图片是否固定或随着页面其余部分滚动
可选值：scroll 默认值，图片随窗口滚动
fixed 图片固定在某一位置，不随页面滚动。且背景图片的定位永远相对于浏览器的窗口。一般设置给body，而不设置给其他元素
按钮
扫一扫
8018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
