DAy 9定位属性和图片整合

一、认识定位

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;那么子元素也会相对父元素来定义自己的位置。

​

​​

css精灵(图片整合技术)

​

一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。 二、图片整合的优势： 1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。 2）通过整合图片来减小图片的体积。

图片整合的名称：
	+ css 精灵
	+ css sprite
	+ 雪碧图
	+ 背后的故事：“雪碧”一词，音译自英语Sprite，原译为妖怪、精灵。精灵小子这个角色频繁出现于19世纪40、50年代的可口可乐海报中。
	[5] 精灵小子脸上带着顽童般的笑容，身边总伴有星光闪烁，象征着他活泼的性格和可乐里的气泡。这个Sprite Boy和大家所熟悉的雪碧(Sprite)其
	实毫无关联，雪碧这个品牌直到1961年才问世。 [5] 作为一种饮料，把它译为“雪碧”可谓是煞费苦心。雪，有寒意,符合汽水的清凉口感；碧，清澈碧绿，契合瓶身外包装颜色，既符合中国消费者的认知，又巩固了品牌形象。在大夏天，这样的饮料名，听着就想喝。这样的字又何止“一字千金”呢？ [1]
	网络请求：
	+ http|https超文本传输协议，规定如何上网
	+ 三次握手
	+ 给服务器发送一次请求告诉它你需要什么，然后它有就给你，没有返回一个提示 404路径错误 你的网页走丢了
	+ 步骤
	你给服务器发送请求，发送报文
	服务器接收你的请求，处理
	有返回需要的信息，没有返回提示
	+ 服务器归根结底给咱们返回就是html、css、js、还有图片等等资源
	+ 为了优化图片请求，出现了图片整合技术
	图片整合的优势：
	+ 通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。
	+ 通过整合图片来减小图片的体积。

​

字幕滚动

​

<marquee direction="right" scrollamount="100">欢迎魏川鹏小哥哥来到我的直播间</marquee>
	<marquee behavior="alternate" scrollamount="50">谢谢！亲爱的，李曾伟送的豪华邮轮</marquee>
	<marquee direction="down"></marquee>

​

锚点

​

现在把超链接和div标记已经关联起来了，当满足条件的时候进行点击操作，可以进行跳转	通过相同的id名称链接
	HBuilderX服务器
	使用HBuilderX进行代码开发的时候，默认情况下HBuilderX会把代码整体放在自己的服务器上面
	如果你登陆HBuilderX工具，会把你的代码自动进行保存，当咱们不小心删除了可以通过它找到
	通过它的服务器默认给咱们的页面会添加js文件，用于进行自动刷新页面