牛客CSS前端笔试题目知识点整理（长期更新）

Web笔试

Publish Date: 2021-04-27

Update Date: 2021-06-19

CSS清除浮动方法整理

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            background: red;
        }

        .div2{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="div1">
        div1
        <div class="div2">
            div2
        </div>
    </div>
</body>
<script>

</script>
</html>

1 触发父元素的BFC清除浮动(display, position, overflow等)

.div1{
    width: 200px;
    background: red;
    overflow: hidden;   /* BFC */
}

2 尾部元素使用clear属性清除浮动（伪元素，额外DOM等）

.div1::after{       /* clear清除的是前置浮动，即代码结构中clear元素前方的float元素 */       
    content: "";    /* content + display + clear */
    display: block;
    clear: both;
}

CSS指定特定边框的方法

div{
    width: 100px;
    height: 100px;
    border-top: 100px solid black;
    border-right-width: 200px;      /* 特定边框的宽度 */
    border-right-style: solid;      /* 特定边框的样式 */
    border-right-color: green;      /* 特定边框的颜色 */ 
}

border显示问题

div{
    width: 100px;
    height: 100px;
    border: 1px solid black;        /* 显示 */
}

border: solid black;        /* 不显示 */
border: 1px black;          /* 不显示 */
border: 1px solid;          /* 不显示 */

/* 设置边框时必须同时设置border-width border-style border-color 任何元素的缺失都会导致边框不显示*/