CSS之九宫格面试题

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

今天向大家分享一道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

CSS之九宫格面试题相关推荐

css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）
css实现九宫格,但不一定有9个,可能有8个.7个,每两个格子间距是10px,一行放置3个格子,格子宽高比为1:2(最右的面试题) <div class="box">& ...
html 实现格子效果,div+css实现九宫格效果
div+css实现九宫格效果有3种方法: 1.方法一:把九宫图切割成9张图,用9个div合在一起,改变宽高,实现.优点:兼容性100%支持,缺点div太多,使用不方便. 2.方法二:把九宫图按特定格 ...
CSS常考面试题资料
CSS常考面试题资料都是网上搜集的资料链接1<50道CSS基础面试题(附答案)>中的答案真的就只是答案吗? 链接2 50道CSS基础面试题(附答案)
【2022前端面试】CSS手写面试题汇总（加紧收藏）
[2022前端面试]CSS手写面试题汇总(加紧收藏) 更新时间:2022年3月3日把答案一起写上,但是希望大家在看之前思考一下,如果有好的建议,跪求改正! 本文致力于建设前端面试题库,欢迎兄弟们投稿 ...
HTML+CSS+JS+Jquery面试题
HTML+CSS+JS+Jquery面试题 1.CSS中 link 和@import 的区别 Link属于HTML标签,@import是css提供的,只能用来加载css 页面加载时link会同时加载, ...
CSS实现九宫格布局方法
在实际开发中经常会遇到九宫格布局,所以总结几种利用CSS实现九宫格布局的方法,仅供参考... 目录: 利用grid创建网络布局利用display:table 利用absolute方位值利用floa ...
css页面重构面试题
偶然间又看到博客园中这两道页面重构面试题. 题一:分别用2个DIV,3个DIV,5个DIV实现水平垂直均居中显示一个宽50px,高200px的正十字架. 思路:水平垂直均居中的实现,当然非absolu ...
①css实现九宫格动画——前端筑基每天一道前端案例实现
基于在线js编辑器,本文提供实现了一种简单的九宫格动画案例,具体步骤如下: 文章目录总体效果 html实现代码 CSS效果实现 filter属性 transition 属性 justify-cont ...
web前端入门：Html、CSS完成九宫格
用html.css制作一个简单的九宫格,显示完整的拼图效果. 1.建一个三行三列的表格: 2.设置一个图片背景: 3.使用background-position属性来移动背景图片位置. 关于设置背景属 ...
css实现九宫格布局的几种方案
实现效果如下: 首先,定义好通用的HTML结构: <div class="box"><ul><li>1</li><li> ...

CSS之九宫格面试题

CSS之九宫格面试题相关推荐

最新文章

热门文章