CSS笔记-持续更新

这部分内容很多是参考这个CSS经典面试题,总结的不错。还有W3School的示例。
css经典面试题汇总

1,用position定位水平垂直居中一个元素的例子
第一种情况是不知道中间那个span的宽和高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    .outer{
        width: 300px;
        height: 300px;
        background-color: tomato;
        position: relative;
    }
    span{
        /* float:left; */
        position:absolute;
        background-color:pink;
        top:50%;
        left:50%;
        /* transform:translate(-50%,-50%); */
        /* 上面这行代码如果没有的话,元素的左上角那个点会正好在中心 */
    }


因为当中的span的position是absolute的,所以他的left和top是看包裹他的外面的元素。如果.outer的div没有position,span会去看最外层页面居中。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

第二种情况是已知元素的宽高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    .outer{
        width: 300px;
        height: 300px;
        position: relative;
        background-color: tomato;
    }
   
    span{
        float:left;
        text-align: center;/* 文字的水平居中 */
        line-height: 50px;/* 让文字的行高和容器的行高相等,实现简易的文字垂直居中 */
        position: absolute;
        background-color: pink;
        width: 150px;
        height: 50px;
        top: 50%;
        left: 50%;
        /* margin:-25px 0 0 -75px; */
        margin-top: -25px;
        margin-left: -75px;
    }

如果知道高度和宽度,就可以用具体的宽度数值去调整margin

2,块格式化上下文Block Fomatting Context的理解
Working on it…

3,水平居中一个div

1
2
3
4
5
    .center{
        margin:auto;
        width: 70%;
        background-color: tomato;
    }

因为div是块级元素,所以可以通过调整其宽度的方法来实现居中。

4,垂直水平居中一个div,用position:abosolute

1
2
3
4
5
6
7
8
9
10
11
12
    .center{
        border:1px solid black;
        position:absolute;
        width: 200px;
        height: 100px;
        background-color: tomato;
        margin: auto;
        left:0;
        right: 0;
        top: 0;
        bottom: 0;
    }

指定宽度和高度以后,用绝对定位,指定marigin:auto。上下左右全都0

5,display属性
就记住inline block flex 和none吧…其他估计也不太会用

6,用CSS画一个三角形
这个感觉比较有意思,参考以下:
css draw triangle
首先是想象一个正方形,然后他有四个比较粗的边框,边框的交汇处会出现三角形。
然后其实这个正方形边框里面的宽度和高度都是0,就是content的宽高。
这样一来,比如上面左边右边的边框是透明的话,看上去就只有下面一个边框是三角形了。

1
2
3
4
5
6
7
8
    .arrow_up{
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid tomato;
    }

最后效果:

7,画一个全屏的品字。
这里的做法我和上面的链接稍微有点不太一样,第一行是一样的。第二行的两个方块感觉如果用flex布局的话也可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    .square{
        width:300px;
        height:300px;
        background-color: tomato;
        border-radius: 8px;
    }
    .square.top{
        margin:0 auto;/* 让第一行的方块居中 */
    }
    .square.below{
        margin:10px;/* 让第二行的方块有上边距 */
    }
    .line2{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
    }

发现margin的调整也可以放在html的内联样式表里面操作。不知道一般的做法是不是这样。

8,确定Containing Block
在确定尺寸和位置的时候,要看这个元素是参照谁去计算的。感觉下面这个链接写的比较通俗易懂吧,其实在查看网上资料的时候发现这个问题有很多情况的讨论,不过这里只写简单的。
“一个元素的尺寸和位置经常受其包含块的影响。大多数情况下,包含块就是这个元素最近的祖先块元素的内容区,但也不是总是这样。”

Explain Containing Block
(1)如果position为static或relative(最一般的情况或者默认情况)Containing Block就是最近的祖先块元素的内容区域。

第一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    body{
        background-color: pink;
    }
    section{
        display: block;
        width: 400px;
        height: 160px;
        background-color: salmon;
    }
    p{
        background-color: tomato;
        width:50%;/* 因为p是position为static的,所以section的content部分就是他的包含快 width=400*0.5 */
        height:25%;/* 同理,height=160*25% */
        margin:5%;/* margin的百分数是相对于父元素的 width 计算的。w3school的外边距这里有写,所以是400*0.05=20px */
        padding:5%;/* 400*0.05=20px */
        /* 为什么要确定Containing Box 因为比如margin和padding都是要根据包含块的width来计算的,注意上下margin的塌陷,这个笔记的第九条 */
    }

第二个例子:(最近的元素是inline,不是块元素,所以他看的是最外层的Body)

1
2
3
4
5
6
7
8
9
10
11
12
    body{
        background-color: pink;
    }
    section{
        display: inline;/* inline是把他变成行内元素,然后他又没有内容,所以啥都没显示 */
        background-color: salmon;
    }
    p{
        background-color: tomato;
        width:50%;/* 因为section不是块元素,所以他的50%是body的50% */
        height:200px;/*这里如果写百分比的话,会自动变成0*/
    }

(2)如果position为absolute,则Containing Block就是最近不为static的祖先元素内边距的边缘区域,如果没有就是最外面的视窗。

第三个例子:
这个示例中,P 元素的包含块是 section,因为 section 的 position 为 absolute 。P 元素的百分值会受其包含块的 padding 所影响。不过,如果包含块的 box-sizing 值设置为 border-box ,就没有这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    body{
        background-color: pink;
    }
    section{
        position: absolute;/* 首先这个section是absolute的,所以他的containing box是body */
        background-color: salmon;/* 背景颜色是content+padding的部分 */
        left:30px;
        top:30px;
        width: 400px;
        height: 160px;
        padding:30px 20px;
    }
    p{
        position: absolute;/* 这个p元素的containing box是section的包括padding的部分 */
        background-color: tomato;
        width: 50%;/* (400+20+20)*0.5=220px padding的部分也要计算进去的*/
        height: 25%;/* (160+30+30)*0.25=55px 同样考虑padding的距离*/
        margin: 5%;/* (400+20+20)*0.05=22px */
        padding: 5%;/* (400+20+20)*0.05=22px */
        /* top:auto; 如果position是absolute的时候,并且外面Containing Box是block的情况,top和left,当然还有bottom和right都是auto*/
        /* left:auto; 在这里注释掉这个或者不注释掉是一样的*/
    }

(3)如果position为fixed,则Containing Block就是最外层视窗。(这个例子不写了,比较容易理解。)
[注]上面这三点是比较粗略的判断方法,实际可能还有其他情况,看了一下不是很懂就稍微忽略了一下。。。

9,margin在上下的情况下对齐会出现两种情况:
(1)上下margin的时候会取较大值发生合并。这个比较容易理解。
(2)上下塌陷现象。一个大盒子中包含一个小盒子,给小盒子设置一个margin-top,大盒子会一起向下平移。
理解了BFC以后会补充这部分内容,continuing…

10,display和position
浮动和绝对定位不能同时定义。但是浮动和相对定位是可以同时定义的。
display属性规定元素应该生成框的类型。(是块级元素还是内联元素。还有很多别的先不纠结)
position是定位。相对定位,还是绝对定位。

11,理解float
用float的初衷是让文字环绕图片。如果要一个三栏的布局,感觉还是考虑Flex布局的方法比较好。
文字环绕图片的话,比较容易出现一个问题就是外面比如有个div,让这两个东西被包括在这个div里面。但是呢,里面两个都是浮动元素,所以他们一脱离普通文档流,
外面包裹的div就没有高度了。对于这种情况,有几种常见的处理方法:
(1)手动设置外面div的高度->最好不要用
(2)用空div去清空浮动clear->这个方法比较好,但是貌似现在不是最主流的。
(3)定义伪类清空浮动->还要学一下伪类才行啊。。。暂时先不看这个,恩。

Flex布局的示例

Flex布局是很常用的!
主要参考阮一峰的blog
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
css什么不太会…刚刚开始学,如果看到写的很傻的地方求不黑。

示例1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex_eg2</title>
        <link rel="stylesheet" type="text/css" href="flex_eg2.css"/>
    </head>
    <body>
        <div class="Container">
            <div class="Grid">1/2</div>
            <div class="Grid">1/2</div>
        </div>
        <div class="Container">
            <div class="Grid">1/3</div>
            <div class="Grid">1/3</div>
            <div class="Grid">1/3</div>
        </div>
        <div class="Container">
            <div class="Grid">1/4</div>
            <div class="Grid">1/4</div>
            <div class="Grid">1/4</div>
            <div class="Grid">1/4</div>
        </div>
    </body>
    </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    .Container{
        width: 100%;
        height:120px;
        display: flex;
    }

    .Grid{
        background-color:gainsboro;
        border-radius: 10px;
        height: 100px;
        width: 100px;
        margin: 5px;
        text-align: center;/*内部文字水平居中*/
        line-height: 100px;/*内部文字垂直居中 要算一下高度*/
        flex: 1;/*flex的第一个参数是flex-grow,相当于自动扩展*/
    }

最后效果:

示例2:百分比布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex_eg3</title>
        <link rel="stylesheet" type="text/css" href="flex_eg3.css"/>
    </head>
    <body>
        <div class="Grid">
            <div class="Grid-cell u-1of2">1/2</div>
            <div class="Grid-cell">auto</div>
            <div class="Grid-cell">auto</div>
        </div>
        <div class="Grid">
            <div class="Grid-cell u-1of4">1/4</div>
            <div class="Grid-cell">auto</div>
            <div class="Grid-cell u-1of3">1/3</div>
        </div>
        <div class="Grid">
            <div class="Grid-cell">auto</div>
            <div class="Grid-cell u-1of3">1/3</div>
        </div>
    </body>
    </html>

css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
    *{
        font-family: sans-serif;
    }

    .Grid{
        display: flex;
        border-radius: 10px;
        background-color: bisque;
        width: 100%;
        height:120px;
    }

    /* flow-grow为1 这里都没写宽度,反正是按照比例填满的*/
    /*这个是auto的格子*/
    .Grid-cell{
        background-color:pink;
        border-radius: 10px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        flex:1;
        margin: 5px;
    }

    /* flex前面两个0就代表既不flex-grow也不flex-shrink保持大小不变 */
    /*不管别的怎么变,他就是25%的意思,不知道这么理解对不对哦*/
    .Grid-cell.u-1of4{
        background-color:skyblue;
        border-radius: 10px;
        margin: 5px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        flex: 0 0 25%;
    }

    .Grid-cell.u-1of3{
        background-color:snow;
        border-radius: 10px;
        margin: 5px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        flex: 0 0 33.3333%;
    }

    .Grid-cell.u-1of2{
        background-color:palegreen;
        border-radius: 10px;
        margin: 5px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        flex: 0 0 50%;
    }

最后效果:(把颜色稍微涂一下感觉好多了。。)

示例3:圣杯布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>holygrail</title>
        <link rel="stylesheet" type="text/css" href="holygrail.css"/>
    </head>
    <body>
        <div class="HolyGrail">
            <header>#header</header>
            <div class="HolyGrail-body">
                <div class="HolyGrail-nav">#HolyGrail-nav</div>
                <div class="HolyGrail-content">#HolyGrail-content</div>
                <div class="HolyGrail-ads">#HolyGrail-ads</div>
            </div>
            <footer>#footer</footer>
        </div>
    </body>
    </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    *{
        font-family: sans-serif;
        border-radius: 5px;
    }

    header,footer{
        flex:1;
        background-color: steelblue;
        margin: 5px;
    }

    .HolyGrail{
        display: flex;
        flex-direction: column;
        min-height: 600px;
    }

    .HolyGrail-body{
        display: flex;
        flex:1;
        background-color: whitesmoke;
        min-height: 400px;
    }

    .HolyGrail-nav, .HolyGrail-ads{
        flex:0 0 160px;
        background-color: wheat;
        margin:5px;
    }

    .HolyGrail-content{
        background-color: tomato;
        flex:1;
        margin:5px;
    }

    .HolyGrail-nav{
        order: -1;
    }

最后效果:

示例4:悬挂式布局
这里静态的内容放着只是为了举个栗子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Miao Miao Examples</title>
        <link rel="stylesheet" type="text/css" href="suspend.css"/>
    </head>
    <body>
        <p style="font-weight:bold">MiaoMiao Examples</p>
        <br/>
        <div class="suspend-body">
            <div class="left" style="width: 50%;">
                <div class="suspend-item">
                    <img class = "media-figure" src="cat01.jpg">
                    <div class = "media-body">
                        <p style="font-weight: bold;">Miao Miao Miao Miao</p>
                        <p>Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Mi</p>
                    </div>
                </div>
                <div class="suspend-item" >
                    <img class = "media-figure" src="cat01.jpg">
                    <div class = "media-body">
                        <p style="font-weight: bold;">Miao Miao Miao Miao</p>
                        <p>Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Mi</p>
                    </div>
                </div>
            </div>
            <div class="right" style="width: 50%;">
                <div class="suspend-item">
                    <img class = "media-figure" src="cat01.jpg">
                    <div class = "media-body">
                        <p style="font-weight: bold;">Miao Miao Miao Miao</p>
                        <p>Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    *{
        font-family: sans-serif;
        border-radius: 5px;
    }

    .suspend-body{
        display:flex;
    }

    .left .right{
        display: flex;
        flex-direction: column;
    }

    /*每个悬挂的灰色的那块*/
    /*align-items说明里面的元素贴着上面对齐*/
    .suspend-item{
        flex:1;
        display:flex;
        align-items: flex-start;
        background-color:whitesmoke;
        margin: 10px;
    }

    .media-figure{
        margin: 12px;
        width: 50px;
        height: 50px;
    }

    .media-body{
        flex:1;
        margin:2px
    }

最后效果:

示例5:Sticky Footer
这种做法就是外面是display:flex 然后中间的content是flex:1 上下的header和footer高度固定,这样下面就能一直显示到

React笔记(不定时更新)

这个部分主要就是抄React官网的教程,以后找起来方便一点啦。
希望熟练了以后可以不用一直ref就好。
https://react.docschina.org/tutorial/tutorial.html#lifting-state-up

1,函数组件
如果你想写的组件只包含一个 render 方法,并且不包含 state,那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类,我们可以定义一个函数,这个函数接收 props 作为参数,然后返回需要渲染的元素。函数组件写起来并不像 class 组件那么繁琐,很多组件都可以使用函数组件来写。
替换前:

1
2
3
4
5
6
7
8
9
10
11
    class Square extends React.Component {
    render() {
    return (
    <button> {this.props.onClick()}}
    &gt;
    {this.props.value}
    {/* value属性用的时候是this.props.value */}
    </button>
    );
    }
    }

替换后:

1
2
3
4
5
6
7
    function Square(props) {
    return (
    <button>
    {props.value}
    </button>
    );
    }

2,create-react-app

1
2
3
4
5
6
7
    # 全局安装
    npm install -g create-react-app
    npx create-react-app my-app
    cd my-app

    # 启动编译当前的React项目,并自动打开 http://localhost:3000/
    npm start

3,可以在Chrome浏览器上装一个React插件,名字叫:React Developer Tools

4,props和state的区别(b站视频里面总结的)
・props中的数据都是外界传递过来的;state中的数据都是私有的(通过Ajax获取回来的数据,一般都是私有数据)
・props中的数据都是只读的,不能重新赋值;state中的数据,都是可读可写的

Javascript常用笔记(不定时更新)

1,关于两个!!a的用法
在Antd的checkbox group里面有用,判断indeterminate的状态的地方
!!a是一个布尔值,代表a有内容,即a不为null,不为undefined,不为空字符串

1
2
3
4
5
    var array1=[1,2,3];
    var array2=[];

    !!array1.length;//true
    !!array2.length;//false

2,Spread运算符(…)

用法1:用于构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var arr1 = [1,3,5];
    var arr2 = [2,4,6];

    […arr1,…arr2]  //输出[1,3,5,2,4,6]

    //第二个例子
    var o2 = {
        age:22,
        address:'中国北京',
    }
   
    var o1={
        name:'张三',
        ...o2,
    }
    console.log(o1);//得到一个属性都有的对象

用法2:用于调用函数时,将一个数组用作函数的参数,(就是把这个数组转化为参数的列表)

1
2
3
4
5
6
    function testFunc(x,y,z){
        return x+y+z;
    }

    var args = [1,2,3];
    testFunc(…args);  //输出6

用法3,(不知道是不是应该叫用法3)
属性前面的三个点(…props),是延展操作符。 在React中,延展操作符一般用于属性的批量赋值。比如

1
2
3
4
5
6
7
8
9
    var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;
    //等同于
    var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component foo={x} bar={y} />;

使用延展操作符的好处是,当你的属性有所增加的时候,组件中的使用不需要去增加对应的属性。

3,filter函数,
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

1
2
3
4
5
6
7
    var ages = [32,33,16,40];

    function checkAdult(age){
          return age >= 18;
    }

    ages.filter(checkAdult);//[32,33,40]

4,Array(46).keys()迭代器
这个不太懂,比如得到一个数组,元素是数字[0,1,2,3,……,45]
就是用下面这个方法

1
2
3
4
    var it = Array(46).keys();//这是一个迭代器对象,具体是啥我也不造,目前看到过的都是...它 当参数用,从零到四十五
    var arr1 = [];
    arr1 = [...it];
    document.getElementById("demo3").innerHTML=arr1;//输出0,1,2,3,4,5,.....,45

5, var a = a || {}
是给a赋默认值的一种写法。
如果a已经赋值了,这 a 为真 a || {} 返回 a,即a还是原来的值。
如果a为假 a || {} 返回 {},就为a赋值为{} 了。

6,Object.assign(target,source)复制

1
2
3
4
5
6
7
8
9
10
    const target = { a: 1, b: 2 };
    const source = { b: 4, c: 5 };

    const returnedTarget = Object.assign(target, source);

    console.log(target);
    // expected output: Object { a: 1, b: 4, c: 5 }

    console.log(returnedTarget);
    // expected output: Object { a: 1, b: 4, c: 5 }