WuShaolin

悟已往之不谏，知来者之可追！

0%

打开CSS世界的大门

发表于 更新于 分类于

这只是一篇让我重新认识CSS的文章，写这篇文章的时候还未搞明白原理，只知其然，不知其所以然。我的这篇文章的小demo让我信心倍增。

一、CSS(Cascading Style Sheets)是个啥？

惯例是先了解了解历史，请点击这俩链接。

  • 中文百科 英文百科
  • CSS从2.1流行，现在主流的是CSS 3，还有更简练、功能更强的LESS、SASS
    好了，历史了解完了，你肯定还是啥也不会，因为我曾经学了都还是啥也不会。
    所以 这个系列的原则就是 先做出来，做多了，有感觉了才有资格喷人
  • 学习资源
    • CSS-Tricks 你就模仿吧，全是你想不到的
    • Codrops 我长这么大，可能这是第一次知道原来能把网页显示的这么漂亮，难道你不心动吗？
      你可以看模拟选座，各种进度条的显示
    • 张鑫旭 是真的牛
    • 阮一峰，你就看吧

      二、实战

  • 各种工具
名称 作用
取色器 你猜这能是干啥的
QQ截图功能 既可以量尺错也可以取色，取色后按住 ctrl 可以看到16进制的色
word 查看字体

查看页面字体和图片的方式 还是使用开发者工具的Network 来看image和font
查看页面字体.png

  • CSS引用的四种方式
名字 代码
style 标签 在head里面写上<style> </style> 标签里面就可以写css代码了
在每个标签的style属性里面直接写 <div style=""> </div>
外部引入 在head里面写上 <link rel="stylesheet" href="./style.css ">
css import 在你的css文件开头写上@import url(./b.css)
- #### 第一次见脱离文档流
```
.topNavBar{
padding: 15px 0px 15px 0px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
```
padding: 15px 16px 15px 16px这串代码等同于下列代码
```
padding-top: 15px;
padding-bottom: 15px;
padding-left: 16px;
padding-right: 16px;
```
顺序是从上开始顺时针取值，上 右 下 左
position: fixed; 这是核心代码，让你的topNavBar导航栏固定在顶部，而且不占body的高度。
  • 如何做横向布局呢？
    原则 在子类元素的CSS规定 float:left,父类元素必须有一个class=”clearfix”
    下面是经典的消除横向布局的bug的代码，要记住。
    .clearfix::after{
  content: '';
  display: block;
  clear: both;
}

用一个计算题来验证一下，topNavBar真的脱离了文档流

  • 先看未脱离文档流的时候topNavBar的原始尺寸
    top.png
    高度是69.59，图片里面的计算写错了
    topNavBar没有脱离文档流的样子.png
    没脱离文档流的时候body的高度是1325.09
    top没有脱离时的body的高度.png
    那么脱离之后，body的高度必然是1325.09-69.59=1255.5
    接下来就是见证奇迹的时刻
    top脱离后的高度.png
    果然是1255.5,脱离成功！！！
  • 此时也应该明白文档流的含义了，块级元素display: block(一下占一行，后面有空也不给你用)从上到下流动，内联元素display: inline（不换行，占满为止）从左往右流动。
  • 块级元素示例
    块级元素就不给你用.png
  • 内联元素示例
    span流截断.png
  • 注意英文单词一个大整体，打断的话修改word-block属性
  • 请各部门注意：插播一条内联元素的特点呢

  • 内联元素无法规定宽和高

  • margin的上右下左可以设置
    不信你看图，有图有真相，还附带链接
    inline元素设置宽高无效.png
  • 而且还会有空格的影响
    <span>1</span>
    <span>2</span>

1、2之间必然出现空格的。
直观点我们可以看图
a标签修改display后之间的空隙是因为有回车.png

  • 明白了文档流（其实还是不明白，后续要继续研究），那么高度是由什么决定的，也差不多了
    是由其内部的文档流的高度总和决定的。比如div没有内容，那么高度为零。
    后期要深入了解 合并的一些知识，目前没搞懂 ？？？？
  • 在这也明白了，display可以改变内联还是块级，比如把span的display改为block他就是div了。
  • 盒模型
    内部是element,外面是padding、border，这是通常F12检查元素的尺寸的来源。再往外就是margin。目前就了解这些。
  • a标签的默认样式
    如果你不继承的的话，默认会有一个蓝色带下划线的模样，那是浏览器默认的。
    text-decoration属性可以去掉他的下划线。
    a标签的默认样式.png
    color属性是可以继承的
    a{
  color: inherit;
  text-decoration: none;
}

注意：小技巧
有时候如果我们发现a标签包裹不了内部的元素可以采用以下方法

display: inline-block;
  • line-height很难，看了专栏，也没懂，大约知道，字体有个基线baseline，上部下部还有高度，所以给字体有个建议行高。
    默认值是normal,值浏览器规定约为1.2,但是还根据font-family。那么我们就认为你说line-height默认值是1.2错了。

line-height 的值是多少像素，那么 span 所占的高度就是多少 先记住吧。
举个例子 我需要一个 div 高度为 30px，div 里有一行字垂直居中，字的大小为 14px，应该怎么写 CSS?
答案：两种写法。

div {
  font-size: 14px;
  line-height: 20px;
  padding: 5px 0px;
}
div {
  font-size: 14px;
  line-height: 30px;
}

  • CSS position的探讨

    MDN的解释是 CSS属性position用于指定一个元素在文档中的定位方式。top right bottom left属性则决定了该元素的最终位置。
    默认值是static
    • 1、可以取那些值
      static relative absolute fixed sticky

      由此引出 脱离文档流第二种方法

      position: relative;//父级元素加上这句
position: absolute;//子类加上这句话
      例子如下 relative和absolute的例子
<div class="a">
  <div class="b">
    <div class="c"></div>
  </div>
</div>
<div class="d">
    <div class="e">
      <div class="f"></div>
    </div>
</div>
.a,.d{
  width: 200px;
  height: 200px;
  background: red;
  padding:20px;
}
.b,.e{
  width: 150px;
  height: 150px;
  background: yellow;
}
.c,.f{
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  left: 15px;
}

.a,.e{
  position: relative;
}

position.png
相互对应，而没有对应错是因为，被不同的大div包裹住了。

  • width height属性指明了最内部的内容区的宽、高。
    width的默认值是auto
    具体理解看图
    width.png
    max-width会覆盖width的值，mix-width又会覆盖max-width的值，初始值是none。
    max-width用以限制width的最大宽度。

  • box-sizing元素的作用

两种盒子模型 作用
传统的盒子模型content-box 详见下面的解释
新型的盒子模型border-box 详见下面的解释
box-sizing属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。
- 原始的盒子模型content-box存在弊端，当你规定了width height之后，浏览器显示的宽度是你写的width+padding × 2+border×2的宽度，已经不是你想要的宽度，如果你想显示的就是你想要的宽度，你就要在你的想要的宽度上减去（padding×2 + boder×2）的宽度，这个值才是你要规定的width。很麻烦吧。
你如果上面的分析没看懂，就看这个

比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

  • border-box告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

    • 用CSS画个三角形出来

      画各种shape的好去处 CSS-Tricks shapes ，可以画出一个太极图
    • 其实还是理解的盒子模型，灵活运用boder
      有用的代码如下
.span{
  display: block;
  width: 0px;
  height: 0px;
  border: 30px solid red;
  /* border-top-color: blue; */
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: black;
  border-top-width: 0px; 
}

//到最后，其实就是这么几句话
  display: block;
  width: 0px;
  height: 0px;
  border: 30px solid transpatent;
  border-left-color: black;
  border-top-width: 0px;

在这个过程中发现两点好玩的

  • width: 0px和不写是完全不同的，我总被习惯所误导，详见下图
    1、你要是width: 0px height: 0px，是下面这样式的，是正确的~
    width为0和不写的区别.png
    2、但是你要是不写的话，这世界立马就变了
    width为0和不写的区别很大.png
  • border-top-width的真实含义，对比图
    1.png
    2.png
    可以知道border-top-width具体是哪块了

    综上所述，CSS不能按照惯性思维去随手就写，不能想当然啊。

  • 图标的引用 阿里SVG矢量图库
    1、先把图标添加到购物车里面，再添加到项目里面
    然后按照下面的图片来操作
    Iconfont的使用.png
 <script src="//at.alicdn.com/t/font_511143_hb7eteggodj6pqfr.js"></script>

2、再打开使用帮助
icon.png

<a href="#">
    <svg class="icon" aria-hidden="true">
       <use xlink:href="#icon-github"></use>
    </svg>
</a>

svg的不同属性注意一下 fill颜色属性

.userCard svg {
    width: 30px;
    height: 30px;
    fill: white;
    vertical-align: top;
}

CSS还没有深入，但是有句话我觉得该记下来，要对CSS保持一颗敬畏的心~

加油 ~ 骚年 ~