CSS

一.CSS的简介

1.什么是css

1.css：名称是层叠样式表（Cascading style sheets）
2.作用:渲染html元素–添加外观的
3.存在样式表中
4.解决内容和表现分离
5.外部样式表大大提高工作效率
6.多个样式之间相互重叠

2.css的语法格式

写法是： 选择器{属性：值；属性：值；}
这种写法仅限内嵌和外部，行内样式使用style属性来操作。
注意：css是写给html元素的

3.单位

网页里面的像素单位：px, %, rem ,em
px 代表固定像素值，相对屏幕的分辨率的单位值
% 百分比像素值
rem 相对单位，只相对于网页的html根元素的字体大小
em 相对单位，相对于元素文本字体大小，没有设置字体大小，默认浏览器字体大小

二.CSS语法

1.元素选择器

元素选择器：根据选择器匹配元素，来添加样式
多个不同的元素具有相同的类名称：根据元素区分，选择类
选择器可以复合使用，使用逗号分隔

1.1 *选择器

匹配所有元素，匹配的是网页里面所有的同名元素

1.2 element选择器

根据元素的名称来匹配

1.3 class类名称选择

根据元素的class名称选择，用.匹配，class 可以多个元素共有

1.4 id选择器

根据元素的id名称选择，用#匹配，id只能有一个，不能重名

1.5 子父选择器

空格匹配当前元素的所有子元素，>匹配的是当前元素的直接子元素

1.6 css选择器优先级

选择器的优先级：
1.*选择器<元素选择器<class选择器<id选择器
2.id选择器的优先级和子父选择器的优先级：
和子父选择器前面的匹配选择器进行对比：
有父级，同级别父级优先，不同级按1
3.!important可以提高优先级

2.样式

2.1 css在网页里面分为几种类型

1.行内样式
2.内嵌样式
3.外部样式

2.2 基本样式

1.color 控制字体颜色
2.font-size 设置字体大小
默认的属性值 larger x-larger small x-small 通常用px
3.font-family: serif; 设置字体的
4.width 设置宽
5.height 设置高
6.border 设置边框
12. font-style 字体样式
13.font-weight 字体加重

2.3 样式的属性

样式属性：单属性样式和复合属性样式

2.4 行内样式

行内样式写在元素的行内

2.5 内嵌样式

1.内嵌的位置：在head标签或者body标签里面
2.如何使用：使用style标签内嵌到head或者body标签里
3.通过css选择器来匹配样式

2.6 外部样式

1.外部样式的位置：在外部写样式表，网页内部引入
2. 外部样式的引入 使用link 标签
3.可以引入在 head 或者body，还可以在内嵌样式里面引入，使用@import ‘./css/index.css’

2.7样式的优先级

样式优先级：
1.三种样式不冲突，三者效果叠加
优先级：行内> 内嵌>外部 （内嵌 和外部 优先级 取决于引入的先后顺序）
2.三种样式冲突，样式选择根据就近原则
优先级：行内> 内嵌>外部 （内嵌 和外部 优先级 取决于引入的先后顺序）
3.!important可以提高优先级，优先级高于行内

3.伪类

3.1 分类

伪类：类似鼠标操作
:hover 鼠标悬停伪类
:active 激活伪类
:visited 访问之后的伪类
:link 访问之前的伪类
:checked ~匹配的是当前元素之后的所有元素 + 匹配的元素是当前元素紧跟之后的元素

4.盒子模型

1.相关知识

• css盒子模型：所有的元素都可以看做盒子，设计或者布局的时候用
• 元素设置行级块的时候，水平的和垂直的元素之间的外边距都是累加的
• 元素水平放置，两个之间的外边距是累加的
• 子元素全部浮动的时候 ，元素之间的外边距也是累加的
• 正常默认情况元素上下外边距不会累加 而是走最大值
• 给元素设置内间距值 ，默认会把元素撑开
• 如果想设置内间距 又不想撑开：
  1.box-sizing: border-box; 是让元素边框和内间距向盒子内部走
  2.box-sizing:content-box; 相当于默认情况
• margin 复合属性 padding 复合属性

3.盒子模型塌陷的处理方法

盒子模型塌陷：父元素的内部没有内容，子元素设置margin-top，连带父容器塌陷

• 给父元素设置上边框
• 给父元素设置内间距
• 给父容器设置overflow: hidden;

5.内联元素和块元素相互转化

1.相关知识

• 元素分为:行元素,块元素
• 相互之间的转化：
  1.块元素转化行元素 display: inline;
  块元素转化行级块 display: inline-block;
  2.行元素转化块元素 display:block
  行元素转化行级块 display: inline-block;
  3.元素在转化为行级块的时候默认 有间隙
  给父元素设置字体大小为 0

6.水平元素浮动

1.相关知识

• 子元素在默认情况会自动撑开父元素
• 元素水平浮动:left,right
• 素在浮动之后会脱离文档流,就不占位置
• 子元素浮动，父元素撑不开怎么处理：
  1.给父元素设置固定高
  2.给父元素设置 超出部分隐藏 overflow: hidden;
  3.在父元素内部设置一个空的div
  
  4.子元素浮动,导致父元素的问题 可以直接处理 ，父元素底下的兄弟元素,里面的内容会收上边浮动的隐藏,是用上面的第三种方案解决或 在兄弟元素样式里面写:清除浮动

7.元素的定位

1.相关知识

• 元素的定位:
  1.absolute 绝对定位
  2.relative 相对定位
  3.fixed 固定定位
• 元素默认在文档流上占位值
• 元素在定位之后可以多使用5个属性:zindex 分层 left right bottom top
• 文档流默认层0 z-index: 0;
• relative: 给元素设置相对定位,默认位置不变,相对自身的位置进行左上右下移动以及分层
• absolute: 给元素设置绝对定位,元素脱离文档流 不占位置,默认相对于浏览器,相对浏览器左上右下移动
• 如果让绝对的元素相对父元素定位:给父元素设置相对定位,子元素就在会在父元素的内部上下左右移动以及分层
• fixed : 固定定位是元素脱离文档流,设置上下左右之后,滑动滚动条位置固定不变
• 素绝对定位或者固定定位没有宽和高 得设置
• 元素在绝对定位或者固定定位之后 初始位置 得看前面有没有元素占位置 有默认位置在这个元素的下边

8.伪元素

:befer
:after

9.元素的显示隐藏

控制元素显示隐藏
display:block; 显示同时元素也是块元素 display:none; 隐藏

10.超出部分隐藏

overflow: hidden;

11.网站的布局模式

• 固定布局 固定像素布局 px
• 流动布局 百分比布局 %
• 网站布局 layout布局
• 浮动布局 —就是元素左右浮动 堆叠产生布局模式
• 定位布局 —就是元素使用各种定位 产生的布局模式
• 弹性盒子布局 —flex 进行布局
• 多列布局
• grid布局 网格布局

三.一点小知识

1.div块元素,默认为父元素的100%
2.font-size默认像素16px 最小8px
3.百分比像素走父元素
4.浏览器一般默认：16px
5.rows=“行数” cols=“列数”
6.css里面设置宽高属性：当前元素必须是块级元素，如果要给行级元素设置宽和高，必须转化为块级元素
7.命名class和id的时候不要使用纯数字，数字不要开头 命名规则：

• 驼峰命名 BlockSmall
• 帕斯卡命名 blockSmall