理解CSS | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第2天。
了解CSS
1.CSS是什么？
用来定义页面元素的样式（设置字体和颜色、设置位置和大小、添加动画效果）
2.页面使用CSS的三种方法
- 外链：引入外部的css文件
- 嵌入：在当前html文件的head标签内写样式
- 内联：直接在标签内部写
3.CSS的工作流程
4.选择器Selector
使用多种方式选择元素:按照标签名、类名或id;按照属性;按照DOM树中的位置
1. 通配选择器
*——代表全部
2. 标签选择器
h1{color:red;font-size:20px;}
3. id选择器
#logo{font-size:60px;font-weight:200;}
4. 类选择器
.done{color:gray;}
5. 属性选择器
通过元素的属性、属性值选中元素
<input value="zhao" disableb/> [disableb]{background:#eee;}选中所有存在是否能操作属性的输入框<input type="password" value="123456"/> input[type="password"]{color:red;}只会选中类型为密码框的输入框<a href="#top">回到顶部</a> a[href^="#"]{color:red;}^表示选中所有的href以#开头的a标签<a href="a.jpg">查看图片</a> a[href$=".jpg"]{color:red;}$表示以.jpg结尾的
6. .伪类（pseudo-classes）
不基于标签和属性定位元素：状态伪类、结构性伪类
- 状态伪类：元素处于某种特定状态下选中
a:hover{color:orange;}鼠标移到链接上后字体颜色变为橙色 - 结构性伪类：根据DOM节点在DOM树中出现的位置决定是否选择元素
li:first-child{color:red;}表示第一个li字体颜色设置为红色
7. 组合
8. 选择器组
5.颜色
- RGB（红，绿，蓝） rgb(0,0,0)~rgb(255,255,255)或者#000000
- HSL:hsl(颜色,鲜艳程度%,亮度%)
- alpha透明度 #ff0000透明度、rgba(255,0,0,透明度)、hsla(0,100%,50%,透明度)
6.字体
1. font-family
使用Web Fonts浏览器先下载字体文件，再使用
2. font-size
关键词：small、medlum、large 长度：px、em 百分数：相对于父元素字体大小
3. font-weight
字重100-900越来越粗
4. line-height
行高
5. font
font:style（样式） weight（粗细） size（大小）/height（行高） family（字体族）;
6. text-align
对齐方式：center居中 left居左 right居右 justify两端对齐
7. spacing
letter-spacing字母与字母的间距 word-spacing单词与单词的间距
8. text-indent
缩进
9. text-decoration
文字修饰：none无修饰 underline下划线 line-through中间删除线
10. white-space
控制元素内空白
- normal默认
- nowrap文本不会换行
- pre保留所有
- pre-wrap保留空白符序列，正常进行换行
- pre-line合并空白符序列，保留换行符
7.调试css
右键点击页面，选择【检查】；或者使用快捷键ctrl+shift+i(windows)、cmd+opt+i(mac)
深入css
1.选择器的特异度
2.继承
某些属性会自动继承父级元素的计算值，除非显示指定一个值
- 显示继承：box-sizing不能被继承，用inherit关键字
- 初始值：每个属性都有一个初始值，可以使用initial关键字显示重置为初始值
3.css求职过程
4.布局（Llayout）
确定内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算 布局相关技术
（1）width
宽度，取值为长度、百分数、auto（浏览器根据其属性确定）
（2）height
高度，取值为长度、百分数（容器有指定高度时，百分数才生效）、auto（由内容计算得来）
（3）盒模型
- padding:指定元素四个方向的内边距，百分数相对于容器宽度
- border:指定容器边框样式、粗细和颜色 当四条边框颜色不同时，边框会斜切；宽高都为0时，变成四个三角组成的正方形
- margin:指定元素四个方向的外边距，取值可以是长度、百分数（相对于容器宽度）、auto margin:auto水平居中 margin collapse:外边距叠加，取较大的margin值
- box-sizing:border-box
- overflow:控制溢出 visible默认，内容不修剪，呈现在元素框之外 ;hidden元素框之外的元素不可见 ;scroll元素框之外的元素不可见并显示滚动条
（4）块级vs.行级
- display属性
- 行级：只包含行级盒子的容器的排版规则; 盒子在一行内水平摆放；一行放不下时，换行显示；text-align决定一行内盒子的水平对齐；vertical-align决定一个盒子在行内的垂直对齐；避开浮动（float）元素
- 块级
（5）flex box
一种新的排版上下文，可以控制子级盒子的摆放流向（上、下、左、右）；摆放顺序；盒子的宽度和高度；水平和垂直方向的对齐；是否允许折行
- flex-direction控制流向
- 主轴与侧轴
justify-content主轴对齐
align-items侧轴对齐
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58872810bca841abaff0b5a6bd313603~tplv-k3u1fbpfcp-watermark.image?" alt="item.JPG" width="70%" />
align-self特殊对齐
order
- flexibility
- flex总
（6）Grid布局
grid line网格线、grid area网格区域、
（7）position属性
---
