# 1.定位 position position:absolute/relative ~~~ relative定位 相对定位：元素在页面上正常的位置。 ~~~ ~~~ absolute定位 绝对定位：1.它的位置是相对于最近的给了定位的父元素(包含爸爸的爸爸) 2.如果父元素没有给定位,那么它的位置(left,top,right,bottom)是相对于整个窗口 都通过left,top,right,bottom移动 z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素 ~~~ ~~~ 固定定位 position:fixed ~~~ - 找一个固定定位的例子，简书 - demo 百度一下搜索框 # 2. 实现元素的垂直水平居中 > 第一种 ~~~ 父元素设置parent{position:relative;} 子元素设置 child{ position:absolute; left:50%; top:50%; margin-left:-50%*child*width; margin-top:-50%*child*height; } ~~~ > 第二种 ~~~ parent{ position:relative; } child{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } ~~~ # 3. `css`样式的几种引入方式 ## 3-1 外部样式表 --->W3C推荐用这种 ~~~ <link rel="stylesheet" type="text/css" href="/c5.css"> ~~~ ## 3-2 内部样式表（位于 标签内部） ~~~ <style> p{color:pink;font-size:16px} </style> ~~~ ## 3-3 内联样式（在 HTML 元素内部）！！！不要用 ~~~ <p style="color:pink;font-size:16px">hello world</p> ~~~ - 给同一选择器设置同一样式,离元素近的样式设置方式优先级高 # 4.绝对路径和相对路径 **绝对路径：从盘符开始的路径** > 因为会上传html和css，所以不要写绝对路径 ~~~ <img src="D:/images/down.jpg" alt=""/> ~~~ **相对路径：相对当前文件所在的路径** ~~~ 同级目录 src='down.jpg' 下一级目录 src='images/down.jpg' 上一级目录 src='../down.jpg ~~~ ## 5.定位的宽高继承问题 ~~~ 父元素给position:relative 子元素position:absolute 子元素绝对定位,不会继承父元素的width ~~~