前端学习之CSS---定位、锚点、精灵图、浮动、窗口自适应

定位、锚点、精灵图、浮动、窗口自适应

一、定位—position

position : static/ absolute/ relative/ fixed/ sticky
static : 默认值
absolute : 绝对定位，脱离文档流，当没有父元素或者父元素没有定位，参照物为浏览器窗口的第一屏
			有父元素且父元素有定位时，参照物为父元素
relative : 相对定位，不脱离文档流，相对于自己的初始位置
fixed : 固定定位，脱离文档流，参照物为浏览器的当前窗口
sticky : 粘性定位，可以做吸顶效果，css3新特性，兼容性不好

层叠顺序：z-index 属性是不带单位的，允许负值，不设置时最后写的优先显示，设置后数值越大层级越高

1、绝对定位—absolute

两个父子关系的盒子，子盒子需要绝对定位时，父盒子如果没有定位的话，通常设置为相对定位，否则子盒子的参照物会变为浏览器窗口的第一屏。相对定位不设置偏移的话不会影响父盒子的位置。

子绝父相

 

将行内元素转为块元素的方式：

1. display : block
2. position : absolute
3. float : left

 

2、粘性定位—sticky

position : sticky 
top : 0px

 

3、绝对定位与浮动的区别

float : left浮动出现的意义就是实现文字环绕效果，属于半脱离文档流

position : absolute属于全脱离文档流，不会出现文字环绕的效果

 

---

二、锚点

锚点作用：页面不同区域的跳转，使用<a>链接

<a href="#锚点名字"></a>
<div id="锚点名字"></div>

 

---

三、精灵图（雪碧图）

1、CSS Sprites的原理（图片整合技术）

将导航背景图片，按钮背景图片等多个图片有规则的合并成一张背景图，然后用background-position来实现背景图片的定位技术

 

2、图片整合的优势

1. 减少对服务器的请求次数，提高页面加载速度
2. 通过整合图片减少图片体积

提升页面性能

background-position : -205px -111px
通常是负值，原理类似相对定位，通过移动图片定位内容，负值为将图片向左移动，使想展现的内容出现在需要的位置

 

---

四、清浮动

父元素不设置高度时，子元素浮动的话会导致高度塌陷

解决方案：

1. 直接给父元素设置高度，缺点：如果浮动过多容易导致换行问题
2. 浮动元素后面增加空标签<div style="clear:both"></div> 缺点：不利于代码可读性，降低浏览器性能
3. overflow: hidden 缺点：会隐藏溢出的元素
4. 伪元素清除浮动，万能清浮动

::after（与content属性一起使用，定义在对象后的内容）
	div::after(content:"文本内容";)
	div::after(content:url(logo.jpg);)

div::after{				万能清浮动法
    content:"";
    clear:both;
    display:block;
    width:0;
    height:0;
    visibility:hidden;  占位置的隐藏
    /*display:none;      不占位置的隐藏*/
}

::before
	div::before(content:"在其前放内容";)
::first-letter:定义对象内第一个字符的样式
    div::first-letter{
        font-size:30px;
        color:blue;
        background-color:yellow;
        content:"aaa"
    }
::first-line:定义对象内第一行文本的样式

 

---

五、窗口自适应

html和body默认高度都是0，需要被内容撑开，通过设置高度100%可实现窗口自适应（body内元素可设置百分比高度）

html,body{
    height:100%;
}