西瓜皮儿

css相关

2021/11/9 面试题

# 1.盒子居中

# 2.实现三角形







 
 
 




<body>
    <div></div>
    <style>
        div {
            width: 0;
            height: 0;
            border-bottom: #333 solid 100px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
    </style>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

# 3.循环列表色

题目

  • 要实现一个列表三种颜色循环渲染





















 
 
 
 
 
 
 
 
 



<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <style>
        li {
            width: 100px;
            height: 25px;
            margin-top: 2px;
            list-style: none;
        }
        ul>li:nth-child(3N) {
            background-color: blue;   
        }
        ul>li:nth-child(3N + 1) {
            background-color: red;   
        }
        ul>li:nth-child(3N + 2) {
            background-color: green;   
        }
    </style>
</body>
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

# 4.自适应盒子

  • 左侧固定长度
  • 右侧盒子自适应

方案1








 







 





<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <style>
        .father {
            display: flex;
            height: 100px;
        }
        .left {
            width: 100px;
            background-color: red;
        }
        .right {
            width: calc(100% - 100px);
            background-color: blue;
        }
    </style>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方案2








 







 





<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <style>
        .father {
            display: flex;
            height: 100px;
        }
        .left {
            width: 100px;
            background-color: red;
        }
        .right {
            flex: 1;
            background-color: blue;
        }
    </style>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 5.长宽固定比

问题

  • 长宽固定比例的盒子
  • padding/margin用百分比表示时，是通过width做基准的。

不过padding有背景色，margin没有背景色

<body>
    <div></div>
    <style>
        div {
            background-color: red;
            padding-bottom: 50%;
        }
    </style>
</body>
1
2
3
4
5
6
7
8
9

# 6.左右固定，中间自适应

<body>
    <div class="container">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            height: 30px;
        }
        .one {
            background-color: rgb(161, 95, 95);
            width: 30px;
        }
        .two {
            flex: 1;
            background-color: rgb(197, 46, 46);
        }
        .three {
            background-color: rgb(21, 28, 117);
            width: 30px;
        }
    </style>
</body>
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

# 7.匹配列表头尾几个元素

























 
 
 
 
 
 



<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <style>
        ul {
            width: 100px;
        }
        li {
            height: 30px;
        }
        li {
            background-color: rgb(55, 177, 86);
            margin-top: 5px;
        }
        ul>li:nth-child(-n + 3) {
            background-color: rgb(214, 78, 78);
        }
        ul>li:nth-last-child(-n + 3) {
            background-color: rgb(67, 55, 177);
        }
    </style>
</body>
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

# 8.隐藏元素

# 9.制作扇形

思路1：外层div，radius控制弧形，内层div控制两个直角边，进行移动拼接成扇形

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            /* background-color: red; */
            border-radius: 50%;
            overflow: hidden;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: rgb(94, 137, 230);
            transform: rotate(45deg) translate(50px, 50px);
        }
    </style>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

思路2，一个div盒子，

<body>
    <div class="container">
    </div>
    <style>
        .container {
            width: 0px;
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
        }
    </style>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 10.transform顺序

# 11.transform原理

# 12.css合成层

# 13.js实现sticky效果

上次更新: 11/1/2024

算法题