day09笔记

day09笔记

### 一、认识定位

1什么是定位？所谓的定位就是让元素的位置发生改变或者叫做移动。定位属性具有层级关系，可以让元素进行层叠

效果图

效果图2

2、定位语法

position:static（默认值，静态定位）、absolute（绝对定位）、relative（相对定位）、fixed（固定定位）;

3、注意点：定位属性必须配合left、right、top、bottom这几个属性一起属性，主要是用来调整元素的位置

4、关于流，流指的是规则

• 标准流，就是网页正常的排版顺序
• 浮动流，一个元素设置了float属性后就成为浮动流，脱离文档流（标准流、普通流）
• 定位流，一个元素设置了position属性后就成为定位流，脱离文档流，遵循自己的规则

5、定位属性需要参照物，要知道相对于谁进行定位

6、最后定位的元素层叠越高，最后一个定位的元素排列在上面

二、定位特点

1、static 特点，遵循的就是网页的正常的排版顺序，标准流

2、relative 特点

• 不脱离文档流，占位置（空间）

• 相对定位是相对于自己以前在标准流的位置进行定位

  

• 相对定位区分元素类型（一个元素你以前是什么类型的，遵循什么规则，现在设置了相对定位你依旧遵循以前的规则）

• 可以对元素进行微调，最常用的作用是配合绝对定位一起来使用（子绝父相，子元素设置绝对定位，父元素设置相对定位）

3、absolute 特点

• 脱离文档流，不占位置（空间）
• 绝对定位相对于祖先元素进行定位的，相对于谁进行定位规则是看它上一级有没有定位流。如果父元素有定位流，就相对于父元素进行定位，如果没有就继续往上一级进行查找，直到找到body，如果还是没有就以body进行定位
• 绝对定位是不区分元素类型的

4、fxied 固定定位

• 脱离文档流，不占位置（空间）
• 固定定位是相对于body进行定位的
• 固定定位是不区分元素类型
• 固定定位不会随着滚动条的滚动而滚动

三、元素垂直居中

网页中经常有很多图文布局，一个容器里面既有图片又有文字，布局区域里面有很多这样的容器，而且每个容器里面的图片或者标记的大小不一致，需要呈现效果的时候要一样

元素垂直居中代码

/*第一种方法 推荐使用的*/
父元素设置 
position:relative;

子元素设置 
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

/*第二种方法*/
父元素设置 
position:relative;

子元素设置
position:absolute;
left:50%;
top:50%;
margin-left:-75px;
margin-top:-75px;

四、圆角属性

1、语法：border-radius:值;

2、分写形式

border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

3、缩写形式

border-radius:50%;
border-radius:10px 20px 30px 40px;

五、鼠标指针属性

语法：cursor:pointer; 手型

六、定位层级属性

1、什么是z-index属性?默认情况下所有的元素都有一个默认的z-index属性, 取值是0。 z-index属性的作用是专门用于控制定位流元素的覆盖关系的。

2、语法：z-index : auto |number;

• auto：默认值。遵从其父对象
• number:无单位的整数值。可为负数
• 没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；

3、注意点：

较大 数值的对象会覆盖在较小 数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。

七、包含块的概念及作用

1、概念：包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；

默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

2、定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。