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

发表评论

电子邮件地址不会被公开。 必填项已用*标注