CSS基础

css使用方法

1、内嵌式：在HTML文档中 ，head部分使用style嵌入
2、外链式：使用link标签，rel=“stylesheet” href=“css/css.css”
3、导入式：head部分，使用style{@import url(css/css.css)},不常用，因为不会等待css加载完毕，直接渲染html，会导致一开始看不到css样式
4、行内式：在标签里写style，只会使当前标签生效，不能批量设置样式

伪类 超链接

1. a:link 没有被访问的超链接
2. a:visited 已经被访问过的超链接
3. a:hover 正被鼠标悬停的
4. a:active 正被按下的超链接
   必须按这个顺序写

新增伪类

1. :empty 选择空标签
2. :focus 选择当前获得焦点的表单元素
3. :enabled 当前有效的表单元素
4. :disabled 当前无效的表单元素
5. :chacked 当前已经勾选的单选框或复选框
6. :root 选择根元素 即html标签

元素关系选择器

子选择器

• .box>p box类的直接子类里的p标签 不包含子类的子类。而后代选择器是父类的所有后代哦

相邻兄弟选择器

• img+p 选择img后面的第一个p标签 也得是同级

通用兄弟选择器

• img~p 选择img后面同层级的所有p标签

序号选择器

选择多个元素中的第n个元素

• :first-child 第一个子元素

•  如p:first-child 意为选择第一个子元素p
  

• :last-child 最后一个子元素
• :nth-child(n) 第n个子元素

•  :nth-child(3n+2) n从0开始计算，选择第2、5、8个子元素
  

•  2n+1 即为奇数，可简写为odd，2n为偶数，可写为even
  

• :nth-of-type(n) 第n个某类型子元素
• :nth-last-child(n)倒数第n个子元素
• :nth-last-of-type(n)倒数第n个某类型子元素

属性选择器

选择有某种属性的元素

• img[alt] 选择带有alt属性的img标签
• img[alt=“故宫”] 选择alt属性为故宫的img
• img[alt上三角=“故宫”] 选择alt属性以故宫开头的img
• img[alt$=“故宫”] 选择alt属性以故宫结尾的img
• img[alt*=“故宫”] 选择alt属性中含有故宫字的img
• img[alt~=“故宫”] 选择alt属性有空格隔开的故宫字的img
• img[alt|=“故宫”] 选择alt属性以“故宫-”开头的img

伪元素

动态创建的元素

• ::before 表示在选择的元素之前创建一个元素，必须设置content内容

•  a::before{content:草} 所有的超链接都将以“草”开头，很多赌博网站的链接会有这种俗气的设计
  

• ::after 同理 在最后创建一个元素
• ::selection 被用户鼠标选中的部分，默认背景颜色蓝色
• ::first-letter 块级元素第一行第一个字母 首字母大写就用这个
• ::first-line 块级元素第一行
  before和after创建出来的是行内元素

层叠优先级

id权重>class权重>标签权重

复杂选择器计算权重，以权重大的为准

依旧遵守这个排序 id权重>class权重>标签权重
!important 提升权重 优先级最高 写在某条属性后面

字体属性

1. font-family 设置字体 设置多种字体 顺序写下去,逗号隔开 先设置英语，再设置中文。中文以及带空格的字体要用引号包裹

段落和行

1. text-indent 首行文本内容缩进量 2em：em表示字符宽度
2. line-height 行高 单位为px，直接写数字或者百分数表示是默认的几倍
3. 垂直居中，设置行高=盒子的高度即可
4. 水平居中 text-align=center
5. font:混合字体属性

6. 	font: bolder italic 20px/50px  "宋体";其中bold加粗和italic倾斜要写在前面，不写字体大小/行高 和字体属性整个设置不生效。 font-style  font-weight  font-size  font-family
   

继承性

1.文本相关的属性普遍具有继承性，
color font line list text
2.继承性 就近原则，一样近，再考虑权重

盒子

border:10px solid blue ： 边框 10px 实心 蓝色

padding

1.内边距，
padding:10px 20px 20px 10px 表示上右下左
padding:10px 0 表示上下是10 左右是0
padding-top right bottom left

margin

1.外边距，
margin:10px 20px 20px 10px 表示上右下左
margin:10px 0 表示上下是10 左右是0
margin-top right bottom left
margin竖直方向互相不叠加，以最大的数据为准，称为塌陷，左右可以叠加

box-sizing

1.border-box，设置之后box的padding和border变成内缩，而不是外扩

行内元素和块元素

1.行内元素无法设置宽高，只能根据文字的内容进行调整
a、span、em、b、u等 默认并排显示
img是行内块，能调整宽高

行内元素转换块元素

1.display:block,转为块级元素
2.display:inline 转为行内元素
3.display:inline-block 转为行内块

display:none 彻底隐藏元素
visibility:hidden 元素不可见 位置还在

浮动和定位

浮动可实现块级元素并排展示，可用于页面布局
1.float:left,左浮动 元素可以并排
float:right 右浮动，按代码的先后顺序靠父元素的右并排
2.浮动必须要有一个父元素，该父元素下需要浮动的都要添加float属性
3.浮动元素顺序依靠，贴着最相邻的元素

BFC规范

块级格式化上下文
页面上一个隔离的独立容器，不受外界影响，也不会影响外界
实现方法：

1. overflow:hidden 溢出盒子边框的部分将被隐藏
2. 设置float属性
3. display:inline-block 转换为行内块
4. 定位

BFC可以 ：阻止竖直方向的塌陷

清除浮动

浮动可能会遮盖，所以需要清除，方法如下：

1. 给浮动的父元素设置overflow:hidden
2. 给后面的父元素设置clear:both属性，不推荐，margin会失效
3. 使用::after，在父元素后面创建一个伪元素，这个伪元素content=’’，要有clear:both属性，并且一定要用display:block转换为块级元素才生效
4. 新加一个盒子，使用clear:both属性把浮动的元素隔开

固定高度的时候，可以直接给盒子设置高度来清除浮动。
不需要溢出展示的时候，可以选择overflow。
伪元素一般情况都适用。
在margin不重要的时候，可以使用clearboth。
页面简单的时候，可以用新的div形成墙。

相对定位

相对于元素自己原来的位置的定位：

1. position:relative
2. top left right bottom 从上往下 从左往右 从右往左 从下往上
3. 相对定位只是渲染图形，真实位置还在原地
4. 多用来微调元素的位置

绝对定位

相对于浏览器的定位，当需要有元素互相压盖时使用

1. position:absolute
2. top left right bottom 从上往下 从左往右 从右往左 从下往上
3. 脱离标准文档流，将释放自己的位置，不会干扰别的元素，会覆盖到其上
4. 绝对定位的基准点：以离自己最近的带有定位属性的父元素为准，给父元素加上position:relative，即可让父元素成为基准点
5. 设置垂直居中公式：top50%。margin-top：负的自身一半的高度
6. z-index 压盖属性，值大的会压盖住值小的

cursor:pointer 鼠标悬停时会变成小手状态
绝对定位的行内元素可以设置宽高

固定定位

fixed
固定在浏览器的位置，无论页面怎么移动，一直在那个位置，如悬浮窗，回到顶部按钮等
脱离标准文档流

margin传递问题：

当页面有父子盒子时，只给子盒子设置外边距，会把父盒子一起拖拽下来。

解决方法：

1、给父盒子添加边框。（注意尺寸问题）

2，给子盒子设置浮动（注意浮动影响，解决方法可参考清除浮动课程）

3，给父盒子设置浮动（注意浮动影响，解决方法可参考清除浮动课程）

4，给子盒子设置绝对定位（注意基准点：子绝父相）

边框与圆角

边框
border:1px solid red
其中，线条样式常用的有3种：solid实线，dashed虚线，dotted点状线
单独设置属性：border-width,border-style,border-color

制作三角形：原理：用较粗的边框做为三角形，盒子的宽高设为0，除了三角形的边框部分，其他边框设为透明transparent
border:40px solid transparent
border-bottom:40px solid red

圆角
border-radius
若radius为正方形盒子边长的一半，就是正圆形了
border-radius:50% 表示从边长的50%计算半径

阴影
box-shadow:10px 10px 30px rgba(0,0,0,.4)
x偏移量 y偏移量 模糊值 颜色
在数字前+inset 表示内阴影，内阴影的偏移设置成0，就可以达到边框高亮的效果
可以用第4个数字，表示延展值，如10px
多阴影，一个盒子可以有多个阴影，每个阴影用逗号隔开

背景

背景图片
background-image:url(images/img.png)
注意，如果样式写在css文件里，那么url的路径就要从样式表出发去寻找

背景图片的重复模式
设置背景图片时，如果背景图片不能填满背景，默认会平铺填满
background-repeat:
repeat-x:只平铺x轴；repeat-:只平铺y轴； no-repeat:不平铺

背景尺寸
background-size 设置背景图片的尺寸
background-size:100px 100px 宽和高
如果设置成百分比，则图片的尺寸为盒子尺寸的百分比
设置成auto，表示等比例缩放，如：50% auto
contain:表示缩放图片到适应盒子的尺寸，保证盒子中能看到一张完整的图片
cover:表示缩放图片到可以撑满整个盒子，会强行拉伸图片尺寸，可能只能看到图片的一部分

背景裁切
background-clip
只对dotted点状线和dashed虚线有用
padding-box，图片不会占到边框
content-box，图片只占内容区域
border-box，默认属性，裁剪到边框

背景固定
background-attachment
对有滚动条和背景图片的盒子有效
scroll:默认效果，自身滚动条滑动时背景图片不动，网页滚动条滑动时背景图片动
fixed：自身滚动条不动，网页滚动条滑动时也不动
local：自身滚动条动，外部也动

背景定位+css精灵
background-position
表示背景图片在盒子中的位置，x轴和y轴
如果需要居中，就用center center

css精灵，就是把图标都放在一张png图上，使用定位，把需要用的图标移动到盒子中。一般要用ps识别这个图标在图中的位置。

背景综合属性
就是说背景的属性可以合写到一个background里
background:white url() no-repeat center

背景多图片
如果要在一个盒子里放多个图片，那么在image里，写多个url，用逗号隔开
多个图片的位置，position里用逗号隔开
也可以直接用background写多个，要先写URL，再写位置，repeat，然后逗号隔开

线性渐变
见字如面，盒子里的颜色的渐变
要写在background-image里
linear-gradient(to right,red,yellow 20%,green)
表示方向，起始颜色，中间颜色，中间颜色所在位置，最终颜色，可以有多个中间颜色
方向还可以用角度：45deg，45度角
浏览器私有前缀
一些实验性的css标签，有些低版本浏览器不兼容，需要加上标签
chrome：-webkit-
firefox：-moz-
ie edge：-ms-
欧朋：-o-

径向渐变
意思是从圆心向外圆形渐变
也在background-image里
radial-gradient(50% 50%,yellow,red)50%指圆心
不转变，就可以得到该颜色，如yellow,yellow 50%,就可以得到一个一半宽的黄色条

旋转变形
transform:rotate(45deg)
顺时针45度旋转，负数的话就是逆时针旋转
旋转点
transform-origin:0 0;表示左上角；0 100% 表示左下角

缩放变形
transform:scale(2)
放大2倍，小数表示缩小
origin表示缩放点

斜切变形
transform:skew(10deg,10deg)
x轴倾斜角度和y轴倾斜
极坐标角度方向，逆时针为正方向，顺时针为负方向

位移变形
transform:translate(100px,100px)
xy轴位移像素，位移后会在原地留坑

3D旋转
transform:rotateX(30deg)
绕x轴3d旋转30度，向后是正方向
transform:rotateY(30deg)
绕 y轴3d旋转30度，向右是正方向

旋转的盒子需要有一个父盒子
父盒子必须要设置透视属性:perspective:300px，参数表示透视远近
旋转的盒子要和父盒子一样大小，就是要和透视的那个盒子一样大

空间移动
translateX\Y\Z
z轴指的是平面正面朝上的方位
要空间移动，必须要先3d旋转

过渡动画
transition:width 1s linear 0s;
就是补间动画
参数：需要动画的属性，动画持续时间，动画类型，动画延迟时间
第一个参数可以用all，表示所有属性
缓动参数
就是linear，ease：起始和结束慢，中间快；ease-in：慢速开始；ease-out：慢速结束；ease-in-out：类似ease，但是比ease平滑，还可以用贝塞尔曲线。没心情弄这个。

当有多个舞台存在时，内部的舞台要有transform-style: preserve-3d;属性，设置这个舞台的变形类型，保留内部3d效果

帧动画
首先要定义帧动画
@keyframes name{
from {
transform:scale(1.2)
}
to {
transform:scale(2)
}
}
从from变成to
然后在需要动画的元素上设置属性
animation:name 1s linear 0s 3;
还可设置播放次数，3就是3次，infinite无限循环 alternate表示动画一次正放一次倒放；forwords表示停止在动画结束的那一帧
也可以用百分比表示多个帧
如：
@keyframes name{
0%{
transform:scale(1.2)
}
10%{
transform:scale(1.2)
}
30%{
transform:scale(2)
}
50%{
transform:scale(1.2)
}
70%{
transform:scale(2)
}
100%{
transform:scale(3)
}
}
看好了，是0-100%

过渡和动画的区别和应用场景：
过渡：

1. 需要一个触发条件，比如hover鼠标悬停
2. 精确性，只能设置头和尾，中间部分不能设置，动画一步到位
3. 循环，只能触发一次，不能重复循环

动画：

1. 不需要触发条件，用了animation就会加载动画
2. 精确性，支持多帧设置，可制作复杂动画
3. 可重复循环，支持正向、逆向交替动画

应用场景：

• 如果需要from到to的两步动画效果，用过度transition，比如简单的按钮动画
• 如果要灵活制作多帧以及循环效果，用动画animation，比如变色动画

过渡、动画的单独属性：
持续时间：animation/transition-duration,
延迟时间：animation/transition-delay,

补充知识

z-index
当某个元素需要压盖在别的元素之上时，用了绝对定位还被别的元素盖住，就可以使用这个属性，参数设置999，提高该元素在z轴的位置

min-width
最小宽度，缩放浏览器，元素的最小宽度不会低于这个值。比如用于img图片

height=100%
当盒子高度需要被百分比平分的时候，该盒子的高要设置成100%

vertical-align: middle;
图片可能和盒子底部有一些缝隙，添加该属性后，就没有缝隙了

opacity:0.5
透明度属性，可以做鼠标悬停效果，0为透明，1为不透明

box-sizing:border-box
使盒子的高度包含边框高度。当盒子高度为百分比，且有边框的时候使用