09·灵魂前端工程师养成-CSS入门

2022-09-26 15:57:44 浏览数 (1)
  • CSS的历史
  • 体系化学习
  • 文档流
  • 两种盒模型
  • 利用css制作一个彩虹

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

CSS的历史

CSS如何发明的

CSS是由李爵士的挪威同事赖先生首先提出。

CSS理念提出：点击链接

赖先生生平：

1.1991年很火的MIT媒体实验室视觉研究理学硕士学位 2.1994年提出CSS概念而闻名 3.1999年任Opera的CTO 4.2005年他写公开信给比尔盖茨问为什么IE不支持Web标准，盖茨说IE7马上发布，他写了Acid2用来验证 5.2006年通过了博士论文答辩 6.2006年他倡议Web网页应使用通用字体格式 7.2007年他倡议浏览器可以支持 video标签

赖先生观点：

微软的IE常常成为他的批评对象 他也是Web打印概念的倡导者，用HTML和CSS写书

什么是CSS？

CSS全称：层叠样式表

层叠指什么？

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



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



3.文件层叠 可以用多个文件进行层叠

4.这些特性使得CSS极度灵活 这也为CSS后来被吐槽留下了伏笔

CSS的版本

版本

时间

重点

CSS1

1996年

不用管

CSS2

1998年

添加定位、z-index、media，不用管

CSS2.1

2004~2011年

使用最广泛的版本（IE支持）

CSS3

1999年开始起草

现代版本，分模块（IE8部分支持）

CSS4*

分模块升级

没有4版本，按照模块升级，只有模块的4

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

方法一：Low 方法 几十种浏览器全部跑一遍~~~~~~（疯了吧？）

方法二：使用caniuse.com





CSS是艺术

CSS很难学，他并不是靠逻辑思维来进行学习的，而是像画画、折纸之类的艺术，要用感性思维来理解CSS

体系化学习

学一门语言必须学会什么？

1.语法 说白了，就是要知道怎么写代码

2.如何调试 要知道，代码出错了，错在哪了，怎么能快速的找到错误并解决

3.在哪查资料 说白了，就是...上哪去抄代码（CV工程师）了解一下？

4.标准定制者是谁 如何找到最权威的解答... CSS官方标准文档：传送门 CSS2.1中文版：传送门

如何学？

1.Copy 抄，天下代码一大抄... 抄文档，抄官方，抄老师，抄就完了

2.Run 放在各种环境跑一跑，自己环境 ，开发环境，测试环境，预上线环境，生产环境，不跑怎么知道错误呢？有人说，生产上线之前，一定要在其他环境跑一跑，那么，又有谁能保证，你的其他环境和生产环境一模一样呢？

不在生产环境跑一跑，你根本都不知道，你的代码写的有多烂...

3.Modify 加入一点自己的想法，自己的设计，自己的功能，自己的思路... 然后再Run

CSS语法

CSS中只有两个语法...

语法一：样式语法

代码语言：javascript复制
选择器{
    属性: 属性值;
    /*注释*/
}

注意事项： 1.所有符号都是英文符号，如果写错了，浏览器会告警 2.区分大小写，a和A不同 3.没有//注释 4.最后一个分号可以省略 ，但是建议不要省略 5.任何地方写错了，都不会报错，浏览器会直接忽略

语法二：at语法

代码语言：javascript复制
/*声明字符编码*/
@charset "UTF-8";
/*导入额外的css文件*/
@import url(2.css);
/*媒体查询*/
@media  (min-width: 100px) and (max-width: 200px)

注意事项：

1.@charset必须放第一行 2.前两个@语法必须以分号;结尾 3.@media语法会单独教学 4.charset是字符集的意思，但UTF-8是字符编码encoding，这是历史遗留问题

如何调试

1.W3C 验证（一般不用） 2.VScode 3.WebStorm 4.查看浏览器的开发者调试功能（F12） 5.border调试法。【重点】

步骤： 1.怀疑哪个元素有问题，就给哪个元素加border 2.border没出现，就说明选择器错了，或者语法错了 3.border出现了，看看边界是否符合预期 4.bug解决了，才可以把border删掉



加完css代码，字体没有发生变化，那么就加入一行border: 1px solid red





如图所示，如果css语法没有错误，border的内容就会出现。

在哪查资料？

1.google 搜索关键词 MDN

flex mdn





2.CSS tricks(英文)

flex css tricks





3.张鑫旭的博客

flex 张鑫旭





在哪搜索练习素材？

PSD

1.freepik搜索PSDweb 如果下载慢，就把域名加入翻墙插件 2.365OSD里的UI套件还行

效果图 dribbble.com顶级设计师社区，只能模仿，无法下载

文档流

文档流：Normal Flow

文档流 即 '文档流动的方向'，跟文档一点关系都没有。

块、内联、内联块 1.inline元素从左到右，到达最右边才会换行 2.block元素从上到下，每一个都另起一行 3.inline-block也是从左到右

代码如下：

代码语言：javascript复制
#在代码框中输入下面内容，然后按Tab
span{第$个span元素}*8

#给span加上boder
span{
  border: 1px solid red;
}



代码语言：javascript复制
#在代码框中输入下面内容，然后按Tab
div{第$个div元素}*8

#给div加上border
div{
  border: 1px solid green;
}



代码语言：javascript复制
#元素根本没有分类，不是span就是inline元素，div就是block元素，我们也可以把inline改成block
span{
  display: block;
}



inline-block

代码语言：javascript复制
#在代码框中输入下面内容，然后按Tab
span.ib{第$个inline-block元素}*8

#把ib变成inline-block元素
.ib{
  display: inline-block;
}



宽度

1.span元素是有内部的inline元素决定他的宽度的，不接受CSS样式的宽度修改



2.div的宽度是能有多宽有多宽，不影响其他的元素，div默认的宽度是auto，不是100%

永远不要写宽度100%，当然也有特殊情况



3.inline-block元素宽度，结合上面两者的宽度，并且可以用width来设置

模仿span的宽度，在设置上模仿的div



高度

1.inline元素，span的高度，是由行高line-height间接确定，跟height无关

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <span>span元素</span>
  </div>
</body>
</html>
代码语言：javascript复制
span{
  border: 1px solid red;
  padding: 10px 20px;
}

div{
   border: 1px solid green;
}

body{
  padding: 20px;
}



代码语言：javascript复制
line-height: 100px;



代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <span>span元素</span>
    <span style='font-family: 宋体;'>你好</span>
  </div>
</body>
</html>


span{
  border: 1px solid red;
  padding: 10px 20px;
  line-height: 100px;
}

div{
   border: 1px solid green;
}

body{
  padding: 20px;
}



2.block元素，div的高度，是由它里面的文档流中的元素决定的，会把正常流动的元素全部包住

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <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>
  
  
  <div style='width: 10em;'>第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素
    <div style='position: absolute;  background: white;'>额外的div</div>
    其他文字其他文字其他文字其他文字其他文字其他文字其他文字其他文字其他文字其他文字其他文字
  </div>
  <div>第2个div元素</div>
  <div>第3个div元素</div>
  <div>第4个div元素</div>
  <div>第5个div元素</div>
  <div>第6个div元素</div>
  <div>第7个div元素</div>
  <div>第8个div元素</div>
  
  <span class="ib">第1个inline-block元素</span>
  <span class="ib">第2个inline-block元素</span>
  <span class="ib">第3个inline-block元素</span>
  <span class="ib">第4个inline-block元素</span>
  <span class="ib">第5个inline-block元素</span>
  <span class="ib">第6个inline-block元素</span>
  <span class="ib">第7个inline-block元素</span>
  <span class="ib">第8个inline-block元素</span>
</body>
</html>
代码语言：javascript复制
span{
  border: 1px solid red;
}

div{
   border: 1px solid green;
}

.ib{
  display: inline-block;
}



3.inline-block跟block高度类似，可以设置height

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <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>
  
  
  <div style='width: 10em;'>第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素
    <div style='position: absolute;  background: white;'>额外的div</div>
    其他文字其他文字其他文字其他文字其他文字其他文字其他文字其他文字其他文字其他文字其他文字
  </div>
  <div>第2个div元素</div>
  <div>第3个div元素</div>
  <div>第4个div元素</div>
  <div>第5个div元素</div>
  <div>第6个div元素</div>
  <div>第7个div元素</div>
  <div>第8个div元素</div>
  
  <span class="ib" style='width: 400px;'>第1个inline-block元素第1个inline-block元素第1个inline-block元素第1个inline-block元素第1个inline-block元素第1个inline-block元素第1个inline-block元素第1个inline-block元素
    <div>block</div>
    <span>span</span>
  </span>
  <span class="ib">第2个inline-block元素</span>
  <span class="ib">第3个inline-block元素</span>
  <span class="ib">第4个inline-block元素</span>
  <span class="ib">第5个inline-block元素</span>
  <span class="ib">第6个inline-block元素</span>
  <span class="ib">第7个inline-block元素</span>
  <span class="ib">第8个inline-block元素</span>
</body>
</html>
代码语言：javascript复制
span{
  border: 1px solid red;
}

div{
   border: 1px solid green;
}

.ib{
  display: inline-block;
}



溢出

当内容大于容器的时候，可能是宽度也可能是高度，会溢出，此时我们可以用overflow来设置是否显示滚动条，有以下4中选项

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="div1">1内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容2</div>
</body>
</html>
代码语言：javascript复制
.div1{
  border: 2px solid green;
  height: 200px;
  /*overflow*/
}



如何解决？

1.放在那里用户可以看得见

代码语言：javascript复制
.div1{
  border: 2px solid green;
  height: 200px;
  /*overflow*/
  overflow: visible;
}



2.隐藏起来

代码语言：javascript复制
.div1{
  border: 2px solid green;
  height: 200px;
  /*overflow*/
  overflow: hidden;
}



3.滚动查看

代码语言：javascript复制
.div1{
  border: 2px solid green;
  height: 200px;
  /*overflow*/
  overflow: scroll;
}



4.自动

可以滚动，不显示滚动条

代码语言：javascript复制
.div1{
  border: 2px solid green;
  height: 200px;
  /*overflow*/
  overflow: auto;
}



脱离文档流

block高度由内部文档流元素决定，可以设置height，这句话的意思是不是说有些元素可以不再文档流中。

那么有哪些元素可以脱离文档流呢？

1.float 2.position:absolute/fixed

只要不使用以上元素，就不会脱离文档流







两种盒模型

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

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



代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="content-box">内容盒</div>
  <div class="border-box">边框盒</div>
</body>
</html>
代码语言：javascript复制
.content-box{
  margin: 25px;
  border: 5px solid red;
  padding: 15px;
  box-sizing: content-box;
  width: 100px;
}

.border-box{
  margin: 25px;
  border: 5px solid red;
  padding: 15px;
  box-sizing: border-box;
  width: 100px;
}







CSS盒模型分两种，一种是content box一种是border box他们的区别是： 1.content box的宽度只包含content 2.border box的宽度包含到border 3.包含到border是指：

  • boder，padding和content
  • border，内边距和内容

公式： content-box width = 内容宽度 border-box width = 内容宽度 padding border

margin合并

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child1">第一个孩子</div>
    <div class="child2">第二个孩子</div>
  </div>
</body>
</html>
代码语言：javascript复制
.parent{
  border: 2px solid red;
}

.child1{
  border: 2px solid blue;
  margin-bottom: 30px;
}

.child2{
  border: 2px solid green;
  margin-top: 30px;
}



如果按照上面，child1和child2的写法，会发现，margin会把边距合并。 所以我们只要知道margin会合并即可，那么代码应该如下：

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">第一个孩子</div>
    <div class="child">第二个孩子</div>
  </div>
</body>
</html>
代码语言：javascript复制
.parent{
  border: 2px solid red;
}

.child{
  border: 2px solid blue;
  margin: 30px 0;
}



如果不想让margin合并，那就使用inline-block元素

代码如下：

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">第一个孩子</div>
    <div class="child">第二个孩子</div>
  </div>
</body>
</html>
代码语言：javascript复制
.parent{
  border: 2px solid red;
}

.child{
  border: 2px solid blue;
  margin: 30px 0;
  display: inline-block;
  width: 100%;
}



基本单位

长度单位：

px：像素 em：相对于自身font-size的倍数 百分数 整数 rem：等把em用的滚瓜烂熟了，再问rem vw和vh

颜色：

十六进制：#FF6600或者#F60 RGBA颜色：rgb(0,0,0)或者rgba(0,0,0,1) hsl颜色：hsl(360,100%,100%)

利用css制作一个彩虹



代码语言：javascript复制
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  background: white;
}

.rainbow {
  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;
  margin: 10px;
  border-radius: 50%;
}

.rainbow > div > div > div > div>div>div>div>div{
  background: hsl(330,80%,100%);
  height: 260px;
  margin: 10px;
  border-radius: 50%;
}
c++ 运维 css 网站 自动化

0 人点赞