03.固定定位
当元素的position属性设置fixed时,则开启了元素的固定定位
(1)用于固定在浏览器页面上,不随浏览器的滚动而改变位置;
(2)以浏览器为参照物,和父元素没有任何关系;
(3)固定定位不占有原来的位置,即脱离标准流 ,更改元素的性质
(4)应用场景
- 固定导航
- 固定侧边栏
- 广告
04.粘滞定位
粘滞定位 (一般用于页面导航的吸顶效果)
-当元素的position属性设置为sticky时,则开启了元素的粘滞定位
(1)以浏览器为参照物(体现固定定位特点);
(2)占有原来位置(体现相对定位特点),不会脱离文档流,元素性质也不会发生变化;
(3)粘滞定位可以在元素到达某个位置时,将其固定
(4)配合top值设置,没有达到top值之前正常显示,随着滚动条滚动而滚动,
达到top值之后类似于固定定位,不会跟随滚动条滚动而滚动
05.绝对定位元素布局
水平方向9个值相加必须要等于父元素的内容的宽高,否则浏览器就会自动调整,这个过程
还是叫过渡约束
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
当开启决定定位后,水平方向的布局等式就会加上left,right两个值
此时规则和之前一样,只是多添加了两个值
-当发生过度约束时
1:如果9个值中没有auto,则自动调整right值以使等式满足
2:如果有auto,则自动调整auto的值以使等式满足
-可设置auto的值
margin width left right
四个值中,三个值固定,某一个值设为auto,则会调整这个auto值,
若width left right top bottm都为固定值,
margin会均分四个方向值,让元素水平垂直居中 ***
—两个auto的情况
margin 和width为auto, 调整width
margin 和left,right其中一个值为auto,调整left或right
width 和left,right其中一个值,调整left或right
left,right都为auto 调整right
—三个auto的情况
margin width left ===> 调整left
margin width right ===> 调整right
width left right ===> 调整right
—四个值auto的情况
width,right,left,调整right
垂直布局
等式也必须满足
top+margin-top+····+botoom
水平方向总结
只要right为auto,那就调整right
right>left>width>margin
06.层级
z-index 设置元素的层级
后面跟正整数,数值越大,层级越高
注意:
1、 z-index属性必须要开启定位的前提下使用
2、设置z-index,父元素的层级再高也不会高于子元素
07.第一种轮播图
总结下来,轮播图:
一般分为两类
一、自己手写(配合js,目前的话,大家掌握原理和样式)
1、用float为主
建一个对外的窗口,让图片整个横向排列,通过调整整个图片的水平方向,
来显示对应的图片
2、用定位为主
让图片叠在一起,通过改变图片的层级,来决定显示哪张图片
二、用各种插件、或者框架(别人写的,你来用)
08.第二种轮播图
09.图标字体
图标字体(iconfont)
大多情况下,我们的图标字体,是有专门图标库,或者从框架里找
-在网页中经常需要使用一些图标,可以通过图片来引入图标
但图片本身比较大,也不灵活
-所以使用图标时,我们还可以将图标直接设置为字体,
然后通过font-face的形式来对字体进行引入
-这样我们就可以通过使用字体的形式来使用图标