1.相对定位
1.给元素设置position：relative即刻实现相对定位
2.可以使用left，bottom，top，right四个属性调整位置，不过最常用的是top值。
3.特点：①不会脱离文档流，只是视角上的变化，不会对其他元素产生任何影响
②最常用的是top值，left和right不能一起设置，top和bottom不能一起设置
③相对定位和浮动可以同时设置，但不推荐这样做。
④相对定位的元素，也能通过margin调整位置，但不推荐这么做。
⑤绝大多数的情况下，相对定位和绝对定位配合使用。
2.绝对定位
1.给元素设置position：absolute即可实现绝对定位。
2.可以使用left，bottom，top，right四个属性调整位置。
3.父元素设置相对定位，子元素设置绝对定位配合使用，那么子元素就会根据父元素的位置开始进行定位，否则就是按照页面顶端开始定位。
3.固定定位
1.给元素设置position：fixed即可实现固定定位。
2.可以使用left，bottom，top，right四个属性调整位置。
4.粘性定位
1.给元素设置position：sticky即可实现粘性定位。
2.可以使用left，bottom，top，right四个属性调整位置，不过最常用的是top值。
5.定位层级
1.定位层级的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2.如果位置发生重叠，默认情况是：后面的元素，会显示在前面的元素之上。
3.可以通过css属性z-index调整元素的显示层级。
4.z-index的属性值是数字，没有单位，值越大显示层级越高。
5.只有定位的元素设置z-index才有效。
6.如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。
6.定位的特殊应用
7.版心
格式：
<style>
.container{
width: ;
margin:0 auto;
}
</style>
.........
<div class="container clearfix">
..........
作用：使pc端网页中有一个固定宽度且水平居中的盒子，来显示网页的主要内容。
注意：版心可以是一个也可以是多个，版心的宽度一般是960-1200之间。
8.常用布局名词（名称不是属性）
位置：顶部导航条（topbar）
页头（header、page-header）
导航（nav、navigator、navbar）
搜索框（search、search-box）
横幅、广告、宣传图（banner）
主要内容（content、main）
侧边栏（aside、sidebar）
页脚（footer、page-footer）
9.重置默认样式
方案三的写法：
<link rel="stylesheet" href="./normalize.css">
10.HTML5简介
11.新增语义化标签
12.新增状态标签
可以用来描述电量和状态
13.新增列表标签
标签名：datalist（用于搜索框的关键词提示）
details（用于展示问题和答案，或对专有名词进行解释）
summary（写在details前面，用于指定问题或专有名词）
实例图片：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
