这是我参与「第四届青训营」笔记创作活动的的第2天

css基础

css是什么

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

用来定义页面元素的样式

设置字体和颜色
设置位置和大小
添加动画效果

如何使用css

css 有三种使用方式分别为:

1 . 外部样式表(外链式)

也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

<link rel="stylesheet" href="index.css">

2 . 内部样式表(内嵌样式表)

也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。
只能控制当前的页面
缺点:没有彻底分离结构与样式

<head>
    <style type="text/CSS">
        选择器（选择的标签） { 
          属性1: 属性值1;
          属性2: 属性值2; 
          属性3: 属性值3;
        }
    </style>
</head>

3 . 行内式(内联样式)

<p style = "margin: lem 0">Example Content<p/>

通过标签的style属性来设置元素的样式

style其实就是标签的属性
样式属性和值中间是:
多组属性值直接用;隔开
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
缺点:没有实现样式和结构相分离。

推荐外链的的使用方式，便于团队开发

css如何展示

选择器

基础选择器

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

复合选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

CSS三大特性

1 . 继承性- 某些元素会继承父元素的值，除非显性指定一个值。

2 . 层叠性- 相同的选择器的同一属性设置了多个值，采取就近原则（选择离结构近的）

3 . 优先级- 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题。

标签选择器的优先级：

标签选择器	优先级
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 最重要的	∞ 无穷大

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
div { color: pink !important; }

权重叠加：

 div ul  li   ------>      0,0,0,3
 .nav ul li   ------>      0,0,1,2
 a:hover      -----—>      0,0,1,1
 .nav a       ------>      0,0,1,1
复制代码

继承的权重是0：

我们修改样式，一定要看该标签有没有被选中
如果选中了，那么以上面的公式来计权重。谁大听谁的。
如果没有选中，那么权重是0，因为继承的权重为0.

布局

确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

常见布局技术

盒模型

box-sizing: content-box

box-sizing: border-box

每种元素都被视为一种盒子
行级盒子和块级盒子的区别

Block Level Box Inline Level Box
不和其它盒子并列摆放和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用

Block Level Box	Inline Level Box
不和其它盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

行级盒子、块级盒子、行级元素、块级元素区别与联系

行级盒子、块级盒子是CSS中的概念；行级元素、块级元素是HTML中的概念

联系

块级元素	行级元素
生成块级盒子	生成行级盒子;内容分散在多个行盒 (line box，可以理解为单线本中分隔的一行一行) 中
body、article、div、main、section、h1-6、p、ul、li 等	span、em、strong、cite、code 等
display: block	display: inline

display属性中的inline-block - 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行

CSS | 青训营笔记