写点什么

阅读 Skeleton.css 源码,改善睡眠质量(尽管它只有 419 行代码)

作者:德育处主任
  • 2022 年 6 月 30 日
  • 本文字数:11817 字

    阅读完需:约 39 分钟

阅读Skeleton.css源码,改善睡眠质量(尽管它只有419行代码)

本文介绍

点赞就等于学会了!


如果本文对您有帮助,建议点赞收藏(点赞就等于学会了)


Skeleton 源码一共只有 419 行(加上注释和换行),非常适合用来学习。


本文是根据我的学习过程来编写的,几乎每个章节都包含 使用方法源码分析


虽然现在大部分业务都不需要重复造轮子了,但对于小白来说,学习完 Skeleton 源码 是能走出新手村的。


本文不是推荐大家使用 Skeleton.css ,因为现代工程其实已经用不上这个库了。本文的重点在 响应式布局源码的解读


本文适合人群:


  • css 基础的(了解浮动、颜色、背景色等);

  • 有一定工作经验,但又没了解过 css 库是如何生成的;

Skeleton 介绍

如果您正在着手一个较小的项目,或者觉得不太需要用到大型框架,那么可以尝试使用 Skeleton。

Skeleton 仅对少数标准 HTML 元素设置了样式,并提供了一个网格系统。


『Skeleton.css 官网』


『github 地址』


也可以直接滑到文末获取 Skeleton 源码

读 css 方面的源码,为什么要选 Skeleton ?

  • Bootstrap:太长,不看!

  • Layui:太长,不看!

  • Element ui:和框架绑定的,不适合小白看~

  • Animate.css:动画库,下次再看。

  • ……

  • Skeleton:短!

功能目录

出发!!!

本文所有例子都使用 CDN 的方式引入 skeleton.css ,默认已经引入了,所以在案例中不会再出现引入的代码。


<link href="https://cdn.bootcdn.net/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet">
复制代码

网格系统 Grid<a name="Grid"></a>

Skeleton 提供了 12 列 的网格布局模式,和现代 UI 库的 24 列相比,12 列的确有点少了。但这并不影响我们学习。


Skeleton 支持 指定值布局比例布局,这两个名字是我自己起的,官方没这样说。


其实这两种布局方式都是大同小异的,只不过语义上有点不同而已。

使用方法

指定值布局

通过使用 1~12 的单词配合 .columns 类名 进行布局。


.one.two.three.four.five.six.seven.eight.nine.ten.eleven.twelve


Skeleton.css 提供了 12 列的响应式网格布局,随着浏览器/设备尺寸的减小而缩小。


当浏览器窗口小于 550px 时,所有列都会占满整行。



<div class="container">  <div class="row">    <div class="one column">One</div>    <div class="eleven columns">Eleven</div>  </div>
<div class="row"> <div class="two columns">Two</div> <div class="ten columns">Ten</div> </div>
<div class="row"> <div class="three columns">Three</div> <div class="nine columns">Nine</div> </div>
<div class="row"> <div class="four columns">Fout</div> <div class="eight columns">Eight</div> </div>
<div class="row"> <div class="five columns">Five</div> <div class="seven columns">Seven</div> </div>
<div class="row"> <div class="six columns">Six</div> <div class="six columns">Six</div> </div>
<div class="row"> <div class="twelve columns">Twelve</div> </div></div>

<style> .row .column, .row .columns { margin-bottom: 10px; background: #eee; }</style>
复制代码


本例使用了 .container 作为容器,限制了最大宽度是 980px ,并且水平居中。


因为布局容器是不提供背景和外边距等样式,所以本例写了一个背景色给 .columns 以便观察。


.row 这个其实不需要加的,本例添加这个类只是希望代码看起来能更加易读。

比例布局

提供了 3 个类名,需要配合 .column 使用。


  • .one-third:三分之一

  • .two-thirds:三分之二

  • .one-half:一半


<div class="container">  <div class="row">    <div class="one-third column">1/3</div>    <div class="two-thirds column">2/3</div>  </div>
<div class="row"> <div class="one-half column">1/2</div> <div class="one-half column">1/2</div> </div></div>
<style> .row .column, .row .columns { margin-bottom: 10px; background: #eee; }</style>
复制代码
列偏移


<div class="container">  <div class="row">    <div class="offset-by-eleven one columns">One</div>  </div>
<div class="row"> <div class="offset-by-ten two columns">Two</div> </div>
<div class="row"> <div class="offset-by-nine three columns">Three</div> </div>
<div class="row"> <div class="offset-by-eight four columns">Fout</div> </div>
<div class="row"> <div class="offset-by-seven five columns">Five</div> </div>
<div class="row"> <div class="offset-by-six six columns">Six</div> </div> <div class="row"> <div class="offset-by-five seven columns">Seven</div> </div>
<div class="row"> <div class="offset-by-four eight columns">Eight</div> </div>
<div class="row"> <div class="offset-by-three nine columns">Nine</div> </div>
<div class="row"> <div class="offset-by-two ten columns">Ten</div> </div>
<div class="row"> <div class="offset-by-one eleven columns">Eleven</div> </div>
<div class="row"> <div class="offset-by-two-thirds one-third column">1/3</div> </div>
<div class="row"> <div class="offset-by-one-third two-thirds column">2/3</div> </div>
<div class="row"> <div class="offset-by-one-half one-half column">1/2</div> </div></div>
<style> .container { border: 1px solid #ccc; } .row .column, .row .columns { margin-bottom: 10px; background: #eee; }</style>
复制代码

源码分析

布局其实分了几个部分:


  1. 容器部分

  2. 列(确定值)

  3. 列(百分比)

  4. 列间距

  5. 列偏移

容器部分
.container {  position: relative;  /* 相对定位 */  width: 100%;  /* 容器宽度100% */  max-width: 960px;  /* 但最大宽度不超过980px */  margin: 0 auto;  /* 水平居中 */  padding: 0 20px;  /* 容器左右内边距20px */  box-sizing: border-box; /* 设置容器盒模型,设置了容器的边框、内边距都不会超过容器宽度 */}
/* 当容器不小于400px时 */@media (min-width: 400px) { .container { width: 85%; /* 宽度为85% */ padding: 0; /* 内边距为0 */ }}
/* 当容器不小于550px时 */@media (min-width: 550px) { .container { width: 80%; /* 宽度80,同时padding受到 @media (min-width: 400px) 里设置的影响 */ }}
.container:after { content: ""; display: table; clear: both; /* 清除浮动 */}
复制代码


容器使用了 container 这个类名,可以看出 skeleton 是先写了小屏的解决方案,然后再写大屏的。


  • 默认情况下(文档宽度小于 400px),container 容器的宽度是 100%,最大宽度是 980px ,通过 margin: 0 auto; 实现了水平居中效果。

  • 当文档宽度大于等于 400px 时,容器宽度变成 85%,但也会被最大宽度(980px)限制,同时内边距设为 0

  • 当文档宽度大于等于 550px 时,容器宽度变成 80%,会覆盖 @media (min-width: 400px) 里设置的宽度,但会受到 @media (min-width: 400px) 里设置的 padding 影响。

  • 最后设置了一个伪元素 :after 清除浮动(clear: both;)。

列布局(响应式的开始)

Skeleton.css 使用 浮动 + 百分比 的方式实现响应式。


列(确定值 )、**列(百分比)**和 列间距 这三个要放在一起讲。


skeleton 一共有 12 列布局,所以配置了基本的:one、two、three、four、five、six、seven、eight、nine、ten、eleven、twelve。


都是基础的数字英文,我就不翻译了。


这里要分 2 种情况来讨论,


  1. 能整除 12 的(one、two、three、four、six、twelve)

  2. 不能整除 12 的(five、seven、eight、nine、then、eleven)


接下来会分开讨论这两种情况。


.column,.columns {  width: 100%;  /* 所有列的宽度都是100%。 */  float: left;  /* 左浮动 */  box-sizing: border-box;  /* 设置容器盒模型,设置了容器的边框、内边距都不会超过容器宽度 */}
@media (min-width: 550px) { .column, .columns { margin-left: 4%; /* 左边距4% */ } .column:first-child, .columns:first-child { margin-left: 0; /* 第一个元素不需要左边距,所以设为0 */ }
.one.column, .one.columns { width: 4.66666666667%; } .two.columns { width: 13.3333333333%; } .three.columns { width: 22%; } .four.columns { width: 30.6666666667%; } .five.columns { width: 39.3333333333%; } .six.columns { width: 48%; } .seven.columns { width: 56.6666666667%; } .eight.columns { width: 65.3333333333%; } .nine.columns { width: 74.0%; } .ten.columns { width: 82.6666666667%; } .eleven.columns { width: 91.3333333333%; } .twelve.columns { width: 100%; margin-left: 0; } /* 只有一列,不需要左边距了 */
/* 1/3,对应 .four */ .one-third.column { width: 30.6666666667%; } /* 2/3,对应 .eight */ .two-thirds.column { width: 65.3333333333%; }
/* 1/2,对应 .six */ .one-half.column { width: 48%; }}
复制代码


  • 默认情况下(文档宽度小于 550px)所有列的宽度都是 100%

  • 除了第一列,后面跟着的列都有一个 4%的左边距


能整除 12 的


.one.two.three.four.six.twelve


布局方式如下图所示(本文只详细讲 .one.two 两种列,其他的原理都是一样的,自己推算就行了)



从上图可以看出,都使用 .one 的话,一共有 12 列11 个间隔 ,一行的宽度是 100% ,每个间隔的占比是 4% ,11 个间隔一共就花掉了 44% ,剩下 56% 给 12 列平均分。


所以 .one 的宽度就是 56 ÷ 12 ≈ 4.66666666667 ,单位是 %



都用.two 的话,从上图可以看出一共有 6 列5 个间隔 ,每个间隔的宽度是 4%,5 个间隔合计占用 20% 的宽度,剩下 80% 的宽度给 6 列平均分。


**所以 .two 的宽度就是 80 ÷ 6 ≈ 13.3333333333 ,单位是 % **


剩下的我就直接写公式了,不懂的可以在评论区讨论~


公式:(100% - 间隔数量 × 4%) ÷ 列的数量


  • .one:(100% - 4% × 11) ÷ 12 ≈ 4.66666666667%

  • .two:(100% - 4% × 5) ÷ 6 ≈ 13.3333333333%

  • .three:(100% - 4% × 3) ÷ 4 = 22%

  • .four:(100% - 4% × 2 ) ÷ 3 ≈ 30.6666666667%

  • .six:(100% - 4% × 1) ÷ 2 = 48%

  • .twelve:就是 100%咯,而且不需要左边距


不能整除 12 的


.five.seven.eight.nine.then.eleven


首先看 .five ,代表 5,12 - 5 = 7,但现在 .five.seven 的值是多少我们都不知道,虽然可以按 5:7 再加一个 间隔(4%) 来计算,但我更愿意使用已知的值来推算。


.two + .five + .five 三列加起来刚好是 12 ,而 .two 的值我们是知道的,由此可以得到一个代数式:


13.3333333333% + 间隔 + .five + 间隔 + .five = 100%


间隔 的占比是 4% 所以得到下面的代数式


13.3333333333% + 4% + .five + 4% + .five = 100%

21.3333333333% + 2(.five) = 100%

2(.five) = 78.6666666667%

.five ≈ 39.3333333333%


根据上面的小学生推导法,得知一个 .five39.3333333333%


.seven


刚刚有讲到,5 + 7 = 12,那现在 5 出来了,7 也就通过加减法能算出来


.five + 间隔 + .seven = 100%

39.3333333333% + 4% + .seven = 100%

.seven = 100% - 39.3333333333% - 4%

.seven = 56.6666666667%


综上所述,.seven 的宽度是 56.6666666667%


这是我的推导方式,最后的值也和 skeleton 的值一样。.eight.nine.then.eleven 的推导方式其实也和上面一样,这里我就不再啰嗦了。有疑问的可以在评论区交流。


最后得出


  • .five:39.3333333333%

  • .seven:56.6666666667%

  • .eight:65.3333333333%

  • .nine:74.0%

  • .ten:82.6666666667%

  • .eleven:91.3333333333%


比例


  • .one-third:三分之一。对应 .four

  • .two-thirds:三分之二。对应 .eight

  • .one-half:一半。对应.six

列偏移

列偏移的类名都是 .offset-by- 开头的,后面再加上对应的数字或者比例的单词。


@media (min-width: 550px) {  .offset-by-one.column,  .offset-by-one.columns          { margin-left: 8.66666666667%; }  .offset-by-two.column,  .offset-by-two.columns          { margin-left: 17.3333333333%; }  .offset-by-three.column,  .offset-by-three.columns        { margin-left: 26%;            }  .offset-by-four.column,  .offset-by-four.columns         { margin-left: 34.6666666667%; }  .offset-by-five.column,  .offset-by-five.columns         { margin-left: 43.3333333333%; }  .offset-by-six.column,  .offset-by-six.columns          { margin-left: 52%;            }  .offset-by-seven.column,  .offset-by-seven.columns        { margin-left: 60.6666666667%; }  .offset-by-eight.column,  .offset-by-eight.columns        { margin-left: 69.3333333333%; }  .offset-by-nine.column,  .offset-by-nine.columns         { margin-left: 78.0%;          }  .offset-by-ten.column,  .offset-by-ten.columns          { margin-left: 86.6666666667%; }  .offset-by-eleven.column,  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
.offset-by-one-third.column, .offset-by-one-third.columns { margin-left: 34.6666666667%; } .offset-by-two-thirds.column, .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column, .offset-by-one-half.columns { margin-left: 52%; }}
复制代码


如果用 .offset-by-one ,那我们就需要假设后面的内容补充完是 12


1 + 11 = 12,我们通过上面的计算得知 .eleven 的宽度是 91.3333333333%,所以 .offset-by-one 的占比是:


.offset-by-one = 100% - .eleven

.offset-by-one = 8.66666666667%


其他的 .offset-by-two.offset-by-three 那些也可以用同样的方法去计算。最后再和 skeleton 的值对比一下就行了。

基础样式 Base Styles<a name="BaseStyles"></a>

这部分主要定义了全局字体行距的样式,作用在 htmlbody 标签上。

使用方法



<div>雷猴</div>
复制代码

源码分析

看看这部分的源码:


html {  font-size: 62.5%;  /* 16px × 62.5% = 10px */}
body { font-size: 1.5em; /* 10px × 1.5 = 15px */ line-height: 1.6; /* 15px * 1.6 = 24px */ font-weight: 400; /* 字体粗细 */ font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; /* 字体 */ color: #222; /* 文本颜色 */}
复制代码


浏览器的默认字号是 16px ,在 html 设置字号是 62.5%,那就是变成 10px 了。


body 设置 font-size: 1.5em; ,那么之后的内容默认都会继承 body 的,也就是普通的文本是 15px


最后再设置 行高字体粗细字体文本颜色

排版 Typography<a name="Typography"></a>

不需要使用特别的类名,这部分作用在 h1 ~ h6 标签中。使用了 rem 的方式设置字体大小,会受到 <html> 标签字体大小影响。

使用方法



<h1>Heading</h1><h2>Heading</h2><h3>Heading</h3><h4>Heading</h4><h5>Heading</h5><h6>Heading</h6>
<p>The base type is 15px over 1.6 line height (24px)</p>
复制代码

源码分析

h1, h2, h3, h4, h5, h6 {  margin-top: 0;  margin-bottom: 2rem;  font-weight: 300; }h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
/* Larger than phablet */@media (min-width: 550px) { h1 { font-size: 5.0rem; } h2 { font-size: 4.2rem; } h3 { font-size: 3.6rem; } h4 { font-size: 3.0rem; } h5 { font-size: 2.4rem; } h6 { font-size: 1.5rem; }}
p { margin-top: 0; }
复制代码


这段源码其实没什么好解释的了,主要设置了 h1 ~ h6外边距字号文字粗细行高字距,并且用 媒体查询 来重新定义不同尺寸的浏览器宽度显示出来的标题 字号 不同。


最后定义了段落 p 的上边距,这里的 p 的字号默认继承 body 里的设置,也就是 15px

链接 Links<a name="Links"></a>

使用方法



<a>Colored</a>
复制代码

源码分析

a {  color: #1EAEDB; }a:hover {  color: #0FA0CE; }
复制代码


这里只定义了 a 的字体颜色,还有鼠标经过时的颜色。字号默认继承 body ,也就是 15px




按钮 Buttons<a name="Buttons"></a>

使用方法


<!-- 默认 --><a class="button" href="#">Anchor button</a><button>Button element</button><input type="submit" value="submit input"><input type="button" value="button input">
<!-- primary类型 --><a class="button button-primary" href="#">Anchor button</a><button class="button-primary">Button element</button><input class="button-primary" type="submit" value="submit input"><input class="button-primary" type="button" value="button input">
复制代码

源码分析

/* 默认样式 */.button,button,input[type="submit"],input[type="reset"],input[type="button"] {  display: inline-block;  /* 行内块 */  height: 38px;  /* 高度 */  padding: 0 30px;  /* 内边距:上下0,左右30px */  color: #555;  /* 字体颜色:灰色(有点深) */  text-align: center;  /* 本文居中 */  font-size: 11px;  /* 字号 */  font-weight: 600;  /* 字体稍微加粗 */  line-height: 38px;  /* 行高(和height一样,所以是垂直居中了) */  letter-spacing: .1rem;  /* 字距 */  text-transform: uppercase;  /* 字母变成全大写 */  text-decoration: none;  /* 不需要文本修饰 */  white-space: nowrap;  /* 不换行 */  background-color: transparent;  /* 背景色:透明 */  border-radius: 4px;  /* 圆角:4px */  border: 1px solid #bbb;  /* 边框:1px,实线,浅灰 */  cursor: pointer;  /* 鼠标指针样式 */  box-sizing: border-box;  /* 盒模型规则 */}
/* 鼠标经过、获得焦点 */.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus { color: #333; /* 文字颜色比默认深一点点 */ border-color: #888; /* 边框颜色比默认深一点点 */ outline: 0; /* 轮廓:0 */}
/* primary类型 */.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary { color: #FFF; /* 字变白 */ background-color: #33C3F0; /* 背景色变蓝 */ border-color: #33C3F0; /* 边框颜色变蓝 */}
/* 使用primary类型时:鼠标经过、获得焦点 */.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus { color: #FFF; /* 文本白色 */ background-color: #1EAEDB; /* 背景色变深一点点 */ border-color: #1EAEDB; /* 边框颜色变深一点点 */}
复制代码


按钮的实现方式有很多种,比如 <button><input type="submit" /> 等等,这里就不一一列举额了,skeleton 把这类情况都写好了,可以直接在源码中看到。


skeleton 提供了 2 中样式的按钮,一个是默认的(白底黑字),一个是 primary 的(蓝底白字)。


还有一些选中状态。


skeleton 的做法是先写好默认的,其他状态都在默认状态的基础上覆盖新的样式。

表单 Forms<a name="Forms"></a>

使用方法


<form>  <div class="row">    <div class="six columns">      <label for="exampleEmailInput">Your email</label>      <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">    </div>    <div class="six columns">      <label for="exampleRecipientInput">Reason for contacting</label>      <select class="u-full-width" id="exampleRecipientInput">        <option value="Option 1">Questions</option>        <option value="Option 2">Admiration</option>        <option value="Option 3">Can I get your number?</option>      </select>    </div>  </div>  <label for="exampleMessage">Message</label>  <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>  <label class="example-send-yourself-copy">    <input type="checkbox">    <span class="label-body">Send a copy to yourself</span>  </label>  <input class="button-primary" type="submit" value="Submit"></form>
复制代码

源码分析

/* 单行文本框、多行文本框、下来选择器 */input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select {  height: 38px;  /* 高度 */  padding: 6px 10px;  /* 内边距:上下6px,左右10px */  background-color: #fff;  /* 背景色:白色 */  border: 1px solid #D1D1D1;  /* 边框:1px,实线,灰色 */  border-radius: 4px;  /* 圆角:4px */  box-shadow: none;  /* 投影:无 */  box-sizing: border-box;  /* 盒模型 */}
/* 针对单行和多行文本框的样式设置 */input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* 外表 */}
/* 多行文本框 */textarea { min-height: 65px; /* 最小高度是65px,会覆盖上面设置的height */ padding-top: 6px; /* 上内边距 */ padding-bottom: 6px; /* 下内边距 */}
/* 单行文本框、多行文本框、下来选择器 获取焦点时 */input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus { border: 1px solid #33C3F0; /* 边框:1px,实线,蓝色 */ outline: 0; /* 轮廓:0 */}
/* label(标签) legend(组合表单中的相关元素,legend 元素为 fieldset 元素定义标题) */label,legend { display: block; /* 块状 */ margin-bottom: .5rem; /* 下外边距 */ font-weight: 600; /* 字体有点粗 */}
/* fieldset(可将表单内的相关元素分组) */fieldset { padding: 0; /* 内边距 */ border-width: 0; /* 边框宽度 */}
/* 多选和单选 */input[type="checkbox"],input[type="radio"] { display: inline; /* 行内 */}
/* label标签下的 .label-body,可看使用例子 */label > .label-body { display: inline-block; /* 行内 */ margin-left: .5rem; /* 左外边距:5px */ font-weight: normal; /* 字体粗细 */}
复制代码

列表 Lists<a name="Lists"></a>

使用方法


<ul>  <li>Item 1</li>  <li>    Item 2    <ul>      <li>Item 2.1</li>      <li>Item 2.2</li>    </ul>  </li>  <li>Item 3</li></ul>
<ol> <li>Item 1</li> <li> Item 2 <ol> <li>Item 2.1</li> <li>Item 2.2</li> </ol> </li> <li>Item 3</li></ol>
复制代码

源码分析

/* 无序列表 */ul {  list-style: circle inside;  /* 标记样式:圆,内侧 */}
/* 有序列表 */ol { list-style: decimal inside; /* 标记样式:十进制,内侧 */}
ol, ul { padding-left: 0; /* 左侧内边距:0 */ margin-top: 0; /* 左侧外边距:0 */}
/* 嵌套列表 */ul ul,ul ol,ol ol,ol ul { margin: 1.5rem 0 1.5rem 3rem; /* 外边距 */ font-size: 90%; /* 字号 */}
/* 列表项 */li { margin-bottom: 1rem; /* 下外边距 */}
复制代码

代码 Code<a name="Code"></a>

使用方法


<pre><code>.some-class {  background-color: red;}</code></pre>
复制代码

源码分析

code {  padding: .2rem .5rem;  /* 内边距 */  margin: 0 .2rem;  /* 外边距 */  font-size: 90%;  /* 字号 */  white-space: nowrap;  /* 不换行 */  background: #F1F1F1;  /* 背景色:超级浅的灰色 */  border: 1px solid #E1E1E1;  /* 边框:1px,实线,灰色 */  border-radius: 4px;  /* 圆角:4px */}
pre > code { display: block; /* 块状 */ padding: 1rem 1.5rem; /* 内边距 */ white-space: pre; /* 空白会被浏览器保留。 */}
复制代码


codepreHTML 原生标签。

表格 Tables<a name="Tables"></a>

使用方法


<table>  <thead>    <tr>      <th>Name</th>      <th>Age</th>      <th>Sex</th>      <th>Location</th>    </tr>  </thead>  <tbody>    <tr>      <td>Dave Gamache</td>      <td>26</td>      <td>Male</td>      <td>San Francisco</td>    </tr>    <tr>      <td>Dwayne Johnson</td>      <td>42</td>      <td>Male</td>      <td>Hayward</td>    </tr>  </tbody></table>
复制代码

源码分析

/* 表头的列 和 普通列 */th,td {  padding: 12px 15px;  /* 内边距 */  text-align: left;  /* 文本左对齐 */  border-bottom: 1px solid #E1E1E1;  /* 底边框 */}
/* 第一个表头的列 和 每行第一个普通列 */th:first-child,td:first-child { padding-left: 0; /* 左内边距 */}
/* 最后一个表头的列 和 每行最后一个普通列 */th:last-child,td:last-child { padding-right: 0; /* 右内边距 */}
复制代码


没想到表格的 css 样式这么简单吧哈哈哈哈~

间隔 Spacing<a name="Spacing"></a>

源码分析

button,.button {  margin-bottom: 1rem;}
input,textarea,select,fieldset { margin-bottom: 1.5rem;}
pre,blockquote,dl,figure,table,p,ul,ol,form { margin-bottom: 2.5rem;}
复制代码


这部分主要定义常用的标签和类的底部外边距,太简单,不一一细讲了。

工具集 Utilities<a name="Utilities"></a>

源码分析

.u-full-width {  width: 100%;  box-sizing: border-box;}
.u-max-full-width { max-width: 100%; box-sizing: border-box;}
.u-pull-right { float: right;}
.u-pull-left { float: left;}
复制代码


这部分源码太简单了,不讲了~


  • .u-full-width :宽度满屏

  • .u-max-full-width :最大宽度是满屏

  • .u-pull-right :右浮动

  • .u-pull-left :左浮动

分割线 Hr<a name="Hr"></a>

使用方法


<hr />
复制代码

源码分析

hr {  margin-top: 3rem;  margin-bottom: 3.5rem;  border-width: 0;  border-top: 1px solid #E1E1E1;}
复制代码


  • 上下设置了外边距

  • 清除掉所有 border

  • 最后再设置回顶部边框为 1px,实线,灰色

清除浮动 Clearing<a name="Clearing"></a>

源码分析

.container:after,.row:after,.u-cf {  content: "";  display: table;  clear: both;}
复制代码


容器 都设置了清楚浮动。


.u-cf 是专门清楚浮动的。


清楚浮动的做法在很多基础的 css 教程有讲,这里不再啰嗦了。

媒体查询 Media Queries<a name="MediaQueries"></a>

源码分析

@media (min-width: 400px) {}
@media (min-width: 550px) {}
@media (min-width: 750px) {}
@media (min-width: 1000px) {}
@media (min-width: 1200px) {}
复制代码


这部分的源码,是预留给开发者自己写的。


如果开发者需要自己重新定义某些元素的样式,根据不同的窗口宽度来定义,可以在此编写。

发布于: 刚刚阅读数: 3
用户头像

反派 2019.03.19 加入

用键盘绣花

评论

发布
暂无评论
阅读Skeleton.css源码,改善睡眠质量(尽管它只有419行代码)_CSS_德育处主任_InfoQ写作社区