CSS基本功 九宫格

主要知识点：

1. display属性

table, table-row, table-cell

2. 类table元素的特性

table-layout

border-collapse

3. 盒模型

box-sizing

4. 元素的定位类型

position

5. 伪元素和伪类选择器

::before, ::after

:hover

效果部分：

— 实际效果图 —

— hover时 效果 —

代码部分：

html::

1

2

3

4

5

6

7

8

9

css::

*{

margin:;

padding:;

}

/* 基础样式 ================================== */

.jiu-gong-ge{

width:300px;

margin:20px20px;/* 设置边距，便于查看 */

}

.jiu-gong-ge.lattice{

width:100px;

height:100px;

text-align:center;

}

/* 关键样式 ================================== */

.table-layout{

display:table;

table-layout:fixed;/* 单元格的宽度由设定宽度决定，不随内容多少而发生改变 */

border-collapse:collapse;

}

.table-row{

display:table-row;

}

.table-cell{

box-sizing:border-box;

display:table-cell;

position:relative;

border:1pxsolidrgba(108,108,35,.4);

vertical-align:middle;

}

/* hover - 文字效果 */

.table-cell:hover{

color:rgba(247,70,26,0.8);

}

/* hover - 边框效果 */

.table-cell:hover::after{

content:'';

position:absolute;

top:-1px;

left:-1px;

width:99px;

height:99px;

border:1pxsolidrgba(247,70,26,0.8);

}

优点：良好的兼容性（如下图）

不足：设置border-collapse之后，display:table的元素会在垂直方向和水平方向多出来一个边框的宽度（待优化）