[散修弟子]JS-1619|2018年07月16日的日报-技能树.IT修真院

发表于： 2018-07-16 23:39:58

2 636

前两天家里有事，今天继续打卡

7.13的补充

ID和CLASS的优先级

权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

JS获取的DOM与JQurey获取的有什么区别

原生js获取：

id: document.getElementById('#id')

class： document.getElementsByClassName(".class")

jQuery获取：

id: $('#id')

class: $('.class')

伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的。

fixed相对于body、

https://blog.csdn.net/oulihong123/article/details/53396303 通过margin属性，fixed根据父级元素定位，实现上一页，下一页小图标的自适应屏幕

今日完成

1.试着用弹性布局完成任务一，已完成

2.试着用浮动完成任务一，和我想的效果不一样（多图预警前方高能）

（1）square有右边距，right没有，浮动后right不是应该被square撑开么，感觉他们的位置不对，square没有被right包裹住

（2）中间列浮动并没有居中

（3）不知道需不需要定位

代码如下：html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格（2）</title>
    <link rel="stylesheet" href="../CSS/Task1(2).css"/>
</head>
<body>
    <div class="left">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
    <div class="right">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
    <div class="middle">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</body>
</html>

CSS:

.square{
    width:100%;
    height: 30%;
    background-color: orange;
    border-radius:5%;
    margin:4%;

}
.left,.right,.middle{
    height: 100vw;
    width: 30vw;
}
.left{
    float: left;
}
.right{
    float: right;

}
.middle{
    float: left;
}