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)定义伪类清空浮动->还要学一下伪类才行啊。。。暂时先不看这个,恩。

Python学习笔记

好,2019年12月24日,圣诞节。今天开始开坑学Python了!~目标是Django后端框架
资料就看廖雪峰老师的blog了。后面会陆陆续续更新这篇文章。

1,map和reduce函数的问题

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
    #map比较容易理解,迭代后面的元素,每个元素用前面的函数运算
    #reduce是把后面一个序列的前两个元素做函数运算,然后把结果再和后面的继续运算,reduce要import
    #reduce(f, [x1, x2, x3, x4]) = f(f(f(x1, x2), x3), x4) 那reduce就是返回前面第一个参数返回的结果
    #下面这个例子把str转换为int
    from functools import reduce

    def fn(x,y):
        return x*10 + y

    def char2num(s):
        digits = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9}
        return digits[s]

    reduce(fn,map(char2num,'13579')

    #简化的写法看下面
    #原文里面还有一个lambda函数,后面会看到,暂时不会
    from functools import reduce

    DIGITS = {'0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9}

    def str2int(s):
        def fn(x, y):
            return x * 10 + y
        def char2num(s):
            return DIGITS[s]
        return reduce(fn, map(char2num, s))

    #练习1:把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字
    def format(L):
    def cap(s):
        return s.capitalize()
    return map(cap,L)
    #测试OK  list(format(['adam', 'LISA', 'barT']))  输出['Adam', 'Lisa', 'Bart']

    #练习2:编写一个prod()函数,可以接受一个list并利用reduce()求积:
    #请编写一个prod()函数,可以接受一个list并利用reduce()求积:
    from functools import reduce
    def prod(L):
        def multi(a,b):
            return a*b
        return reduce(multi,L)
    #测试OK prod([2,3,4]),输出24

    #练习3:利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456:

有一个问题就是python里面貌似是next()过了以后,下次调用就停在那个位置了。比如我s=map(char2num,’13579′)以后,第一次reduce(fn,s)是ok的,但是马上再来一次就会Traceback报错,以后再看。

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中的数据,都是可读可写的