这是我参与「第四届青训营 」笔记创作活动的的第1天
1.css是什么
用于定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
2.在页面中使用css
css的引入分为3种方式：
- 1.外链式
- 2.嵌入式
- 3.内联式
//1.外链式
<link rel="stylesheet" href="./css/bootstrap.css>
//2.嵌入式
<style>
div{
width:100px
}
</style>
//3.内联式
<div style="width:100px"></div>
3.css的工作原理
加载HTML后，解析HTML和加载CSS，再将解析后的HTML和CSS放入页面中。
4.css中的选择器
选择器Selector：找出页面中的元素给他们设置样式
选择器分为：
- 通配选择器
- 标签选择器
- ID选择器
- 类选择器
- 属性选择器
- 伪类选择器
提示：可以通过组合或者选择器组来更方便我们拿到想拿到的DOM节点
选择器的权重
- id选择器的权重为100
- 伪类选择器的权重为10
- 标签选择器的权重为1
通过相加来对比他们的值谁生效
布局(Layout)
布局是什么
- 确认位置的大小和算法
- 依照元素，容器，兄弟节点和内容等信息来计算
布局的相关技术
- 常规流
- 块级
- 行级
- 表格布局
- FlexBox
- Grid布局
- 浮动
- 绝对定位
行级元素和块级元素的却别
FlexBox
一种新的排版方式，弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。它的详细用法可以参考www.w3school.com.cn/css/css3_fl…
Flex 容器属性
flex-direction ：项目元素排列的方向
flex-wrap ：项目元素排列方式
justify-content ： 项目在主轴上的对齐方式
align-items ：项目在交叉轴上的对齐方式
align-content ：多行项目的排列方式
Flex 项目属性
order ：项目的排列顺序
flex-grow ： 项目的放大比例
flex-basis ：项目在主轴上的空间
align-self ：项目的对齐方式
提示：在编码时可以通过谷歌浏览器的工具进行调试
Grid布局
将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局，相对于flex一维布局更加强大。详情用法可参考www.w3school.com.cn/css/css_gri…
