这是我参与[第四节青训营]笔记创作活动的第一天
CSS简单理解成就是基础架构中负责管理样式的部分
CSS引入三种形式：
1.外部样式（引入CSS文件，使用link标签）
2.内部样式 直接用style标签引入
3.内联直接写在html标签属性里
注意：不推荐内联，增加复用性也体会分工特性，框架组件化开发中，内部样式也是比较常见
选择器：
1.通配符选择器 *{};
2.标签选择器 标签名{}；
3.id选择器 #id名{}； 且id值应为唯一
4.类选择器 .类名{}； 一个标签可以有多个属性，可以实现样式重叠
5.属性选择器 可以直接绑定具有特定属性的标签 [特定属性名]； 也可以通过属性含有的属性值 例 input[type=“text”]选定标签 。 也可以去匹配属性值 ^= ,$= 分别代表以什么什么开头和以什么什么结尾去匹配对应标签
6.伪类选择器
1.状态伪类
以a标签为例 {1- a:link{}； 默认状态的样式 。 2- a:visited{}; 访问过的样式 3.a：hover{}; 鼠标经过样式 4.a:active{}; 鼠标点击样式
}
以输入框为例{1.：focus{}； 鼠标焦点在时的样式
}
2.结构伪类
标签：nth-child{}； 标签中的第几个 拓展：若想指定其中偶数或技术个数 nth-child(n)； 其中可以理解为括号内的n每次+1，n可以为一个公式达到选择不相邻的标签
想给不同选择器绑定相同样式，可以用，并列
字体样式：font-family 指定多个浏览器会逐个匹配
CSS深入 CSS中某些属性会自动继承父元素的计算值，当你指定一个值得话会覆盖掉父元素的继承
显式继承 inherit关键字，CSS中每个元素基本都有初始值（默认），initial关键字设置回初始值
CSS求值过程
CSS布局
布局相关技术：常规流，浮动，定位 CSS最基本的盒子模型
当四条边框颜色不同时，交汇处会以斜线分割，可以通过设置不同的透明度和像素大小控制，得到一个三角形
达到水平居中的效果 可以通过左右margin均为auto
外边距合并：两个相同位置的margin只会取大的边距
overflow属性 代表溢出内容 hidden隐藏 scoll滚动（溢出会自动设置滚动条）visible显示（默认）
注意：hidden值也有清除浮动的作用但不建议用这种方式清除浮动
行级元素和块级元素
块级元素独立摆放，行内元素可以一行内显示
行内元素没有宽度高度，可以通过display（block，inline，inline-block）进行元素显示类型转换
inline-block 本身行内元素但是具有块级元素的一些特点，可以设置在一行上，但是可以给宽度高度
flex布局
设置flex布局 语法：display：flex
注意：给要排列的子元素的父元素添加flex
可以通过flex-direction：设置主轴方向
justify-content:设置主轴上的子元素排列方式
注意：使用这个属性之前一定要确定好主轴是谁
flex-start 从头开始沿主轴水平
center 在主轴居中对齐
space-around 平分剩余空间
space-between（重点） 先两边贴边 再平分剩余空间
flex-wrap:设置子元素是否换行
flex布局中，默认nowrap 子元素不换行，如果装不下，会缩小子元素的宽度
flex-wrap:wrap; 装不下就换行
align-items:设置侧轴上的子元素排列方式 子项为单项(单行)
align-items:flex-start 从上到下
align-items:center 在侧轴居中
align-content:设置侧轴上的子元素的排列方式(多行)
flex-start 从头开始沿侧轴水平
center 在侧轴居中对齐
space-around 平分剩余空间
space-between（重点） 先两边贴边 再平分剩余空间
flex子项常见属性
flex属性 定义子项目分配剩余空间，用flex代表多少份
flex:份数
flex-grow和直接写份数是一样的，但如果flex：100px代表flex-basic：100px； 可以理解无论多少弹性最少也要占100px的位置
grid布局（二维布局）
通过grid-temparte-rows：表示横向，纵向用columns表示
gird-area去表示所占区域
float浮动
浮动可以让文字围绕图片排列
position定位
static非定位(默认)
relative 相对定位 相对于原先位置的偏移，不脱标
absolute 绝对定位，相对于最近的父元素的位置的偏移，脱标
fixed 固定定位，相对于视口的绝对定位
可以通过z-index提高元素在页面中的显示层级
