盒子
盒子
文章目录
  1. 一、CSS(Cascading Style Sheets)是个啥?
  2. 二、实战
    1. 第一次见脱离文档流
    2. 内联元素无法规定宽和高
    3. CSS position的探讨
    4. 由此引出 脱离文档流第二种方法
    5. box-sizing元素的作用
    6. 用CSS画个三角形出来
    7. 在这个过程中发现两点好玩的
    8. 综上所述,CSS不能按照惯性思维去随手就写,不能想当然啊。
    9. 加油 ~~ 骚年 ~~

打开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)
  • 第一次见脱离文档流

    1
    2
    3
    4
    5
    6
    7
    .topNavBar{
    padding: 15px 0px 15px 0px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    }

padding: 15px 16px 15px 16px这串代码等同于下列代码

1
2
3
4
padding-top: 15px;
padding-bottom: 15px;
padding-left: 16px;
padding-right: 16px;

顺序是从上开始顺时针取值,上 右 下 左
position: fixed; 这是核心代码,让你的topNavBar导航栏固定在顶部,而且不占body的高度。

  • 如何做横向布局呢?
    原则 在子类元素的CSS规定 float:left,父类元素必须有一个class=”clearfix”
    下面是经典的消除横向布局的bug的代码,要记住。
    1
    2
    3
    4
    5
    .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
  • 而且还会有空格的影响
1
2
<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属性是可以继承的
    1
    2
    3
    4
    a{
    color: inherit;
    text-decoration: none;
    }

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

1
display: inline-block;

  • line-height很难,看了专栏,也没懂,大约知道,字体有个基线baseline,上部下部还有高度,所以给字体有个建议行高。
    默认值是normal,值浏览器规定约为1.2,但是还根据font-family。那么我们就认为你说line-height默认值是1.2错了。
    line-height 的值是多少像素,那么 span 所占的高度就是多少 先记住吧。
    举个例子 我需要一个 div 高度为 30px,div 里有一行字垂直居中,字的大小为 14px,应该怎么写 CSS?
    答案:两种写法。
    1
    2
    3
    4
    5
    div {
    font-size: 14px;
    line-height: 20px;
    padding: 5px 0px;
    }
1
2
3
4
div {
font-size: 14px;
line-height: 30px;
}
  • CSS position的探讨

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

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

      1
      2
      position: relative;//父级元素加上这句
      position: absolute;//子类加上这句话

例子如下 relative和absolute的例子

1
2
3
4
5
6
7
8
9
10
<div class="a">
<div class="b">
<div class="c"></div>
</div>
</div>
<div class="d">
<div class="e">
<div class="f"></div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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
      有用的代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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
1
<script src="//at.alicdn.com/t/font_511143_hb7eteggodj6pqfr.js"></script>

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

1
2
3
4
5
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-github"></use>
</svg>
</a>

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

1
2
3
4
5
6
.userCard svg {
width: 30px;
height: 30px;
fill: white;
vertical-align: top;
}

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

加油 ~~ 骚年 ~~