为了账号安全,请及时绑定邮箱和手机立即绑定

本节CSS代码全注释

如题,写在回答里,请指正

正在回答

7 回答

马克加索尔

0 回复 有任何疑惑可以回复我~

先馬克,後續再理解

0 回复 有任何疑惑可以回复我~

/* 文字大小、行高、字体 */   font: 24px/30px bold 'microsoft yahei';

font简写中至少包含size和family,且放在最后,顺序不可变。其他的属性顺序随意、可添可不添,

font: bold 24px/30px  'microsoft yahei';

0 回复 有任何疑惑可以回复我~

原文里before和after前都是一个“:”,你这2个冒号有什么区别么?还是2个冒号兼容性好一点?

0 回复 有任何疑惑可以回复我~
#1

慕粉4002810

2个冒号是伪元素ccs3的标准写法,但是旧版浏览器不识别2个冒号,为了兼容,一般写1个冒号比较多
2016-10-04 回复 有任何疑惑可以回复我~

33.3*3=99.9  剩下的0.1 怎么办

0 回复 有任何疑惑可以回复我~

补充一条

/* 设置根元素的高度为100%,外边距为0,占据整个浏览器窗口 */
/* 为天使开辟一块天地,天使想要飞起来,是需要空间的,而默认的根元素的高度是0,没有空间天使是飞不起来的,*/
html, body { height: 100%; margin: 0; }


10 回复 有任何疑惑可以回复我~

同时用了正常的解释和老师的天使爆裂理论

    .page {
        /* 包裹层div .page 脱离文档流,悬浮起来,准备扩张。第一个天使飞天,准备爆裂 */
        position: absolute;
        /* 设置包裹层div的扩张范围,此处意思是设置为全屏范围。大招全开,天使全屏爆裂 */
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    
    .list {
        /* 每个格子都左浮动 */
        float: left;
        /* 每个格子的宽高 */
        height: 33.3%;
        width: 33.3%;
        /* 将.list::before 中设置的遮罩层和 .list::after 中设置的内容层的扩张范围,限制为,仅限于.list 这个div中 */
        position: relative;
    }
    
    .list::before {
        /* 在每个格子前设置一个内容为空的元素,这里就是每个格子的遮罩层,用来覆盖每一个格子,此为第二个天使*/
        content: '';
        /* 遮罩层脱离文档流,悬浮起来,准备扩张。第二个天使飞天,准备爆裂 */
        position: absolute;
        /* 遮罩层的扩张范围,不再是填满容器了,而是距离格子所在的容器 div .list 上下左右各10px*/
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        /* 圆角边框 */
        border-radius: 10px;
        /* 背景色 */
        background-color: #cad5eb;
    }
    
    .list::after {
        /* 在每个格子后设置一个内容为 attr(data-index) 的元素,这个是格子的内容层,用来显示 div 属性中 data-index 的值。此为第三个天使 */
        content: attr(data-index);
        /* 格子的内容层悬浮起来,准备扩张。第三个天使飞天,准备爆裂 */
        position: absolute;
        /* 内容层的高度 */
        height: 30px;
        /* 内容层的扩张范围,填满格子所在的容器 div .list */
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        /* 配合 height: 30px 和 font: 24px/30px bold; 内容层的高度等于文字行高,实现文字垂直居中 */
        margin: auto;
        /* 文字水平居中 */
        text-align: center;
        /* 文字大小、行高、字体 */
        font: 24px/30px bold 'microsoft yahei';
    }


20 回复 有任何疑惑可以回复我~
#1

SWMcalin

多谢了老铁
2018-01-01 回复 有任何疑惑可以回复我~
#2

走馬勿观花

最下面那行: font: bold 24px/30px 'microsoft yahei'; bold 加粗,不能卡在 font-size/line-height font-family之间
2020-03-14 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

本节CSS代码全注释

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信