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的元素会在垂直方向和水平方向多出来一个边框的宽度(待优化)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181024G1JTME00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券