学习笔记：前端基础查缺补漏（二）

好多基础的东西都忘记了，补起来！！

浮动

float 脱离文档流，但不会脱离文字流
清除浮动，让其回归到文档流中
- 法一对父容器添加 overflow: hidden css属性
- 法二对父容器伪类after进行css属性设置(注意，伪类一定要设置content属性)
- 法三在浮动元素后添加一个div标签并设置属性

/* 法二 */
.container::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    zoom: 1

/* 法三 */
.container>.clear-fix {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

定位

static
- 使元素定位于常规/自然流中
- 忽略top,right,bottom,left,z-index属性
- 两个元素的margin等于最大的那个
- 具有固定width，height的元素，设左右margin为 auto，margin会自动扩大填满剩余宽度（居中）
relative
- 脱离常规/自然流，但是在其中仍有他的位置
- 使其变成定位祖先元素（和absolute相关）
- 他的后代都可以相对于他进行绝对定位(absolute)
- 用top等定位是相对于其在常规流中的位置
- 使浮动元素产生偏移 (top…)，控制偏移顺序 (z-index)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container>div {
            width: 100px;
            height: 100px;
            background: #f0f0f0;
            border: 1px solid #000;
            text-align: center;
            line-height: 100px;
            position: relative;
            box-sizing: border-box;

            float: left;
            z-index: 5;
        }
        .container>div:nth-child(2) {
            left: -50px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
</body>
</html>

absolute
- 脱离常规流
- 未设置大小则会填充最近的定位祖先元素(relative)
- 尺寸设为百分比时相对的使其最近的定位祖先元素
- 居中技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background: #f0f0f0;
        }
        .child {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>
</html>

fixed
- 和absolute区别，相对于视窗做绝对定位
- 继承absolute特点
- 居中技巧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
        }
        .page {
            width: 100%;
            height: 5000px;
            background: #f0f0f0;
        }

        .login {
            position: fixed;
            width: 300px;
            height: 200px;
            background: #555;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="login"></div>
    </div>
</body>
</html>

sticky
- 参照物：视口，最近可滚动的祖先元素

如何遍历JavaScript对象的值

var obj = {name: "aaa", age: 12}
for (key in obj) {
  console.log(obj[key]);
}

一些忘记的基础api

三种提示框 alter prompt confirm
对窗口window进行操作
- open
- close
- moveTo
- resizeTo
获取屏幕大小
- window.screen.availWidth
- window.screen.availHeight高度

写在最后

因为有前端基础，所有这部分就快速地过了一遍，比较java工程师技能树里前端不是非常重要的的，课程要求写页面，所有我就非常认真地写了，纯html+css，没有js，第一个用到了flex布局，觉得蛮好用的，第二个了解到了rgba的用法，css三角形的绘制，用到了scss这种css增强型语言，解决复杂页面样式简直就是利器，没有搭建gulp或者webpack环境，直接用intellij IDEA自带的file watcher编译的，效果如下，源码链接

后面主攻java了，加油！！！

Schwarzeni

浮动

定位

如何遍历JavaScript对象的值

一些忘记的基础api

写在最后