day53 标签的三种定位方式, 和javascript

1:标签内容的隐藏

可以通过display和opacity进行隐藏界面

display:不以任何方式显示，在页面中不占位，但重新显示，仍然占位

opacity:通过opacity可以修改样式的透明度，但是即使透明度为0的时候，依然占据着位置，即不管怎样，opacity都是占着一个位置的。

2定位布局

1: 固定定位

定位：就是把子级内容给抠出来。

我们通过浮动布局，将子级在父级中飘起来，就不会再撑开父级高度，但浮动受父级宽度影响，即父级的宽度决定了一行能拍多少个，

然后我们可以通过清浮动让父级能够获得一个刚好的宽度。通过定位把子级内容抠出来以后，父级就无法获得子级的高度，这个时候

父级子级都需要自己定义自己的宽高。

2:绝对定位

1、一个标签要随着父级移动而移动(子级布局完毕后相对于父级位置是静止的)，且兄弟标签动，自身相对父级还是保持静止
2、z-index 值能改变重叠的兄弟图层上下关系
3、子级相对的父级一定要 定位处理 （三种定位均可以）
父级要先于子级布局，所以子级在采用绝对定位时，父级一般已经完成了布局，如果父级采用了 定位 来完成的布局，子级自然就相当于父级完成 绝对定位
如果父级没有采用 定位 来完成的布局，我们要后期为父级增加 定位 处理，来辅助子级 绝对定位，父级的 定位 是后期增加的，我们要保证增加后不影响父级之前的布局，相对定位可以完成

3:相对定位：

 

1、父相子绝

 

2、相对定位也存在独立使用，但是可以用盒模型完全取代，所以一般不会用

 

3:javascript

 

## Javascript


"""
js:前台脚本语言 - 编程语言 - 弱语言类型 - 完成页面业务逻辑及页面交互

1、可以自己生成页面数据
2、可以请求后台数据
3、可以接受用户数据 - 可以渲染给页面的其他位置；提交给后台
4、修改页面标签的 内容、样式、属性、事件(页面通过js可以完成与电脑的输入输出设备的交互)

"""
```



```js
// 一、三种输出信息的方式
// 控制台输出语句
console.log('你丫真帅')

// 弹出框提示信息
alert('你丫确实帅')

// 将内容书写到页面
document.write('<h2 style="color: red">你丫帅掉渣</h2>')
```



```js
// 二、变量与常量
let num = 123;
num++;
console.log(num);

const str = '123';
// str = '456';  // 常量声明时必须赋初值，且一旦赋值，不可改变
console.log(str);
```



```js
// 三、数据类型
// 值类型
// 1) 数字类型
let a = 123;
console.log(a, typeof(a));
a = 3.14;
console.log(a, typeof(a));

// 2) 布尔类型
let b = false;
console.log(typeof(b), b);

// 3) 字符串类型：''  ""  ``
let c = `123
456
789`;
console.log(c, typeof(c));

// 4) 未定义类型：未初始化的变量
let d;
console.log(d, typeof(d));

// 引用类型
// 5) 数组（相当于list）：
let arr = [1, 2, 3];
console.log(arr, typeof(arr));

// 6) 对象（相当于dict）：所有的key必须是字符串
let sex = '男';
let dic = {
    name: 'Owen',
    age: 17.5,
    sex,  // value如果是变量，变量名与key同名，可以简写
};
console.log(dic, typeof(dic));

// 7) 函数类型
function fn() { }
console.log(fn, typeof(fn));

// 8) null类型
let x = null;
console.log(x, typeof(x));
```



```js
// 四、弱语言类型
let aaa = 123;
let bbb = '123';

console.log(aaa == bbb);  // == 只做数据比较
console.log(aaa === bbb);  // === 做数据与类型比较

// 弱语言类型：会自己根据环境决定如何选择类型存储数据
console.log(1 + 2);  // 3
console.log('1' + '2');  // 12
console.log(1 + '2');  // 12
console.log(1 - '2');  // -1
```

 

转载于:https://www.cnblogs.com/jixu/p/11129685.html