开始学习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的高度。

• padding的值不能为负值！！！而margin可以设为负值，产生一些神奇的效果
  下面是MDN对padding-bottom的规范。由MDN原话 Unlike margins, negative values are not allowed for padding(和外边距（margin）不同，内边距（padding）是不允许有负值的。)可以推断，padding不能设为负值，而margin可以设为负值。

CSS属性 padding-bottom 是指一个元素在内边距区域（padding area）中下方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种CSS缩写属性。

• 如何做横向布局呢？
  原则 在子类元素的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属性
• 除了以上block和inline两种之外，还有一种display: inline-block
  若既想让元素在行内显示，又能设置宽高，可以设置：
  display: inline-block;
  inline-block 就是让元素对外呈内联元素，可以和其他元素共处与一行内；对内则让元素呈块级元素，可改变其宽高。

---

• 请各部门注意：插播一条内联元素的特点呢

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

为啥呢？
width的默认值是auto，块元素会继承包含块的宽度，而行内元素则会根据行内内容自适应宽度，所以行内元素设置width是没有效果的。

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

    <span>1</span>
    <span>2</span>

1、2之间必然出现空格的。
直观点我们可以看图

a标签修改display后之间的空隙是因为有回车.png

---

• 明白了文档流（其实还是不明白，后续要继续研究），那么高度是由什么决定的，也差不多了
  是由其内部的文档流的高度总和决定的。比如div没有内容，那么高度为零。
  后期要深入了解 合并的一些知识，目前没搞懂 ？？？？
• 在这也明白了，display可以改变内联还是块级，比如把span的display改为block他就是div了。
• 盒模型
  内部是content区,外面是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保持一颗敬畏的心~

加油 ~~ 骚年 ~~