同级css使用一个样式_CSS 核心样式

CSS核心样式

粗细font-weight作用:设置文字是否加粗显示

属性名: font-weight, 属于font属性的一个单-属性

属性值有两种方式:单词类型、数字类型

单词类型

数字类型100-900之间的整百数字

数字越大，文字显示越粗

其中400等价于normal, 700等价于bold

字体风格font-style作用:设置文字是否斜体显示

属性名: font-style, 属于font属性的一个单- - 属性

属性值:单词

行高line-height作用:设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的

属性名: line-height, 属于font属性的-一个单一属性

字体综合font字体、字号、行高、加粗、斜体都是font综合属性的单一属性

font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔

写法一font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序

如：font:14px "宋体"；

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

如：font：14px/28px "宋体"

写法三如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置，后面的字号、行高、字体不能更改位置

如： font： bold italic 14px/28px "宋体"；

水平对其 text-aligns

作用：设置文本水平方向的对齐

在盒子中，不论文本是单行还是多行，都会对应方向对齐

属性值：三个方向的单词

文本修饰text-decoration作用:设置文本整体是否有线条的修饰效果

文本缩紧作用:设置段落首行是否进行缩进

盒模型又叫框模型包含了五个用来描述盒子位置、尺寸的属性，分别是宽度width、高度height、内边距、padding、边框border、外边距margin

常见盒模型区域

盒模型的属性中，根据不同属性的效果，可以划分区域:

书写元素内容区域: width+height

盒子可以实体化的区域: width+height+padding+border

盒子实际占位的位置: width+height+padding+border+margin

注：深刻理解盒模型图

盒模型宽度 width

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

特殊应用

如果一个元素不添加width属性，默认属性值为auto,不同的元素浏览器会根据其特点自动计算出实际宽度，例如

元素等独占- -行的，其width属性的值会自

动撑满父元素的width区域，如果是元素等不需要独占一行的，其width属性的值是内部元素内容自动撑开的宽度

盒模型高度 height作用：设置可以添加元素内容的区域的宽度

特殊应用

如果一个元素不添加height属性，默认属性值为auto,浏览器会自动计算出实际

高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度

盒模型内边距 padding作用:设置的是元素的边框内部到宽高区域之间的距离

特点:可以去加载背景，不能书写嵌套的内容

属性值:常用px为单位的数值

padding是-个复合属性，可以根据内边距的方向不同划分为四个方向的单属性

单一属性：书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左

简写

有时为了化简书写，-般习惯将四个方向的单一属性进行合写成padding属性

padding属性值:可以有1-4个值，值之间用空格进行分隔

根据四个方向属性值不同，padding有多种值的书写表示方法

根据padding的属性值的个数不同，区分了四种表示法:四值法 p {padding:10px 20px 30px 40px;} 上右下左

三值法 p {padding:10px 20px 40px;}上 左右 下

二值法 p {padding:10px 20px;} 上下 左右

单值法 设置属性值只有一个，分配方向上右下左，四边的值相同

制作三边内边距相同，一边不同方法①:使用四值法、三值法，进行属性值设置

方法②:利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现单一属性层叠综合属性的一部分

其中第二种用法更加灵活，推荐使用，使用过程中注意书写顺序，单一属性必须书写在后，才能层叠掉综合属性中重复的部分

盒模型 border作用:设置的是内边距外面的边界区域，作为盒子的实体化的最外层

属性值:由三个值组成，分为线的宽度、线的形状、线的颜色

border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分分布

p {

border: 10px solid #f00;

}

按照属性值的类型划分

线宽：border-width

线型：border-style

颜色：bordr-colors

线宽border-width

作用:设置边框线的宽度

属性值:常用px形式的数值，四个方向都有边框,属性值类似于padding,也有四种值的写法

border-width {

10px 20px 30px 40px;

}

线型border-style

作用:设置边框的线条形状

属性值:形状的单词，总体也是类似padding的综合属性写法

属性值的单词可能性:none solid dashed dotted double grove ridge inset outset 重点记住前三个

边框颜色border-color

作用:设置边框的颜色

属性值:颜色名或颜色值，整体类似padding综合属性写法

根据边框的方向划分

上边框: border-top

右边框: border-right

下边框: border- bottom

左边框: border-left

每个单一属性都必须与复合属性border一致，设置三个属性值

根据方向和类型，进一步细分类似border-top的单一方向属性，也可以根据属性值类型继续进行单一属性划分

单一属性写法: border-方向-类型。

注意:细分时必须先写方向划分再写类型划分，否则属性名错误

border-top-color: #000;

盒模型 marginbody{

padding: 0;

margin: 0;

}

和padding 差不多

盒模型 清除默认样式大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式

盒模型属性中内外边距:大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除

• 和

1. 两种列表有默认的列表前缀:清除list--style属性

标签的默认样式，顺带设置页面中常用的a的公共样式:设置color和text-decoration

清除默认加粗效果:设置font-weight

/* 清除默认样式 */

/* body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li {

margin: 0;

padding: 0;

} */

* {

margin: 0;

padding: 0;

}

ul,ol {

list-style: none;

}

a {

color: #333;

text-decoration: none;

}

h1,h2,h3,h4,h5,h6,b,strong {

font-weight: normal;

}

/* 设置初始化的公共样式 */

body {

color: #333;

font-size: 14px;

font-family: Arial,"宋体";

}

盒模型高度height应用根据不同的需求，高度属性可以设置也可以不设置

如果设置了高度:盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载

如果不设置高度:会根据标签内部内容高度自动撑开

以

标签为例，根据情况不同选择是否设置高度

overflow属性

设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。可以通过一个溢出的属性overflow,进行溢出部分内容的显示效果设置

必须不设置高度要求盒子高度必须自适应内部内容的高度

或者设置height的属性值是自动的

盒模型扩展-居中

文本水平居中水平居中: text-align属性

不论单行或多行都可以设置

文本垂直居中

单行文本垂直居中: 让文字行高line-height等于盒子高度heigh

多行文本垂直居中: 让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同

元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中

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

元素水平居中

针对类似

样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的margin值，水平方向的值都设置为auto

原因: auto 只在水平方向有作用，水平方向的margin如果设置为auto,边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平

方向都是auto,两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中

盒模型扩展-父子盒模型一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成行显示，必须保证父元素的宽度一定要足够(不考虑溢出情况)，需要遵循一个设

置尺寸的规律:所有子元素的宽度加在一起不能大于父元素的宽度width

父元素的width≥所有子元素width + padding + border + margin

如果不满足条件:要么多余的子元素掉下来不能在一-排， 要么溢出父元素

解决方法： 计算或量取尺寸时一定要计算准确，一像素都不能偏差

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

父子盒模型中，只有一个子元素，且子元素是类似

标签必须占一行的

不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width

如果同时设置了子元素水平方向的padding和border、margin, 不需要手动去进行内减，子元素的width会自动收缩尺寸

子元素所有的水平方向的位置所有属性的加和等于父元素的width

margin塌陷现象margin塌陷现象:在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的

真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部

同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值

父子元素塌陷

父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向的

margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷

父盒子没设置margin-top时,本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来

解决margin塌陷问题的方法

①同级元素:如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分

②父子元素:让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开;更加常用的方法，父子盒模型之间的距离就不要用儿子的margin去踹出来，而是父级的padding挤出来

另外注意：水平方向的margin没有塌陷现象

标准文档流在我们遇到的HTML元素中，有的标签元素如

、

等在浏览器中加载时必须独自占满一行，有的标签元素如、等则不会独占一行，原因是什么?

标准文档流

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

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

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

微观现象

1.空白折叠现象

2.文字类的元素日过排在一行会出现一种高低不齐、底边对齐的效果

3.自动换行，元素内一行内容写满元素的width时会自动进行换行

元素等级

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

块级元素、行内元素、行内块元素等

块级元素:大部分容器级标签包括p标签都是块级元素，比如

、

等

行内元素:大部分的文本級柝笠，比如、 、等

行内块元素:比如、等。

块级元素

a、块级元素可以设置宽高，在浏览器中正常加载

b、块级元素必须独占一行，不能与其他任何标签并排一行

C、块级元素如果不设置宽度，会自动撑满父级的width区域;高度不设置，会被内容自动撑开高度

行内元素

a、行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题

b、行内元素可以与其他的行内或行内块元素并排一行显示

c、行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开

行内块元素

a、行内块元素可以设置宽度和高度

b、行内块元素可以与其他的行内或行内块并排一行显示

C、行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开

d、行内块依旧具有标准流的微观性质，例如空白折叠现象

显示模式-display标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是-成不变的，后期可以通过display属性更改一个标签的显示模式

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

属性值

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

标签元素脱离标准流的方法包括:浮动、绝对定位、固定定位

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

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

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

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

浮动的元素脱离标准流

标准文档流特点:区分行块

块级元素:可以设置宽高，必须独占一行

行内元素:不能设置宽高，可以并排一行

浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容

自动撑开

浮动性质-依次贴边

浮动属性值: left、 right。

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

以left为例:

父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素

左边←子元素1←子元素2←子元素3←子元素4

贴边性质应用

利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如:

① 上述平均分布表格效果

②导航栏效果

③常见的电商或企业网站布局

浮动性质 - 没有margin塌陷、字围现象

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

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

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

由于浏览器中有兼容性的问题，不会使用这种属性制作压盖效果

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

字围现象

与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内

容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载

浮动的问题

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高，如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的

清除浮动的方法

方法一：清除浮动一： height

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

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

问题:父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现

清除浮动二： clear属性clear,清除

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

属性值:

left 清除前面左浮动带来的影响

right 清除前面右浮动带来的影响

both 清除前面所有浮动带来的影响

给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置

clear: both

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

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

清清除浮动三:隔墙法外墙法:在两个大的父盒子之间，添加一个空的

标签，标签上带有clear:both属性

解决:浮动影响后面元素标准流位置和贴边，模拟父元素间的距离

问题:父元素没有高度自适应

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

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

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

清除浮动四： 伪类本质是使用伪类方法利用css代码书写-堵内墙

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

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

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

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

.clearfix:after{

content: "1";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

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

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

高度自适应原因:一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素

是标准流还是浮动，都会将最高的高度作为父盒子高度加载

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

总结如果父元素高度是固定的，建议使用height属性解决

如果父元素高度需要自适应，建议使用overflow属性解决浮动问题

a标签的伪类概念：

伪类和类之间有一定的相似之处，也存在明显的区别。

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

伪类:不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一-定立即加载到浏览器之上，

只有用户触发了对应的行为，伪类的样式才会立即加载

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

伪类选择器写法：前面是普通的选择器，后面紧跟：伪类名

标签的伪类标签可以根据用户行为不同，划分为四种状态，通过标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式

a:link {

color:gray; ----- 访问前状态

}

a:visited {

color:cyan; ----- 访问后状态

}

a:link {

color:red; ----- 鼠标悬浮状态

}

a:link {

color:yellow; ----- 访鼠标点击状态

}

标签的伪类书写顺序

标签上可能会同时触发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠

伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要

要想让每个伪类的状态正常加载，书写顺序必须是:访问前link、访问后visited、鼠标移.上hover、鼠标点击active

为了方便记忆，利用爱恨准则: love hate

标签的伪类实际应用

一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态

a:link,a:visited {

color: #666;

}

a:hover {

color: #f00;

}

更加常用的一种设置方式如下:标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的默认显示样式的属性，包括盒模型、文字等

a:hover伪类选择器:设置鼠标移上时不一样的样式属性

css常用样式-背景属性一背景颜色background-color属性名: background-color

作用:在盒子区域添加背景颜色的修饰。

加载区域:在border及以内加载背景颜色

属性值:颜色名、颜色值

背景图片background-image属性名: background-image

作用:给盒子添加图片的背景修饰

加载范围:默认的加载到边框及以内部分。后期如果图片不重复加载，加载从border以内开始

属性值： URL(图片路径)

url: uniform resource locator,统一资源定位符，小括号内部书写查找图片的路径

背景重复background-repeat属性名: background-repeat

作用:设置添加的背景图是否要在盒子中重复进行加载

根据属性值不同，有四种重复加载方式 repeat no-repeat repeat-x repeat-y

背景定位background-position属性名: background-position

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

属性值:分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔

第一个属性值：表示背景图片在水平方向的位置

第二个属性值：表示背景图片在垂直方向的位置

单词表示法属性值都是使用代表方向的单词进行书写

水平方向可选单词: left、 center、 right

垂直方向可选单词: top、 center、bottom

单词表示图片与盒子背景区域进行对应方向的对齐

像素表示法使用像素值作为背景定位的属性值

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

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

像素值区分正负，正负代表位移方向不同:正数:表示图片针对盒子的原点向右、向下移动

负数:表示图片针对盒子的原点向左、向上移动

百分比表示法百分比表示法使用百分比数字作为属性值

100%代表的数值:

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

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

背景附着background-attachment属性名: background- attachment

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

综合写法backgroundbackground属性可以将五个单属性的值进行合写

属性值:可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作

一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置

例如： background: url() no-repeat center top fixed;

注意事项注意1: 如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载

注意2: 如果想去层叠综合属性中的一部分，其他的属性值保持不变，最好使用单一属性写法层叠

场景一: 替换插入图

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

另外

内部的文字，可以帮助提高SEO搜索排名

在设置的是logo图片时候，如果使用插入图，就不能书写搜索关键字

背景图替换插入图方法如果想解决SEO问题，可以将HTML结构中，插入图换成搜索关键字，然后使用css添加背景图给标签或

标签文字隐藏方法

①将字号设置为0。IE8 及以.上或高版本浏览器可以隐藏文字，但是IE7及以下有兼容问题

②可以设置给标签一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏

场景二：padding区域背景图制作方法：

在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用padding挤出位置

四个方向padding都可能用于添加背景图

例如 padding-left区域背景：

.news li {

padding-left: 25px;

background: url(images/s2.png) no-repeat left center;

}

场景三：精灵图技术当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度

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

css精灵

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

它将-个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图

像即可全部展示出来

css精灵的技术依据

①将网页中需要用到的小尺寸背景图制作成一张背 景透明的png图片

②利用背景定位技术，将精灵图的每个小图片加载到对应的标签上

制作精灵图的注意事项

1.精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放

2.精灵图的宽度取决于最宽的那个背景图片的标签宽度

3.精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容

4.在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图

精灵图在线工具可以快速查找

css3新增背景属性 - 背景半透明css3支持背景半透明的写法，颜色值增加了一种ragb模式

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

.box {

width: 100px;

height: 100px;

background-color: ragb(255,0,0,1);

}半透明其他应用

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

背景缩放 background-size

通过background-size设置背景图片的尺寸，就像我们设置的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛属性值说明多背景CSS3中规定，一个盒子上，可以添加多个背景图片

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

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

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

定位属性属性名属性值作用：设置定位的元素，他需要根据某一个参考元素发生位置的偏移

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

水平方向: left、 right

垂直方向: top、bottom

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

相对定位 relative相对定位的性质性质:相对定位的元素不脱离标签的原始状态(标准流、 浮动)，不会让出原来占有的位置

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

注意事项注意1:偏移量属性的值是区分正负的

正数：表示偏移方向与属性名相反

负数： 表示偏移方向与属性名相同

注意②:同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了left 和right属性，只会加载left属性。垂直方向只加载top属性

建议：书写时从水平方向和垂直方向各挑一个属性进行组合

注意③:由于相对定位的参考元素是自身，left 的正值等价于right 的负值，top 的正值等价于bottom的负值

为了方便记忆，可以只选择left、top组合

position: relative; right: -50px; bottom: -50px; 等价于 position: relative; left: 50px; top: 50px;

绝对定位属性值: absolute, 绝对的意思

参考元素:参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考

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

性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开

注意1: 绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同

注意2: 在绝对定位中，由于参考点不同，left正值不再等价于right的负值

身的对比点是盒子的所有盒模型属性最外面的左上角或右上角

第二，如果有bottom参与的绝对定位，参考点是

页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角

实际应用中，如果以

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

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

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

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

固定定位属性值: fixed, 固定的意思

参考元素:浏览器窗口

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

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

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

定位应用、压盖、居中

positionL: absolute;

left: 50%;

width: 100px;

margin-left: -50px;注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置

扩展应用

①解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中

.box p{

position: relative;

left: 50%;

width: 800px;

height: 100px;

margin-left: -400px;

background-color: #000;

}②浮的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法

定位压盖顺序 z-index默认压盖顺序定位的元素不区分定位类型，都会去压盖标准流或者浮动的元素

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

自定义压盖顺序注意事项①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的

②如果属性值相同，比较HTML书写顺序，后写的压盖先写的

③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效

④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分:父级盒子:如果不设置z-index,后写的压盖先写的;如果设置了z-index,值大的压盖值小

的

静态轮播图

鼠标变销售的状态： cursorc: pointer