CSS之九宫格面试题

最新推荐文章于 2024-08-22 10:53:27 发布

山间有风

最新推荐文章于 2024-08-22 10:53:27 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： css 面试题

本文链接：https://blog.csdn.net/zuoypx/article/details/82183608

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

分享一下我一年前端自学路上的学习笔记。若有侵权，请联系我，我立即删除或标明出处。

今天向大家分享一道CSS九宫格面试题。下面我们一起开始解决这个问题。
题目：如下图所示，九宫格中标有其对应的数字，当鼠标经过时，其边框呈现红色。

首先，我们先写HTML结构。一个父容器包裹9个子容器，可以选择<section><div>或<ul><li>或<dl><dt>来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格</title>
</head>
<body>
    <section class="container">
        <div class="ceil">1</div>
        <div class="ceil">2</div>
        <div class="ceil">3</div>
        <div class="ceil">4/div>
        <div class="ceil">5</div>
        <div class="ceil">6</div>
        <div class="ceil">7</div>
        <div class="ceil">8</div>
        <div class="ceil">9</div>
    </section>
</body>
</html>

接着实现题目中布局。布局方法有多种，可以选择float absolute table flex grid来实现。

<style>
        *{
            margin: 0;
            padding: 0;
        }                    //简单的reset一下
        .container{
            display: flex;
            flex-wrap: wrap;;
            width: 300px;
            padding: 20px;   //方便一会看效果
        }
        .ceil{
            width: 100px;
            height: 100px;
        }
    </style>

实现文字水平垂直居中对齐并加上边框样式

        .ceil{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            vertical-align: middle;
            border: 4px solid #ccc;
        }

此时布局并非按照我们预想那样排布，使用box-sizing和margin以及：nth-child来重新调整布局

        .ceil{
            box-sizing: border-box;
            margin-top: -4px;
            margin-left: -4px;
        }
        .ceil:nth-child(3n+1){
            margin-left: 0;
        }

添加鼠标悬停边框样式

        .ceil:hover{
            border-color: red;
            z-index: 2;    
        }

这样我们就实现了题目中的效果和样式。回顾这道九宫格面试题，我们整理一下其中面试点：

HTML的语义化
CSS的常见布局方式
文字水平垂直对齐
盒模型
负边距
选择器
z-index

山间有风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录