打开CSS世界的大门


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

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

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

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

      二、实战

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

查看页面字体和图片的方式 还是使用开发者工具的Network 来看imagefont
查看页面字体.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保持一颗敬畏的心~

加油 ~~ 骚年 ~~


文章作者: 吴少林
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 吴少林 !
 上一篇
阮一峰JS入门的强制转换部分 阮一峰JS入门的强制转换部分
神奇的传送门 书籍 1. 简介、基本语法基本没啥问题,和以前的认知相同2. 强制转换 知识主要指使用Number、String和Boolean三个构造函数,手动将各种类型的值,转换成数字、字符串或者布尔值。 2.1 Number()
2017-12-20
下一篇 
HTML重点学习 HTML重点学习
通过重点标签的学习前进 一、 iframe 的学习iframe通俗的的理解就是,可以在页面里面嵌套新的页面它的使用会使页面变卡,一般会有一个固定的尺寸,默认的。他也属于可替换元素行列。我们可以通过CSS来改变尺寸frameborder消除边
2017-12-14
  目录