css核心样式

时间：2023-09-19 10:30:02 | 来源：网站运营

时间：2023-09-19 10:30:02 来源：网站运营

css核心样式

font-weight粗细

• 作用：设置文字粗细，是font的单一属性。
• 属性值：有两种类型，（1）单词类型，（2）数字类型。
• 单词类型：
  属性值 | 说明 --- | --- normal | 默认值，标准字体 bold | 粗体，b（没有语义）、Strong（有语义）标签的默认值 bolder | 更粗的字体 lighter | 更细的字体
• 数字类型：100-900之间的整百数字，数字越大，字体越粗。
  其中，400等价于normal，700等价于bold。实际100~500都是正常的，600~900都是加粗的。

font-style字体风格

• 作用：设置文字是否斜体显示，是font的单一属性。
• 属性值 | 说明 --- | --- normal | 正常字体，默认 italic | 设置斜体的文字，主要针对英文。且带有倾斜属性的字体才能设置倾斜操作。i标签的默认值。 obique | 倾斜的文字，只是将文字倾斜显示，与字体无关。没有倾斜属性的字体也可以设置倾斜操作。（不常用，了解即可）
  

line-height行高

• 作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的，font的单一属性，文字有默认行高。
• 属性值 | 说明 --- | --- px像素值 | 设置行高的具体像素值 百分比数值 | 参考本身字号像素值的百分比
• 量取行高的步骤：（fireworks工具）
• 确定字体和字号。
• 根据已知的字号和字体，在书写上下对齐的两行文字，调整属性面板的行高值，直到两行文字都对齐。

font字体综合

• 写法1：两个属性，必须有字号和字体，字号必须在前，字体在后。
• 写法2：三个属性，字体，字号，行高。
• 书写方式： 字号/行高 字体

• 写法3：如果需要设置加粗和斜体，这两个属性只能写在最前面，两个值之间可以相互换位置。后面的字号，行高，字体不能变换位置。

text-align水平对齐

• 作用：设置文本水平方向的对齐方式
• 属性值 | 说明 --- | --- left | 左对齐，默认 right | 右对齐 center | 居中对齐

text-decoration文本修饰

• 作用：设置文本整体是否有线条的修饰效果。
• 属性值 | 说明 --- | --- none | 没有修饰，大部分标签的默认值 overline | 上划线 line-through | 中划线（删除线），del标签的默认值 underline | 下划线，a标签的默认值

text-indent文本缩进

• 作用：设置段落首行是否缩进。
• 属性值 | 说明 --- | --- px单位 | 表示缩进多少像素 em单位 | 缩进几个中文字符的位置（常用） 百分比 | 缩进文字所在标签的父级标签的width属性值得百分比
• 属性值区分正负，正数代表向右缩进，负数代表向左缩进。

盒模型属性

• 宽度width，高度height，边框border，内边距padding，外边距margin。
• 常见盒模型区域，根据不同属性的效果，可以划分
• 书写元素内容区域：width+height
• 盒子可以实体化（可以加颜色）的区域：width+height+padding+border
• 盒子实际占位的位置：width+height+padding+border+margin

宽度width：

• 作用：设置元素的宽度
• 属性值| 说明 --- | --- auto | 默认值。浏览器可以计算出实际的宽度。（参考父元素） px | 像素值定义的宽度 % | 定义参考父元素宽度width的百分比宽度 注：body元素比较特殊，不需要设置宽度，自适应浏览器窗口的宽度。

高度height：

• 作用：设置元素的高度。
• 属性值| 说明 --- | --- auto | 默认值。浏览器可以计算出实际的高度，高度会被内容撑开 px | 像素值定义的高度 % | 定义参考父元素高度height的百分比高度

内边距padding：

• 作用：设置元素内部到宽高之间的距离。
• 特点：可以添加背景，但是不能书写内容。
• 属性值：常用px为单位的数值。
• padding是一个复合属性，有四个方向。顺序为上右下左，顺时针方向。
• 简写（四种）：
• 四值法：padding: 10px 20px 30px 40px，上，右，下，左。
• 三值法：padding: 10px 20px 30px，上，左右，下。
• 二值法：padding: 10px 20px，上下，左右。
• 单值法：padding: 10px，上右下左。

边框border：

• 作用：设置的是内边距外面的边界区域，作为合资实体化的最外层。
• 属性值：由三个值组成，分别为线的宽度，线的形状，线的颜色。顺序不是必须的。
• 复合属性。线宽border-width，线型border-style，边框颜色border-color。
• 线宽border-width，有四值写法。
• 线型border-style，有四值写法，属性值：none无边框，solid实线，dashed虚线（有兼容问题），dotted点线。

• 边框颜色border-color，有四值写法。
• 按边框方向划分：border-top，border-right，border-bottom，border-left。
• 根据方向和类型，进一步细分：border-方向-类型。顺序不能错。

外边距margin：

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

盒模型扩展-清除默认样式

• 作用：为避免默认样式对整体布局效果造成影响。
• 大部分容器级标签都有默认边距。
• ul和ol列表有默认的列表前缀，需要清除list-style属性。
• a标签的默认样式：设置color和text-decoration
• h系列标签,b标签，strong标签有加粗效果，设置font-weight。
• 给body设置整体文字样式，让大部分后代标签全部去继承。

盒模型扩展-height应用

• 根据不同的需求，高度可以设置，也可以不设置，如果设置了高度，盒子占有的高度位置就定死了，后面的同级元素会紧挨着加载，如果不设置高度，会根据标签内部内容高度自动撑开。
• 必须设置高度：设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。
  注：设置高度后，如果盒子中的内容很多的话，也不会把盒子撑开，且盒子后面的元素位置不变。
• overflow属性：对溢出的内容显示进行设置
• 属性值| 说明 --- | --- visible | 默认值，溢出的部分显示。 hidden | 溢出的部分隐藏，隐藏超过边框范围的内容 scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏的部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条 auto | 自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条
• 必须不设置高度：要求盒子高度必须自适应内部内容的高度，或者设置height的属性值是自动的。

盒模型扩展-居中

• 文本水平居中：text-align属性，不论单行或多行都可以设置。
• 单行文本垂直居中：设置文字的line-height等于盒子的高度。
• 多行文本垂直居中：让元素高度自适应或者正好等于多行文本的高度，设置元素内边距上下值相同。
• 元素垂直居中：让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
• 元素水平居中：子盒子的宽度低于父盒子的宽度，可以设置子盒子的margin值，为margin：0 auto；
• 原因：auto只在水平方向有作用，水平方向的margin如果设置为auto，边距会自动无限增大，直到撑满整个父元素除了子元素之外剩余的区域，如果两个水平方向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。

盒模型扩展-父子盒模型

• 一般情况下，一个父元素内部可以放一个或者多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要循环一个设置尺寸的规律：所以子元素的宽度加在一起不能大于父元素的宽度width。
  父元素的width >= 所有子元素width + padding + border + margin
  如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素。
• 特殊情况：盒模型自动内减（只针对width）
• 父子盒模型中，只有一个子元素，且子元素是类似div标签必须占一行的。不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width。
• 如果同时设置了子元素水平方向的padding和border、margin，不需要手动去进行内减，子元素的width会自动收缩尺寸。
• 子元素所有水平方向的属性值加和等于父元素的宽度。

盒模型扩展-margin塌陷现象

• margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。
• 同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距离是较大的那个值。
• 父子元素塌陷（margin-top传递问题）：父子元素之间也会出现margin塌陷，（1）父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。（2）本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来（父元素的上边距0塌陷到了子元素的上边距30里面）。
• 解决办法：
• 同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
• 父子元素：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用子元素的margin去设置，而是用父元素的padding挤出来。
• 注：水平方向没有margin塌陷。

标准文档流

• 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
• html就是一种标准文档流文件。
• HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。
• 微观现象：（1）空白折叠现象。（2）文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。（3）自动换行，元素内一行内容写满元素的width时会自动进行换行。
• 元素等级：在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素，行内元素，行内块元素。
• 块级元素：a、块级元素可以设置宽高，在浏览器中正常加载。b、块级元素必须独占一行，不能与其他任何标签并排一行。c、块级元素如果不设置width，会自动撑满父级的width区域；高度height不设置，会被内容自动撑开高度。
• 行内元素： a、行内元素不能设置宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题，b、行内元素可以与其他的行内或行内块元素并排显示。c、行内元素不论是否设置宽高，宽高只能被内容自动撑开。
• 行内块元素：a、可以设置宽度和高度。b、可以与其他的行内或行内块并排显示。c、如果不设置宽高，要么以原始尺寸加载，要么被内容自动撑开。d、具有标准流的微观性质，例如空白折叠现象。

显示模式-display

• 标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过display属性改变一个标签的显示模式。
• 属性值 | 作用 --- | --- block | 以块级元素模式加载，具备块级特点 inline | 以行内元素模式加载，具备行内特点 inline-block | 以行内块模式加载，具备行内块特点 none | 直接隐藏，不占标准文档流的位置
• 脱离文档流：display属性改变的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的页面布局效果需要脱离标准流的限制。元素脱离标准文档流的方法包括：浮动、绝对定位、固定定位。

浮动

• 定义：一种非常重要的布局属性。
• 属性值：left--左浮动，right--右浮动。
• 作用：让元素脱离标准流，同一级的浮动元素可以并排显示。
• 性质：
  （1）浮动的元素脱离标准流。
• 标准文档流特点：区分行块。
• 浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排显示，且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。
  （2）浮动的元素依次贴边。 （3）浮动的元素没有margin塌陷。
• margin塌陷现象出现在标准流中，浮动元素已经脱离标准流，不在具有margin塌陷现象。 （4）浮动的元素会让出标准流的位置

• 元素浮动后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。
• 压盖效果（字围现象），ie6、ie7会出现兼容问题，所以一般不会使用这种方法，一般使用定位制作。
• 如果没有特殊需求，不允许一个父元素的子元素有的浮动，有的不浮动，同级元素中有一个浮动其他的也要浮动。
• 浮动问题：
• 问题1：标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。
• 问题2：父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

清除浮动

• 清除浮动1：给标准流的父元素强制一个合适的高度。
• 解决：父元素有高度了，前面的浮动不能影响后面元素的标准流位置和贴边。
• 问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。
• 清除浮动2：clear属性
• 给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。
• 属性值 | 说明 --- | --- left | 清除前面左浮动带来的影响 right | 清除前面右浮动带来的影响 both | 清除前面所以浮动带来的影响
• 解决：浮动元素影响后面元素标准流位置和贴边
• 问题：父元素不能高度自适应，两个父元素之前如果有margin效果不正确。
• 清除浮动3：隔墙法
• 外墙法：在两个大的父盒子之间，添加一个空的div标签，标签上带有clear：both属性。
• 解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。
• 问题：父元素没有高度自适应。

• 内墙法：在父元素内部，所以浮动的子元素后面添加一个空的div元素，标签高度为0，添加clear属性。
• 解决：父元素高度自适应，浮动影响后面的元素位置和贴边。
• 缺点：浮动是css样式属性带来的问题，内墙法使用html结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成html结构的冗余。
• 清除浮动4：伪类
• 本质：使用css的伪类，模拟一堵内墙。
• 伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
• :after：这个伪类表示选中的是某个标签内部的最后的位置。
• 将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。 .clearfix:after {
  content: " "; //可写内容
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden; //content有属性的时候写
  }
• 清除浮动5：溢出隐藏
• 给内部有浮动子元素的父元素添加溢出隐藏overflow:hidden属性，可以解决浮动的所有问题。
• 高度自适应原因：一个父元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性的去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
• 浮动影响后面的元素：父元素有了高度以后，可以管理住内部所有的浮动元素，不会延伸到后面标签中，影响贴边效果。

总结：

• 如果父元素高度是固定的，建议使用height属性解决。
• 如果父元素高度需要自适应，建议使用overflow属性解决浮动问题。

css伪类选择器

• 概念：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
• 伪类选择器的权重与普通的类选择器相同。
• a标签的伪类：link访问前状态，visited访问后状态，hover鼠标悬浮状态，active鼠标点击状态。
• a标签的伪类书写顺序：link，visited，hover，active。
• 一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性。

css背景属性

• 背景颜色：background-color。
• 背景图片：background-image。
• 背景重复：background-repeat。
• 背景定位：background-position。
• 属性值：分为三种写法，单词表示法，像素表示法，百分比表示法。
• 单词表示法：
• 水平方向可选单词：left，center，right。
• 垂直方向可选单词：top，center，bottom。

• 背景附着：background-attachment。
• 作用：设置的是背景图片是否要随着页面或者是盒子的滚动而滚动。
• 属性值 | 说明 --- | --- scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚动。 fixed | 固定的，背景图的定位的参考点从盒子border以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚动。
• 综合写法时，没有顺序要求。一般background: url() no-repeat center top fixed #fff;
• 注意事项： 1、如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。2、如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。

背景应用-背景图替换插入图

• 背景图替换插入图：如果想解决SEO问题，可以将HTML结构中，插入图换成搜索关键字，然后使用css添加背景给a标签或者h1标签。
• 文字隐藏法：（1）将文字字号设为0（ie8以下不兼容），（2）给abiaoqian设置一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接在设置溢出隐藏。

背景应用-padding区域背景图

• padding区域可以加载背景，但是不会有书写内容。
• 方法：在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用padding挤出位置。四个方向都可以。

背景应用-精灵图技术

• 当用户访问一个网站时，需要向服务器发送请求，网页上的每张图片都要经过一次请求才能展现给客户。然而，一个网页中旺旺会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了更有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了css精灵技术。
• css精灵：是处理网页背景图像的方式，它将一个页面涉及到的所有的零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该网页时，只需要向服务器发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图合成的大的图就被成为精灵图。
• 技术依据：（1）将网页中需要用到的小的尺寸的背景图制成一张背景透明的png图片。（2）利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。
• 注意事项：（1）精灵图上放的都是小的修饰性质的背景图，插入图片不能网上放。（2）精灵图的宽度取决于最宽的那个背景图片的标签宽度。（3）精灵图可以横向摆放，也可以纵向摆放，但是每个图片之间必须有留足够多的空白，保证背景图片加载到一个标签内部时，不能出现多余内容。（4）在精灵图的底部，尽量留出一些空白，方便以后添加其他精灵图。

css3新增背景属性

• 背景半透明：颜色值增加了一种rgba模式。
• rgba模式：在rgb基础上增加了一个不透明度的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5表示半透明。
• 背景半透明指的是盒子背景半透明，不会影响盒子里面的内容。
• 背景缩放background-size（只能单独写，不能合写）：通过这个属性设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动web开发中左屏幕适配应用非常广泛。
• 属性值 | 说明 --- | --- px值 | 1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值加载 百分比 | 同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性 cover | 自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。（填满区域） contain | 自动调整缩放比例，把图像扩展至最大尺寸，保证图片始终完整显示在背景区域。 （图片最大，可能会有空白）

• 多背景：css3中规定，一个盒子上，可以添加多个背景图片。
• background-image的属性值书写时，以逗号分隔多背景的url路径地址。
• 背景加载时，先写的背景压盖后写的背景图片。

定位

• 定位属性：position
• 属性值 | 说明 --- | --- relative | 相对定位 absolute | 绝对定位 fixed | 固定定位
• 作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。
• 偏移量属性：定位的元素想发生位置的移动，必须搭配偏移量属性进行设置。
• 水平方向：left，right。
• 垂直方向：top，bottom。
• 属性值：常用px为单位的数值，或者百分比。

相对定位

• 属性值：relative。
• 参考元素：标签加载的原始位置。
• 必须搭配偏移量属性才能发生位置移动。
• 性质：相对定位的元素不脱离标签的原始状态（标准流，浮动），不会让出原来占有的位置。元素显示效果上：原位留坑，形影分离。
• 注意：
• （1）偏移量属性区分正负。
• （2）同一方向上，不能设置两个偏移量属性，如果水平方向同时设置了left和right属性，只会加载left属性。垂直方向只会加载top属性。
• （3）由于相对定位的参考元素是自身，left的正值等价于right的负值，top的正值等价于bottom的负值。
• 实际应用：
• （1）由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。
• （2）相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

绝对定位

• 属性值：absolute。
• 参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考body。必须搭配偏移量属性才有位置的移动。
• 性质：绝对定位的元素脱离标准流，会让出标准流的位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高时只能被内容撑开。
• 注意：（1）绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。（2）由于参考点不同，left的正值不在等于right的负值。
• body为参考元素的参考点：以body为参考元素时，参考点的确定与偏移量方向有关。
• 如有top参与的定位，参考点就是body页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
• 如有bottom参与的定位，参考点就是body页面首屏的坐下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
• 注：实际应用中，如果以body为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用body作为参考元素。
• 祖先级为参考元素
• 参考元素：参考的是祖先元素中有任意定位的，在html结构中距离目标最近的祖先。
• 根据绝对定位的参考元素的位置类型不同，有三种定位组合方式：子绝父相，子绝父绝，子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。
• 祖先元素参考点
• 如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的padding区域。
• left、top：参考点是祖先的border以内的左上顶点，对比点是盒子自身的左上角。
• right、top：参考点是祖先的border以内的右上顶点，对比点是盒子自身的右上角。
• left、bottom：参考点是祖先的border以内的左下顶点，对比点是盒子自身的左下角。
• right、bottom：参考点是祖先的border以内的右下顶点，对比点是盒子自身的右下角。

固定定位

• 属性值：fixed。
• 参考元素：浏览器窗口。
• 参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。
• 由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置。
• 性质：脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。

定位应用-压盖

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

定位应用-居中

• 定位的元素，如果想在参考元素中居中显示，有自己的居中方法：
• （1）在居中的方向使用一个偏移量属性，例如left，设置属性值为50%。导致图片的左顶点移动到参考元素的中心位置。
• （2）给绝对定位的子盒子设置一个同方向的margin，例如margin-left，属性值为负的自身宽度的一半。（不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。 ）
• 扩展：
• （1）解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。 （大盒子在小盒子中居中）
• （2）浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

压盖顺序z-index

• 默认压盖顺序：定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。
• 如果都是定位的元素，在html中后写的定位压盖先写的定位。
• 自定义压盖顺序：如果想要更改定位的元素的压盖顺序，可以设置一个z-index属性。
• 属性值：数字。
• 注意：
• 属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
• 如果属性值相同，比较html书写顺序，后写的压盖先写的。
• z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
• 父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：
• 父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。
• 子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。