7回答

• 

  南宁吴彦祖

  2016-12-24 15:27:43

  马克加索尔

  0 0
• 

  慕粉4166556

  2016-12-21 20:35:29

  先馬克，後續再理解

  0 0
• 

  wang_hao__

  2016-10-14 16:57:28

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

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

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

  0 0
• 

  Zzzzzzzzjy

  2016-09-09 14:30:53

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

  1 0

  慕粉4002...

  2个冒号是伪元素ccs3的标准写法,但是旧版浏览器不识别2个冒号，为了兼容，一般写1个冒号比较多

  2016-10-04 16:44:35

  共 1 条回复 >

• 

  qq_嘟嘟_3

  2016-08-30 09:41:12

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

  0 0
• 

  Nehpets

  2016-07-30 03:21:59

  补充一条

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

  
  

  0 10
• 

  Nehpets

  2016-07-30 02:53:35

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

      .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';
      }

  
  

  2 20

  走馬勿观花

  最下面那行： font: bold 24px/30px 'microsoft yahei'; bold 加粗，不能卡在 font-size/line-height font-family之间

  2020-03-14 11:43:49

  共 2 条回复 >