HTML5+CSS3学习笔记（二）CSS3基础知识

一. 基础认知

1.1 CSS引入方式
1.1.1 内嵌式：CSS写在style标签中

• 提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
  1.1.2 外联式：CSS写在一个单独的.CSS文件中
• 提示：需要通过link标签在网页中引入 <link rel="stylesheet" href=" "></link>
  1.1.3 行内式：CSS写在标签的style属性中，不推荐使用
  1.2 CSS书写顺序：顺序改变样式不会改变，但是会提高浏览器的加载速度
  1）浮动/display
  2）盒子模型：margin、border、padding 宽度高度背景色
  3）文字样式

二. 基础选择器

1.1 标签选择器：以标签命名的选择器
结构：标签名{CSS属性名： 属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
1.2 类选择器
结构：.类名{CSS属性名： 属性值；}
作用：通过类名，找到页面中所有这类标签，设置样式
注意：一个标签可以有多个类名，类名可以重复
1.3 id选择器
结构：#id属性值{CSS属性名： 属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式，一般配合js使用
注意：id属性值在一个页面中是唯一的，不可重复，一个标签只能有一个id属性值，一个id选择器只能选中一个标签
1.4 通配符选择器
结构：*{CSS属性名： 属性值；}
作用：找到页面中所有的标签，设置样式

三. 文字基本样式

1.1 字体大小：font-size：数字+px（谷歌浏览器的默认字体是16）
1.2 字体粗细：font-weight：normal(400)，bold(700)
1.3 字体样式：font-style：italic(倾斜)，normal(正常)
1.4 字体系列：font-family，默认字体为微软雅黑
1.5 font复合属性：style weight size/line-height family，可以实现连写（顺序固定），前两个可以胜省略
1.6 文本样式
1.6.1 文本缩进： text-indent，一般首行缩进两个字符，数字+em（一个字的大小）
1.6.2 水平对齐方式：text-align，取值有left、center、right，除文本外，其他标签元素要居中，需要设置元素的父亲元素。
1.6.3 文本修饰：text-decoration，取值有underline、none、line-through(删除线)、overline（上划线）
1.7 行高：line-height 数字+px或者是当前font-size的倍数

四. 选择器进阶

1.1 后代选择器：空格
作用：选择所有相关的后代，包括儿子、孙子、重孙子…
语法：父选择器1 后代选择器2 {CSS}
1.2 子代选择器：>
作用：只选择儿子元素
1.3 并集选择器：，
作用：同时选择多组标签，设置相同的样式
语法：选择器1，选择器2 {CSS}
1.4 交集选择器
作用：找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式（如果有标签选择器，必须写在最前面）。
语法：选择器1.选择器2
1.5 伪类选择器
作用：鼠标悬停在元素上的状态，设置样式
语法：选择器：hover {CSS}
1.6 Emmett语法：提速

五. 背景相关标签和属性

1.1 背景颜色：background-color rgba()其中a是透明度，取值为0-1
1.2 背景图：background-image：url(' ')
1.3 背景平铺：background-repeat

取值	效果
repeat	水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着x轴平铺
repeat-y	沿着y轴平铺

1.4 背景位置：background-position：水平方向位置 垂直方向位置
取值：left、right、center、top、bottom，也可以设置像素值
1.5 背景相关属性连写（不分顺序）：color image repeat position

六. 元素显示模式**

1.1 块级元素：独占一行，可以设置宽高,div、p、h
1.2 行内元素：一行可以显示多个，不可以设置宽高，宽高默认由内容撑开，a、span
1.3 行内块元素：一行可以显示多个，可以设置宽高，input、text-area、img
1.4 显示模式转换

属性	效果
display：block	转换成块级元素
display：inline-block	转换成行内块元素
display：inline	转换成行内元素

七. CSS特性

1.1 继承性
特性：子元素默认继承父亲元素样式的特点，文字控制属性都可以继承，控制标签的都不能继承。
1.2 层叠性
特性：同一个标签可以设置不同的样式，若是设置了相同的样式，则最后的样式会生效。当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。
1.3 优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！imortant

八. 盒子模型基本知识

1.1 盒子：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成。
1.2 border的属性：像素 线型 颜色，单方向的边框设置：border-方位词(left\right\top\botto)
1.3 padding属性：内边距设置从上边距开始顺时针设置，使用padding确定内容与边框的关系更灵活，而不是直接固定死标签的大小。
1.4 内减模式：设置border或者padding时盒子就会被撑大，为了解决这个问题，给盒子添加属性box-size:border-box，浏览器会自动计算多于大小，自动在内容中减去。
1.5 清除默认样式：margin：0；padding：0
1.6 版心居中：网页的有效内容 margin:0 auto;
1.7 外边距折叠现象：
1.7.1 垂直布局的两个盒子：两个盒子分别设置上下margin时会合并而不是相加，最终两个盒子的距离取得是margin的最大值，所以一般只给一个盒子设置margin
1.7.2 互相嵌套的两个盒子，儿子的margin-top会作用在父亲上，导致父亲一起往下移动。
解决办法：给父元素设置padding-top或者设置overflow：hidden

九. CSS浮动

1.1 结构伪类基本用法
1.1.1结构伪类选择器：根据元素的结构关系查找元素

选择器	说明
E:first-child{}	匹配父元素中的第一个子元素
E:last-child{}	匹配父元素中的最后一个子元素
E:nth-child(n){}	匹配父元素中的第n个子元素
E:nth-last-child(n){}	匹配父元素中的倒数第n个子元素

 1.1.2 结构伪类公式：n可以是数字，也可以是公式

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个数	-n+5
找到从第5个数往后	n+5

   1.1.3 伪元素：由CSS模拟出的标签效果，用来做装饰性的不重要的小图

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意：必须设置content属性才能生效、伪元素默认是行内元素
1.2 浮动的作用
问题：当代码中的行内块标签或行内标签在写时换行，那么会产生一个空格的的距离
解决：使用float属性
1.3 浮动的特点
1）浮动元素会脱离标准流，但是里面的内容不会
2）浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3）浮动元素是顶对齐，下一个浮动元素会在上一个浮动元素后面左右浮动
4）浮动后的标签具有行内块的特性
5）浮动后的元素不能通过text-align和margin：0 auto居中盒子
1.4 清除浮动：父子级标签，子级浮动，如果父级没有高度，那么后面的标准流盒子会受影响。
解决办法：
1）父级元素可以加高度的就加高度。
2）额外标签法：在父元素内容的最后添加一个块级元素，给添加的块级元素设置clear:both
3）单伪元素：用伪元素代替额外标签。在父元素标签中添加clearfix属性，然后添加CSS样式

.clearfix::afetr {
  content:'';
  display:block;
  clear:both;
  /*下面的可以不写,为了兼容性*/
   height: 0;
   visibility: hidden;
}

4）双伪标签：在父元素标签中添加clearfix属性，然后添加CSS样式

/*before:解决外边距塌陷问题*/
。clearfix::before,
.clearfix::after {
  content: '';
  display:table;
}
/*真正清除浮动的标签*/
.clearfix::after {
  clear: both;
 }  

5）直接给父元素设置overflow：hidden

1.5 定位方式：通过CSS的position属性来设置

属性值	语义
static	静态定位 ：按照标准流摆放位置
relative	相对定位：相对于原来位置来说，原来位置保留，不影响其他盒子
absolute	绝对定位：相对于祖先元素来说，没有祖先元素或者祖先元素没有定位，以浏览器为准；如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考位置，原来的位置不保留
fixed	固定定位：以浏览器的可视区域为准，跟父元素无关，不保留原先的位置，是一种特殊的绝对定位

定位盒子进行移动：

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左部偏移量，定义元素相对于其父元素左边线的距离
right	右部偏移量，定义元素相对于其父元素右边线的距离

十、动画效果

1.1 属性过渡：从一个状态渐渐过渡到另外一个状态，一般与hover配用（谁做过渡给谁加）
transition：要过渡的属性 花费时间 运动曲线 何时开始
1）属性：想要变化的CSS属性，如果所有属性都变化过渡，写all
2）花费时间：单位是秒，必须写
3）运动曲线：默认是ease（逐渐慢下来），可以省略
其他属性：linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)
4）何时开始：单位是秒，必须写，可以设置延迟触发的时间，默认是0，可以省略
1.2 2D转换
1.2.1 rotate 旋转：transform：rotate（xdeg）
重点：角度为正时是顺时针，负值是逆时针，旋转中心默认是元素中心点
1.2.2 设置旋转的中心点：transform-origin：x y （x,y）是旋转的位置，带单位
1.2.3 scale 缩放：transform：scale(x,y),写倍数，不带单位，等比例缩放只写一个参数（宽度），不会影响其他的盒子
1.3 CSS3动画基本使用
1.3.1 制作动画的步骤：先定义动画，再调用
方式：1）使用keyframes定义动画

@keyframes 动画名称 {
    0% {
           样式;
        }
    100% {
          样式;
         }
}
0%是动画的开始，100%是动画的完成，也可以使用from-to来代替

2）调用动画：animation-name：动画名称、animatio-duration：持续时间
1.3.2 常见属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写，除了animation-play-style
animation-那么	规定动画的名称，必要
animation-duration	规定动画完成一个周期所花费的时间
animation-timing-function	规定动画的速度曲线，默认是ease
animation-delay	规定动画何时开始，默认为0
animation-iteration-count	规定动画被播放的次数，默认是1
animation-direction	规定动画是否在下一周期逆向播放，“alternate”
animation-play-state	规定动画是否运行或暂停
animation-fill-mode	规定动画结束后的状态，保持forwords，回到起始backwards

1.4 3D转换：近大远小，后面的被遮挡
1.4.1 3D位移translate3d，比2D多了一个Z轴的变换，需要透视体现效果，将效果加在元素的父亲上。
1.4.2 透视 perspective：理解成3D物体在2D平面内投影
1）视距是人眼到屏幕的距离；
2）距离视觉点越近的在电脑平面成像越大，越远成像越小
1.4.3 3D旋转 rotate3d
1.4.4 3D呈现 transform-style：控制子元素是否开启三维立体效果
注意：代码写给父级，但受影响的是儿子