这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
1.css定义页面元素样式
css由选择器（selector）、声明（属性、属性值）。
2.如何使用css
外链 写link
嵌入 写style
内联 写标签里
3.CSS如何工作？
![6QA_0D47TL4Q0C]Y155MEJX.png](p6-juejin.byteimg.com/tos-cn-i-k3…?)
4.选择器
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器...
通配选择器
*
标签选择器 标签
id选择器 #id
类选择 .类
属性选择器 [disabled] input[type=‘password’] a[href$=".jpg"]
伪类选择器 :link,:visited,:hover,:focus,:active...
伪类结构选择器 first-child
选择器组合
5.文字
RGB
#ff00ff rbg(255,255,255) #ff0000ff rgba(255,255,255,0)
字体
font-family 推荐www.googlefonts.cn/
粗细
font-weight 100-900 700-bold(加粗) 400-normal(正常)
行高
line-height 用于给字体垂直居中
6.调试css
ctrl+shift+i(调出控制台)
7.选择器优先级
id>(伪)类=标签 组合>单个
8.css求值过程
![UC_)W5])C_29J9O5@{NV3P.png
![
YLMHWL{KS~RR8{AT$DXY.png
9.布局(layout)
display-（）一般定义布局
常规流
块级(block)
行级(inline)
FlexBox(单一的流式布局)
![M2MW%$%DA(FU]_L9NWGIZVY.png](p1-juejin.byteimg.com/tos-cn-i-k3…?)
justify-content align-items
Grid布局(二维网格)
浮动(float)
left,right让块级，行级靠左右排序，比较死板，不太用。
绝对定位(position)
静态定位（static）默认
相对定位（relative）父元素
绝对定位（absolute）子元素
固定定位（fixed）顾名思义，固定在浏览器窗口的位置。
