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

1.css是什么

•  **用来定义页面元素的样式**
   具体功能：
     设置字体和颜色
     设置位置和大小
     添加动画效果
  

2.css如何使用

• 

3.css如何工作

• 

4.选择器（Selector）

-     找出页面中的元素，以便给他们设置样式。
-     使用多种方式选择元素
-         按照标签名、类名或id
-         按照属性
-         按照DOM树中的位置

选择器的使用：

选择器的权重介绍：

!important     最高等级
内联              1级
id选择器          2级
类选择器          3级
标签选择器        4级
通配符选择器      5级
继承的样式        6级（没有优先级）

伪类选择器：

   -不基于标签和属性定位元素
   几种伪类:
        - -状态伪类
        - -结构性伪类

简单的伪类练习：

选择器补充：

5.颜色

颜色的几种表示:
1.直接颜色名：  red blue;
2.RGB值：       rgb( , , ),rgba( , , , )[加透明度]
3.十六进制RGB:   0-F ；例如：#00AACC  
4.HSL值          H(色相)     [0-360]
                 S(饱和度)   [0-100]
                 L(亮度)     [0-100]

6.布局

6.1布局(layout)是什么：

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

6.2布局(layout)相关技术：

6.3 float：

• *主要讲一下如何解决高度塌陷问题:

     .clearfix::befor,.clearfix::after{
         content:"";
         display:table;
         clear:both;
     }
     

6.4 position(更高级一点的布局手段)：

1.static  默认值未开启定位。
2.relative   相对定位（相对自己）[提升元素层级]
3.absolute   绝对定位（相对父元素）
4.fixed      固定定位（相对窗口）
5.sticky     粘滞定位

6.5 display属性

block               块级盒子
inline              行级盒子
inline-block        行内块盒子
none                排版时忽略

6.6 flex 弹性盒(新的布局手段)：

代码具体演示： 感谢·阅读