12. CSS基础

12. CSS基础

CSS历史

CSS是谁发明的

李爵士的挪威同事赖先生首先提出CSS，Hakon Wium Lie

赖先生的生平

生平

1991年获得MIT媒体实验室视觉研究理学硕士学位

1994年提出CSS概念而闻名

1999年任Opera的CTO

2005年他写公开信给比尔盖茨问为什么IE不支持Web标准，盖茨说IE 7马上发布，他写了Acid2用来验证

2006年通过了博士论文答辩

2006年他倡议Web网页应使用通用字体格式

2007年他倡议浏览器可以支持video标签

观点

微软的IE常常成为他的批评对象

他也是Web打印概念的倡导者，用HTML和CSS写书。

CSS的牛X之处在哪儿？

层叠样式表

层叠指什么？

样式层叠

可以多次对同一选择器进行样式声明

选择器层叠

可以用不同选择器对同一个元素进行样式声明

文件层叠

可以用多个文件进行层叠

这些特性使得CSS极度灵活

这也为CSS后来被吐槽留了下隐患

CSS的版本

版本	时间	重点
CSS1	1996年	不用管
CSS2	1998年	添加定位，z-index，media，不用管
CSS2.1	2004～2011年	使用最广泛的版本（IE支持）
CSS3	1999年开始起草	现代版本，分模块（IE8部分支持）
CSS4*	分模块升级

我怎么知道哪些浏览器支持哪些特性呢？

方法一：几十种浏览器全部跑一遍

方法二：使用caniuse.com

caniuse.com使用方法

请收藏此网站

输入你关心的样式，比如border-radius或filter

查看大部分浏览器的支持情况

如果想看更多，点击Show All

下方会详细说明兼容bug有哪些（翻译成中文）

这个网站是怎么运作的？

网站主一开始自己测试了一部分浏览器

社区的前端工程师帮助测试各种各样的浏览器

UC浏览器和QQ浏览器主要是中国开发者测试

大家把测试结果提供刀Github上

这就是开发者社区的力量

CSS是艺术

就像画画，折纸，你需要用感性思维来理解CSS

不要用理性思维

即不要问为什么会这样

而是说原来是这样

浏览器说是怎么样，就是怎么样

当然有极少情况是浏览器出错了。

为什么color:red能让字变红？不要问为什么，要说原来是这样，所见即所学。

体系化学习CSS

语法一：样式语法

选择器{
	属性名:属性值;
	/*注释*/
}

注意事项

• 所有符号都是英文符号，如果写错了，浏览器会警告

• 区分大小写， a和A是不同的东西

• 没有//注释

• 最后一个分号可以省略，但建议不要省略

• 任何地方写错了，都不会报错，浏览器会直接忽略

语法二：at语法

@charset "UTF-8";/*声明字符编码*/
@import url(2.css);/*引入css文件*/
@media (min-width: 100px) and (max-width: 200px){
	语法一 
}/*媒体查询*/

注意事项

@charset必须放在第一行

前两个at语法必须以分号;结尾

charset是字符集的意思， 但UTF-8是自负编码encoding，这是历史遗留问题

ASCII 英文

GB2312国标句

GBK(微软) CJK（China, Japan, Korea）

Unicode万国码（UTF-8,UTF-16,UTF-32）

如何调试CSS

• W3C验证器（不推荐，太麻烦了）

• 使用VSCode看颜色

• 使用WebStorm看颜色

• 使用开发者工具看警告

如何使用开发者工具

• 找到你脑中的标签

• 看它是否有选择器

• 看它的样式是否被划掉

• 看它的样式是否有警告

WebStrom > VSCode > 开发者工具

Border调试法

步骤

怀疑某个元素有问题

就给这个元素加border

border没出现？说明选择器错了或者 语法错了

border出现了？看看边界是否符合预期

bug解决了才可以把border删掉

记住

CSS的border调试法就相当于JS的log调试法

在哪儿查资料

网站推荐

Google搜索关键字加MDN

CSS tricks（英文）

张鑫旭的博客

书籍推荐

不推荐买任何书，CSS和HTML一样，以练为主

在哪儿搜练习素材

PSD

在Freepik搜索PSD web

365PSD里的UI套件还行

效果图

dribbble.com(顶级设计师社区)

商业网站

直接模仿你常去的网站

不要沉迷临摹 每个类型的临摹一两个即可（PC网站， 手机网站，UI套件）再多无益

外包公司呆不要超过一年半

CSS spec找到最新的CSS标准

css2.1中文 ayqy.net

文档流

基本概念

要理解的几个重要的概念

文档流Normal Flow

块，内联，内联块

margin合并

两种盒模型（border-box更符合人类思维）

文档流动方向

Normal Flow正常的流动方向，中国人翻译成文档流。

指的是文档中的元素从左到右，从上到下。

内联元素or span元素从左到右排列，直到排不下了换行

块级元素or block元素从上到小排列，每一行只有一个块级元素

<span>第1个span元素</span>
  <span>第2个span元素</span>
  <span>第3个span元素</span>
  <span>第4个span元素</span>
  <span>第5个span元素</span>
  <span>第6个span元素</span>
  <span>第7个span元素</span>
  <span>第8个span元素</span>
span {
  border: solid red;
}

Screen Shot 2021-11-24 at 11.19.00 AM

内联元素如果一行放不下，会自己把自己截断。这里还可以注意到border上下之间还重叠了，方方说解释起来比较复杂，应该是collapse问题。

https://jsbin.com/jorakij/1/edit?html,css,output

  <div style="width: 100px">第1个div元素</div>
  <div style="width: 100px">第2个div元素</div>
  <div style="width: 100px">第3个div元素</div>
  <div>第4个div元素</div>
  <div>第5个div元素</div>
  <div>第6个div元素</div>

Screen Shot 2021-11-24 at 11.49.26 AM

流动方向

inline元素从左到右，到达最右边才会换行

block元素从上到下，每一个都另起一行

inline-block也是从左到右

宽度

inline宽度为内部inline元素的和，不能用width指定。即在inline内部添加新的元素，inline的宽度会包含新的元素宽度。

 <span>第1个span元素<span>xxxxxx</span></span>

Screen Shot 2021-11-24 at 12.36.50 PM

⚠️注意：不要在inline元素里添加block元素

否则会出现下面的样式

 <span>第2个span元素<div>hi</div></span>

Screen Shot 2021-11-24 at 12.40.09 PM

block默认自动计算宽度，可用width指定

block元素默认占满全行（在没有margin这些元素的情况下）， 能有多宽有多宽，不影响其他元素。

⚠️注意：默认是width:auto,而不是width:100%。

大多数情况下不要用width:100%

因为width:auto减掉了2px的margin，而width:100%没有减掉这2px

 <div style="width:100%">第4个div元素</div>

Screen Shot 2021-11-24 at 12.53.15 PM

inline-block结合前两者特点，可用width

inline-block的

高度

inline高度由line-height间接确定，跟height无关

block高度由内部文档流元素决定，可以设height

inline-block跟block类似，可以设置height

过时的概念

元素分为内联元素和块级元素

以上是过时的知识点，根据最新HTML5的标准，元素部分块级和内联，所有元素都可以是块级或者内联。可以通过以下css来设置

display:inline
display:block

inline元素和inline-block元素的区别

inline-block元素不会像inline元素到达末端的时候把元素截断，分成两块。

Screen Shot 2021-11-24 at 12.32.45 PM

overflow溢出

当内容大于容器

等内容的宽度或高度大于容器的，会溢出

可用 overflow 来设置是否显示滚动条

auto 是灵活设置

scroll 是永远显示

hidden 是直接隐藏溢出部分

visible 是直接显示溢出部分

overflow 可以分为 overflow-x 和 overflow-y

脱离文档流

block的高度由内部文档流元素决定，可以设height，也就是说，有些元素可以不在文档流中。

两种方法可以脱离文档流

1. position:absolute/fixed;

2. float:left;

怎么让元素不脱离文档流呢？不要用上面的属性即可。

盒模型

两种盒模型

分别是

content-box内容盒-内容就是盒子的边界

border-box边框盒-框架才是盒子的边界

Screen Shot 2021-12-09 at 10.03.37 PM

公式

content-box width = 内容宽度

border-box width = 内容宽度 + padding + border

Screen Shot 2021-12-09 at 10.51.54 PM

哪个好用

border-box好用

同时指定padding,width,border就知道为什么了

面试官问：什么是盒模型？

答：盒模型有两种，一种是content-box，一种是border-box，两者的区别是content-box的宽度只包含内容，border-box的宽度包含content，padding和border

面试官问：你一般用哪个？

答：我一般用border-box，我觉得border-box更好用一点。

margin合并

看下面的盒模型，明明上下都设置了margin，但是只显示了30px的margin而不是60px，这种情况就叫margin collapse.

Screen Shot 2021-12-10 at 2.01.50 PM

哪些情况会合并

父子margin合并

兄弟margin合并

第一种

Screen Shot 2021-12-10 at 2.19.39 PM

第二种

inline-block不会合并margin

Screen Shot 2021-12-11 at 4.55.46 AM

第三种

最上面有30px的margin，最下面有30px的margin，其他的上下margin都collapse，第一个margin的上边距和parent上边距重合，最后一个margin的下边距和parent的下边距重合。

Screen Shot 2021-12-11 at 5.18.54 AM

如果重合边距大小设置不一样还会重合吗？还会重合，谁长用谁的。

只有上下会重叠，左右不会重叠。

如何阻止合并

父子合并用padding/border挡住, 如何让父元素和第一个儿子的外边距或者最后一个儿子的外边距不重合？三种方式，加border，加padding，加overflow

比如只想实现用parent包裹住，然后只有上面显示

第一种用border

Screen Shot 2021-12-11 at 5.32.11 AM

第二种用padding

Screen Shot 2021-12-11 at 5.33.02 AM

父子合并用overflow:hidden挡住

Screen Shot 2021-12-11 at 5.34.08 AM

父子合并用display:flex，不知道为什么

兄弟合并是符合预期的

兄弟合并可以用inline-block消除

总之要一条一条死记

而且css的属性逐年增多，每年都可能有新的

基本单位

长度单位

px像素

em相当于自身font-size的倍数

百分数

整数

rem:

vw和vh

其他长度单位都用得很少，不用了解

颜色

十六进制#FF6600或者#F60(如果数值两个是一样的可以简写)

RGBA颜色rgb(0,0,0)或者rgba(0,0,0,1),a代表alpha，设置透明度，数值越低越透明

background:transparent;直接设置成透明

hsl颜色hsl(360,100%,100%,1)

第一个数字：色相

第二个数字：饱和度

第三个数字：亮度（打光）

第四个数字：可以接受alpha值

试一下做一个彩虹吧

https://jsbin.com/gipoheh/edit?html,css,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="rainbow">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  background:white;
  
}
.rainbow{
  border:1px solid transparent;
  height:200px;
  overflow:hidden;
}

.rainbow div{
  overflow:hidden;
}
.rainbow > div{
  
  width:400px;
  height:400px;
  background:red;
  border-radius:50%;
}

.rainbow > div> div {
  
  background:hsl(60,80%,50%);
  height:380px;
  margin:10px;
  border-radius:50%;
}

.rainbow > div> div> div {
  
  background:hsl(120,80%,50%);
  height:360px;
  margin:10px;
  border-radius:50%;
}

.rainbow > div> div> div> div {
  
  background:hsl(180,80%,50%);
  height:340px;
  margin:10px;
  border-radius:50%;
}

.rainbow > div> div> div> div> div {
  
  background:hsl(240,80%,50%);
  height:320px;
  margin:10px;
  border-radius:50%;
}

.rainbow > div> div> div> div> div> div {
  
  background:hsl(300,80%,50%);
  height:300px;
  margin:10px;
  border-radius:50%;
}

.rainbow > div> div> div> div> div> div> div {
  
  background:hsl(330,80%,50%);
  height:280px;
  border-radius:50%;
  margin:10px;
}

.rainbow > div> div> div> div> div> div> div> div {
  
  background:hsl(330,80%,100%);
  height:260px;
  border-radius:50%;
  margin:10px;
}

Screen Shot 2021-12-11 at 6.17.05 AM