day55

（1）相对定位
（2）绝对定位
（3）固定定位
（4）z-index属性
（5）JS基础

相对定位
https://www.cnblogs.com/linhaifeng/articles/9036063.html
注意：
#1 在相对定位中同一个方向上的定位属性只能使用一个
　　top/bottom 只能用一个
　　left/right 只能用一个
#2 相对定位是不脱离标准流的，会继续在标准流中占用一份空间
#3 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的
#4 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding
等属性时会影响到标准流的布局，即，给相对定位的标签设置marin或padding，是以该标签原来的位置为基础来进行偏移的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>

        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            /*display: inline-block;*/
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;     /*position:relative 相对定位，相对于自身在标准流中的位置移动*/
            top: 100px;             /*上下定位只能有一个*/
            /*bottom: 10px;*/
            left: 50px;             /*左右定位只能有一个*/
            /*right: 10px;*/
            /*margin-top: 50px;*/
            /*display: inline-block;*/


        }
        .box3 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        img {
            height: 40px;
            position: relative;
            top: 15px;
            left: 10px;
        }
        input {
            height: 40px;
        }
    </style>

</head>
<body>
<div class="box1">相对定位是相对于自身原来的位置移动</div>
<div class="box2"></div>
<div class="box3"></div>
<input type="text">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600660576985&di=2d70af39c234727def903cbdcc0d6e92&imgtype=0&src=http%3A%2F%2Fwww.zhuangjiba.com%2Fd%2Ffile%2Fhelp%2F2018%2F08%2Fcfdefaddb3f47d78f8c66a7de28720aa.png" alt="">
</body>
</html>


绝对定位
绝对定位就是相对于body或者某个定位流中的祖先元素来定位
# 1、默认情况下所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点
# 2、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
     2.1 只要是这个绝对定位元素的祖先元素都可以
     2.2 祖先必须是定位流，此处的定位流指的是绝对定位、相对定位、固定定位(定位流中只有静态定位不行)
     2.3、如果一个绝对定位的元素有祖先元素，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
注意点：
# 1、绝对定位的元素是脱离标准流的,所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
# 2、如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点，会相对于body定位会随着页面的滚动而滚动
# 3、一个绝对定位的元素会忽略祖先元素的padding
绝对定位水平居中
# 1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
# 2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px; 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2 {
            width: 300px;
            height: 3000px;
            background-color: green;
            position: relative;         /*父级属于相对定位但不移动，给子级定位提供参照*/
            padding: 50px;          /*绝对定位会忽略父级的padding属性*/
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;         /*子绝父相*/
            top: 30px;
            left: 50%;
            margin-left: -50px;         /*使其水平方向居中*/
        }
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: purple;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="box1">绝对定位：依次寻找自身的父级，如果父级属于定位流，则绝对定位相对于父级来移动，
    如果所有的父级都不属于定位流，则相对于body来移动。
</div>
<div class="box2">
    <div class="box3"></div>
</div>
<span>回到顶部</span>

</body>
</html>


固定定位
#1、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似）
背景的关联方式background-attachment: fixed;可以让图片不随着滚动条的滚动而滚动，
而固定定位可以让某一个元素不随着滚动条的滚动而滚动。

#2、注意点
    1、固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
    2、固定定位的元素是脱离标准流的，不会占用标准流中的空间
    3、固定定位和绝对定位一样不区分行内、块级、行内块级
    4、E6不支持固定定位 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2 {
            width: 300px;
            height: 3000px;
            background-color: green;
            position: relative;
            padding: 50px;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 30px;
            left: 50%;
            margin-left: -50px;
        }
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: purple;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            position: fixed;                        /*fixed固定定位*/
            bottom: 0;
            right: 0;
        }
        a {
            color: yellow;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="box1">固定定位：和绝对定位高度相似，和背景的关联方式也高度相似
背景的关联方式background-attachment: fixed;可以让图片不随着滚动条的滚动而滚动
而固定定位可以让某一个元素不随着滚动条的滚动而滚动
</div>
<div class="box2">
    <div class="box3"></div>
</div>
<span>
    <a href="#">回到顶部</a>
</span>

</body>
</html>

静态定位
# 什么是静态定位?
    默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流。

z-index属性
#1、z-index属性：用于指定定位的元素的覆盖关系
    1.1、z-index值表示谁压着谁。数值大的压盖住数值小的。
    
    1.2、只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝 
            对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
    
    1.3、z-index值没有单位，就是一个正整数。默认的z-index值是0。

    1.4、如果大家都没有z-index值（默认所有元素z-index值为0），或者z- 
           index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了 
           的元素，永远能够压住没有定位的元素。

#2、注意点：从父现象（父亲怂了，儿子再牛逼也没用）
    父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
    父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index属性</title>
    <style>
        .father1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: relative;
            z-index: 10;
        }
        .father2 {
            width: 300px;
            height: 300px;
            background-color: chartreuse;
            position: relative;
            z-index: 2;
        }
        .son1 {
            width: 100px;
            height: 100px;
            background-color: gray;
            position: absolute;
            bottom: -10px;
            right: -50px;
            z-index: 3;
        }
        .son2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: -30px;
            right: -10px;
            z-index: 8;
        }
    </style>
</head>
<body>
<div class="father1">
    没有设置z-index的情况下默认所有都为0，后覆盖前；
    当父级z-index相同时，则比较子级的z-index，大的覆盖小的；
    当父级z-index不同时，那么不管子级的z-index值为多少，都是通过比较父级的z-index值来判断，大的覆盖小的。
    <div class="son1"></div>
</div>
<div class="father2">
    <div class="son2"></div>
</div>
</body>
</html>
JS基础
https://www.cnblogs.com/linhaifeng/articles/9346128.html
数字类型
var x=111           // var声明变量
console.log(x)      // console.log()打印
var y=3e4           // 3e4=3*10^4  =30000
console.log(y)
console.log(typeof x)       // typeof查看类型
console.log(y.toString())   // toString强转字符串类型
console.log(typeof y.toString())
var z=1.245
console.log(z.toFixed(2))   // 1.25   toFixed保留小数位（四舍五入）
var a='2.6'                //parseInt(a)=2
var b='xxx'
var c='10ccc'               // 10
var d='dd223'               // NaN
console.log(parseInt(a))    // parseInt强转整型，直到识别到第一位非数字
console.log(parseInt(b))    // 对于非数字类型，parseInt不会报错，会转换成NaN（NaN也是number类型）
console.log(parseInt(c))
console.log(parseInt(d))

var x=5
var y='3'
var z='1.5'
console.log(x-y)        // 2
console.log(x+y)        // 53
console.log(typeof (x-y))   //number
console.log(typeof (x+y))   //string
console.log(parseInt(x)+parseInt(y))    // 8
console.log(y+z)    // 31.5
console.log(parseInt(x)+parseInt(z))    // 6

console.log(parseInt(x)+parseFloat(z))  // 6.5 parseFloat转化浮点数


字符串类型
var a='hello'
console.log(a.length)           //length 长度

var a='   he  llo  '
console.log(a.trim())           //删除两边空格（只能清除空格）
console.log(a.trimLeft())       //删除左边空格

var a='hello'
console.log(a.charAt(0))        //charAt根据索引取值
console.log(a.charAt(2))
console.log(a.charAt(-1))       //没有负向索引，不会报错
console.log(a.charAt(30))       //超出索引不会报错

var b='world'
console.log(a.concat(b))        //concat拼接

console.log(a.indexOf('ll'))        //字符串起始位置
console.log(a.indexOf('ll',3))      //只能指定起始位置

var a='helloworld'
console.log(a.substring(1,3))   //根据索引切片，顾头不顾尾
console.log(a.slice(1,3))

var a='heLLoWorlD'
console.log(a.toLocaleLowerCase())  //全小写
console.log(a.toLocaleUpperCase())  //全大写

var a='welt:22:male'        //切分
console.log(a.split())
console.log(a.split(':',1))     //切分次数

var name='welt'
var age=22
console.log(`name is ${name} age is ${age}`)        //反引号（``） 模板字符串

var a=true
console.log(typeof a)       //布尔值
console.log(Boolean(name))
console.log(Boolean(''))    //0、空、null、undefined、NaN为假
console.log(Boolean([]))    //空对象为真



string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

 

posted @ 2020-10-05 18:20  板鸭没有腿  阅读(155)  评论(0)    收藏  举报