CSS的基础属性

一、什么是CSS

Cascading Style Sheets
（ 层叠样式表）

二、CSS的引入方式

 1） 内嵌式：写在HTML内的样式
 2） 外链式：创建一个css文件，在HTML中用link进行链接
 3） 行内样式：写在标签内的样式

三、CSS的选择器

   1）  “ * ”通配选择器：选中页面中全部元素
   2） 标签选择器：选择页面中的标签
   3） “ . ”类选择器：在标签中添加class属性后使用
   4） “ # ”id选择器：在标签中添加id属性后使用
   5）群组选择器：中间用“ ，”隔开
   6）  后代选择器：空格使用，用于多层子节点
   7） “ > ”直接子集选择器：选择直系字节点
   8） “ + ”相邻下一个兄弟
   9） “ ~ ”同级后所有的兄弟
   10）“ [] ”属性选择器
    [属性名^=首字母]  [属性名$=结尾字母]  
    [属性名*=包含字母]  [属性名~=包含字母（只能自己有别人没有的字母）]

四、伪类选择器

1.超链接

1） “ :link ”未访问链接的样式
2） “ :visited ”已访问链接的样式
3） “ :hover ”鼠标经过的样式
4） “ :active ”激活时的样式

注：以上顺序不能错

2.表单伪类选择器

1） “ :focus ”获得焦点时的样式
2） “ :bluk ”失去焦点时的样式
3） “ :checked ”勾选的样式
4） “ :enabled ”激活时的样式
5） “ :disabled ”失活时的样式

3.nth伪类选择器

1） “ :first-child ”第一个子元素（先位置，后类型）
2） “ :last-child ”最后一个子元素
3） “ :first-of-type ”第一个子元素（先类型，后位置）
4） “ :last-of-type ”最后一个子元素
5） “ :nth-child( ) ”正序查找第几个元素（先位置，后类型）
6） “ :nth-last-child( ) ”倒序查找第几个元素
7） “ :nth-of-type( ) ”正序查找第几元素（先类型，后位置）
8） “ :nth-last-of-type( ) ”倒叙查找第几个元素
9） “ :not ”反选
10）“ :empty ”空白元素
11）“ :only-chid ”独生子
12）“ :only-of-type ”一个类型中唯一的独生子

4.伪类元素选择器

1） “ ::before ”元素前
2） “ ::after ”元素后
3） “ ::first-letter ”第一个字节
4） “ ::selection ”选中时的样式

五、字体样式

1）  “ font-size ” 子体的大小设置
2）  “ font-family ” 字体类型设置
3）  “ font-weight ” 字体的加粗粗设置
4）  “ coklor ” 颜色设置
5）  “ opacity ” 透明度设置
6）  “ font-style ” 字体倾斜设置
7 ） “ text-align ” 对齐方式
8）  “ text-decoration ” 线条设置
     “ underline ” 下划线
     “ line-thtough ” 删除线
     “ overline ” 上划线
9）  “ text-indent ” 首行缩进
10） “ text-overflow ”单行文本省略号
11） “ text-align ”非最后一行对齐方式
12） “ text-align-last ”最后一行对齐方式
13） “ line-height ”行间距
14） “ text-transform ”英文单词切换大小写
     “ uppercase ”大写
     “ lowercase ”小写
     “ lapitalize ”首字母大写
15） “ word-spacing ”单词间距
16） “letter-spacing ”字符间距

六、盒子模型

1.盒子模型的分类（box-sizing）

 1）标准盒子（content-box）：会被内容撑开盒子的大小
 2）怪异盒子（border-box ）：不会被内容撑开大小

2.内容（content）

1）行内块元素：不支持宽高设置
2）宽高由自身内容撑开

3.内填充（padding）

1）默认撑开盒子大小
2）top/bottom/left/right 上下左右

4.边框（border）

1)默认边框  
 宽（width）+   颜色（color）+ 样式（style）
 样式（style）：
 实线（solid） 虚线（dashed）
 双实线（double） 点（dotted）
 2）圆角边框（rabius）  

5.外边距（margin）

1）块元素
2）top/bottom/left/right 上下左右
   上（top）边距会向父节点传递
   解决方法：给父节点添加overflow：hidden；

七、切换元素（display）

1）行内元素（inline）
2）块元素（block）
3）行内块（inline-block）

八、背景设置（background）

1. 背景色（color）
2. 背景图片（image）
3. 背景图片平铺设置（repeat）

   1）重复（repeat）
   2）不重复（no-repeat）
   3）水平重复（repeat-x）
   4）垂直重复（repeat-y）
   5）缩放重复（round）
   6）不缩放重复（space）

4. 背景图片大小（size）

5. 背景图片位置（position）

6. 图片初始化位置

   1）边框（border-box）
   2）内填充（padding-box）
   3）内容（content-box）

7. 图片裁切位置（clip）

   1）保留内容（content-box）
   2）保留内容和内填充（padding-box）
   3）不裁切（border-box）

8. 图片固定（attachment）

   1）固定（fixed）
   2）滚动（scroll）

九、浮动（float）

1）左浮动（left）
2）右浮动（right）

十、定位（position）

1.默认定位（static）
2.相对定位（relative）：相对于自身的定位
3.绝对定位（absolute）：脱离文档流，默认的包含框是浏览器
父节点添加非static定位，就自动成为包含框
4.固定定位（fixed）：脱离文档流，包含框是浏览器，不随页面滚动而滚动
5.粘性定位（sticky）

十一、阴影

1）文字阴影（text-shadow）
2）盒子阴影（box-shadow）

十二、渐变

1）线性渐变（linear-gradient）
2）重复线性渐变（repeating-linear-gradient）
3）径向渐变（radial-gradient）
4）重复径向渐变（repeating-radial-gradient）

十三、过渡（transition）

过度属性——过度时间——动画类型——延迟时间

十四、变换（transform）

1）位置（translate）
2）缩放（scale）
3）旋转（rotate）
   “origin”修改变换中心
   “perspecfive”透视
4）扭曲（skew）

十五、弹性盒子（flex）

display：flex;

1.主轴方向（flex-direction）

1）默认（row）
2）右至左（row-reverse）
3）上至下（column）
4）下至上（column-reverse）

2.换行（flex-wrap）

1）换行（wrap）
2）不换行（nowrap）
3）反转换行（wrap-reverse）

3.主轴对齐方式（justify-content）

1）居中对齐（centr）
2）开始方向（flex-strt）
3）结束方向（flex-end）
4）两端对齐（space-between）
5）边距相等对齐（space-around）

4.交叉轴对齐方式（align-items）

1）居中对齐（centr）
2）开始方向（flex-strt）
3）结束方向（flex-end）
4）文字基线对齐（baseline）
5）拉伸（stretch）

5.多主轴对齐方式（align-content）

1）居中对齐（centr）
2）开始方向（flex-strt）
3）结束方向（flex-end）
4）两端对齐（space-between）
5）边距相等对齐（space-around）
6）拉伸（stretch）

6.项目属性

1）排序（order）
2）成长比例（flex-grow）
3）缩小比例（flex-shrink）
4）占据主轴空间大小（flex-basis）

7.项目在交叉轴上的对齐方式（align-self）

1）居中对齐（centr）
2）开始方向（flex-strt）
3）结束方向（flex-end）
4）文字基线对齐（baseline）
5）拉伸（stretch）