在拉钩学习的笔记（一）CSS的核心样式
1、新增选择器 子级选择器
子级选择器用于选取带有特定父元素的元素
书写语法：element1>element2（父级>子级）
2、新增选择器 兄弟选择器
相邻兄弟选择器：可以用于选择紧跟在另一个元素后面的兄弟元素，而且二者有相同的父元素
element1 + element2 匹配同一个父元素中紧跟在element1后面的一个element2元素
其他兄弟选择器：匹配同一个父元素中在element1后面的所有element2元素
element1 ~ element2 匹配同一个父元素中在element1后面的所有element2元素
3、结构伪类选择器
E:first-child 匹配父元素中的第一个子元素
E:last-child 匹配父元素中的最后一个子元素
E:nth-child(n) 匹配父元素中的第n个子元素
E:first-of-type指定类型的第一个
E:last-of-type 指定类型的最后一个
E:nth-of-type(n)指定类型的第n个
注意：nth-child(n)，n可以是数字，关键字和公式；常见的关键字even偶数，odd奇数；常见的公式：2n 偶数；2n+1 奇数；5n 5,6,7,8,9...；-n+5 5,4,3,2,1,0……
第0个元素或者超出了元素的个数会忽略
5、伪元素选择器
新增伪元素：
E::before 在E元素内部的前面插入一个元素
E::after 在E元素内部的后面插入一个元素
E::first-letter 选中了E容器内的第一个字母
E::first-line 选中了E容器内的第一行文本
伪元素只能给双标签添加，不能给单标签添加；伪元素的冒号前不能添加空格；伪元素里面必须写上属性content:"";
6、属性选择器
用来选择包含指定属性的标签
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中包含val的E元素
PS；选择器权重
基础选择器：id选择器>类选择器>标签选择器>*
伪类选择器、属性选择器的权重等于类选择器
伪元素选择器的权重等于标签选择器
7、css3盒模型
CSS3中可以通过box-sizing来指定盒模型
属性值：content-box 默认值，标准盒子模型，盒模型是向外扩的，width和height只包括内容的宽和高，在width和height之外绘制元素的内边距和边框
border-box 怪异模式，盒模型是内减的，width和height属性包括内容，内边距和边框，不包括外边框，为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制
8、CSS3的常用属性 border-radius 边框圆角
作用：设置边框的圆角
属性值：像素值，百分比，百分比参考的是盒子的整体宽度、高度的百分比
x-radius/y-radius：/分隔两部分属性值，前面为水平半径，后面为垂直半径，得到的是椭圆形
radius：一个属性值，则水平和垂直都设置为同一个值，得到的是圆角
border-top-left-radius:半径；。
/的属性值写法：border-radius属性值中出现了/斜线，那么/前面可以设置水平方向的四种写法，/后面可以设置垂直方向的四种值的写法
9、CSS3的常用属性 text-shadow 文本阴影
属性值： h-shadow：必须，水平阴影的距离，允许负值
v-shadow：必须，垂直阴影的距离，允许负值
blur：可选，模糊的距离
color：可选，阴影的颜色
text-shadow:3px 3px 5px #f00;
多层阴影：逗号分隔多个阴影的属性值，多阴影中，先写的阴影压盖在后写的阴影上。
text-shadow:3px 3px #f00, 6px 6px #0f0, 9px 9px #00f;
10、盒子边框阴影 box-shadow
属性值： h-shadow：必须，水平阴影的距离，允许负值
v-shadow：必须，垂直阴影的距离，允许负值
blur：可选，模糊的距离
spread：可选，阴影的尺寸
color：可选，阴影的颜色
inset：可选，只外部阴影改为内部阴影
box-shadow:水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影;
11、过渡属性 transition
作用：在不使用flash或者JavaScript的情况下，使用transition可以实现补间动画（过渡动画），并且当元素只要有“属性”发生变化时即出现两种状态（我们用A和B代指），那么A和B之间就可以实现平滑过度的动画效果
语法格式：transition：过渡的属性 过渡的时间 运动曲线 延时时间；
单一属性：
transition-property：规定应用过渡的CSS属性的名称。none表示没有属性过渡，all表示所有变化的属性都过渡；属性名 使用具体的属性名，多个属性名中间逗号分隔
transition-duration：定义过渡花费的时间，默认是0。以s秒为单位
transtion-timing-function：定义过渡效果的时间曲线，默认是ease。liner规定以相同的速度开始至结束的效果；ease慢-快-慢；ease-in以慢速开始的过渡效果；ease-out以慢速结束的过渡效果；ease-in-out规定以慢速开始和结束的效果；cubic-bezier(x1,y1,x2,y2)在cubic-bezier函数中定义自己的值，x1、x2取0-1之间的数值，y1、y2取值是任意值，四个数表示拉扯是点的两个坐标
transtion-delay：规定过渡效果何时开始，默认是0。以s秒为单位，0秒也得加单位
12、2D转换 transform
对元素进行移动、缩放、转动、拉长或拉伸，配合过渡，可以实现大量flash才可以实现的效果
属性值：多种转换方式的属性值，可以实现不同的效果
1、位移translate()：语法translate(x,y)xy分别是水平和垂直方向位移的距离，可以为px值或百分比，区分正负；translate(x)只有一个数值，表示水平方向的位移
2、缩放scale():scale(x,y)xy分别改变元素的宽高的倍数；scale(n)改变宽高同时缩放的倍数；scaleX(n)改变元素的宽度；scaleY(n)改变元素的高度
3、旋转rotate():rotate(数字deg)，其中deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转，2d的旋转只有一个属性值
注意：旋转后，坐标值也跟着发生转变
4、倾斜skew()：transform：skew(数字deg,数字deg)，两个值分别表示水平和垂直倾斜的角度，属性值可以为正可以为负，第二个数值默认不写为0
16、2D转换 transform-origin属性
设置调整元素的水平和垂直方向原点的位置
调整元素的基准点
属性值有两个，中间用个逗号隔开；x定义X轴的原点在何处；Y定义Y轴的原点在何处（值可以是left，center，right/bottom、像素值、百分比
18、3D转换 透视 perspective
透视特点：远大近小
作用设置在Z轴的视线焦点的观察位置，从而实现3D查看的效果
属性值：像素值，数值越大，观察点距离z轴原点越远，图像效果越完整且接近原尺寸。
透视属性需要设置给3D变化元素的父级
19、3D转换 旋转
属性值：rotateX(angle) 定义沿着X轴的3D旋转
rotateY(angle)定义沿着Y轴的3D旋转
rotateZ(angle)定义沿着Z轴的3D旋转
20、3D转换 位移
属性值：translateX(x) 设置x轴的位移
translateY(y) 设置y轴的位移
translateZ(z) 定义3D位移，设置Z轴的位移
属性值为像素值或百分比，区分正负
21、transform-style 属性
用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴
属性值：flat：所有子元素在2D平面呈现；presever-3d保留3D空间
兼容：ie10、Firefox及opera支持transform，chrome和safari需要前缀：-webkit-；ie9需要加前缀-ms-
22、CSS3动画
css3的动画制作分为两步：创建动画、绑定动画
@keyframes规则用于创建动画
书写方法：
@keyframes 动画名称{
动画过程，可以添加任意百分比处理的动画细节
}
animation属性
需要将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果，animation属性用于对动画进行捆绑，
div{
animation:动画名称 过渡时间 速度曲线 动画次数 延时时间；
}
必须设置动画名称和过渡时间，其他属性可以根据需求设置。infinite表示无限循环
1、css常用样式：font-weight 字体粗细
设置文字是否加粗
属性值：单词类型（normal默认值，bold加粗，bolder更粗，lighter更细）、数字类型（100-900的整百数字，越大越粗，400=normal，700=bold）
2、css常用样式：font-style 字体风格
设置文字是否斜体显示
属性值：单词（normal默认，italic英文的斜体，oblique将文字倾斜。
3、css常用样式：line-height 字体行高
设置文字实际占有的高度，文字字号在行高中时垂直居中
属性值：px设置行高的具体像素值；百分比值设置的本身字号像素值的百分比
fireworks软件
初始设置：选中文字工具，在属性栏中将平滑消除锯齿，更改为不消除锯齿，文字的像素点清晰显示
量取行高的步骤：1、确定字号和字体；2、书写上下对齐的两行文字调整属性面板的行高值单位为像素，更改数值大小，直到对齐
4、css常用样式：font 字体综合
字体、字号、行高、加粗、斜体都是font综合属性的单一属性
font属性的五个单一属性的值可以进行合写，2个到多个，值之间用空格分隔
字号和字体：字号必须在前，字体必须在后
字体字号行高：顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔（font:14px/28px "宋体";）
如果需要设置加粗和斜体，连个属性值只能写在最前面，两个值之间可以换位置，后面的字号、行高、字体不能更改位置（font:bold italic 14px/28px "宋体"）
5、css常用样式：text-align 水平对齐
在盒子中不论是单行还是多行，都会对应方向对齐
属性值：三个方向的单词left、center、right
6、css常用样式：text-decoration 文本修饰
属性值：none没有修饰，overline上划线，line-through中划线、删除线del标签的默认值，underline下划线a标签的默认值
7、css常用样式：text-indent 缩进
设置段落首行是否进行缩进
属性值：px（缩进多少像素）；em单位（缩进几个中文符的位置）；百分比（缩进文字所在标签的父级标签的width属性的百分比
8、盒模型：又叫框模型，包含了5个用来描述盒子位置、尺寸的属性，宽width、高height、内边距padding、边框border、外边距margin
书写元素内容的区域：width+height
盒子实体化的区域：width+height+padding+border
盒子实际占位的位置：width+height+padding+border+margin
9、css常用样式盒模型属性 width 宽度
设置可以添加元素内容的区域的宽度
属性值：auto默认值；px像素值定义；%参考父级元素的宽度
10、css常用样式盒模型属性 height 高度
设置可以添加元素内容的区域的高度
属性值：auto默认值；px像素值定义；%参考父级元素的高度
11、css常用样式盒模型属性 padding 内边距
设置元素的边框内部到宽高区域之间的距离
可以加载背景，不能书写嵌套的内容
属性值常用px为单位的数值
padding是一个复合属性，可以根据内边距的方向不同规划为四个方向的单一属性
padding属性值可以有1-4个值，值与值之间用空格进行分隔
四值法：padding: 10px 20px 30px 40px;（上 右 下 左）
三值法：padding: 10px 20px 30px;（上 左右 下）
二值法：padding: 10px 20px;（上下 左右）
单值法：padding: 10px;（上右下左）
案例：
制作三边内边距相同，一边不同
1.四值法、三值法进行属性设置；2.先用综合属性设置相同，在后面使用单一属性进行层叠。
12、css常用样式盒模型属性 border 边框
设置内边距外面的边界区域，盒子实体化的最外层
属性值：线的宽度、线的形状、线的颜色
border是复合属性:border: 10px solid red;
border-width 线宽：四个属性值，类似padding的值；
border-style 线型：形状的单词，四个属性值，类似padding的值。none定义无边框；solid定义实线；dashed定义虚线；dotted点状边框；double双线。
border-color 线色：颜色名或者颜色值，类似padding的值。
13、css常用样式盒模型属性 margin 外边距
设置盒子和盒子之间的距离
不能渲染背景
属性值常用的单位为数值
设置方式与内边距padding相同
14、盒模型的扩展用法 清除默认样式
margin: 0px;(外边距)
padding: 0px;(内边距)
list-style: none;(列表)
color: #333;(颜色常用a)
text-decoration: none;（a标签）
font-weight: normal;(去掉加粗)
设置初始化公共样式：
body{
color: #333;
font-sizi: 14px;
font-family: Arial, "宋体";
}
15、盒模型的扩展用法 height高度的应用
根据不同需求可以不设置
如果设置盒子高度，后面同级元素在高度下面加载，自身盒子内部内容过多会溢出盒子区域
overflow：设置溢出部分的显示效果：visible溢出部分显示（默认值）；hidden溢出部分隐藏；scroll溢出部分滚动条；auto自动，如果有溢出则溢出方向滚动条
如果不设置高度，自适应内部内容的高度，不设置或者设置为height: auto;
16、盒模型的扩展用法 居中
文本的水平居中：text-align: center，单行多行都可以设置；
文本的垂直居中：让文字的行高等于盒子的高度
多行文本的垂直居中：让元素的高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同；
元素垂直居中：同多行文本的垂直居中
元素水平居中：子盒子宽度小于父盒子，设置子盒子的margin值为auto，只在水平放向管用
17、盒模型的扩展用法 父子盒模型
父元素的width大于等于所有子元素（排成一行）width+padding+border+margin
否则子元素会掉下来或者溢出
盒模型自动内减：父子盒子中，只有一个子元素，且子元素是类似div标签独占一行的，不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width，如果设置了子元素水平方向的padding和border、margin，不需要手动进行内减，子元素的width会自动收缩尺寸
子元素所有的水平方向的位置所有属性的加和等于父元素的width
18、盒模型的扩展用法 margin 塌陷现象
在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部
也就是说，外边距会重叠
父子元素塌陷：父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生塌陷
本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向上的上边距，会带着父元素一起掉下来
同级元素的塌陷解决方法：只给一个盒子设置间距
父子元素：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开来；或者直接用父元素的padding将子元素挤开
水平方向没有margin塌陷
19、标准文档流
指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面的内容发生变化，后面的内容位置也会随之发生变化
HTML就是一种标准文档流文件
HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。
微观现象：1.空白折叠2.文字类的元素如果排在一行会出现高低不齐、底边对齐的效果3.自动换行，元素内一行内容写满元素的width时会自动进行换行
元素等级：元素分为几种常见的加载级别：块级元素、行内元素、行内块状元素
块级元素：大部分容器类标签包括p标签都时块级元素，比如
等。
行内元素：大部分文本级标签，比如、、等。
行内块状元素：比如、等
20、显示模式 display
更改标签的显示模式
属性值：block块级元素；inline行内元素；inline-block行内块状元素；none标签及内部内容隐藏，让出原有标准流的位置
标签元素脱离标准文档流的方法包括：浮动、绝对定位、固定定位。
21、浮动定义
是一种非常重要的布局属性
属性名：float，漂流、浮动的意思
属性值：left 左浮动；right 右浮动
作用：让元素脱离标准流，同一级浮动的元素可以并排在一排显示
性质：1.脱离标准流，具备行块二象性，浮动元素可以设置宽高，可以并排一行，不会有空白折叠现象，可以被内容撑开
22、浮动性质 依次贴边
1.脱离标准流，具备行块二象性，浮动元素可以设置宽高，可以并排一行，不会有空白折叠现象，可以被内容撑开
2.浮动的元素会进行依次贴边；属性值：left、right
23、依次贴边的应用
利用浮动的依次贴边性质，用列表结构模拟平均分布的表格布局结构
导航栏效果
常见的电商或者企业网站布局
24、浮动没有margin塌陷
margin塌陷出现在标准流中，浮动脱离了标准流，没有margin塌陷
浮动的元素会脱离标准流，让出标准流的位置，进行压盖；由于浏览器的兼容问题，不推荐使用；如果没有特殊需求，不允许父元素中的子元素有的不浮动有的浮动，同级元素中有一个浮动其他的也要浮动。
字围现象：同级元素中前面的元素浮动，后面的元素不浮动，不浮动的内容有一些文字，浮动的盒子会压盖不浮动的一部分，但是文字内容不会被盖住，不浮动的盒子中的文字会让开浮动的盒子，围绕它进行加载。
25、浮动的问题
1、标准流的元素，不设置高度的情况下，能被内部标准流元素撑开；如果子元素进行浮动后，不能撑开父元素
2、父元素没有高度，会影响后面标准流的元素的位置，如果浮动的子元素高度够高的话，有可能会影响到后面浮动元素的贴边
解决问题的方法是清楚浮动带来的影响
26、清除浮动一
1、强制给标准流的父元素一个合适的高度
父元素不是自适应，子元素高度发生变化，问题可能会再次出现
2、clear属性
清除标签元素自身受到前面浮动元素的影响
属性值：left right both
给标准流的父元素添加clear属性，父元素不受前面浮动的影响，不会再占有浮动让出的位置
父盒子依旧不能自适应高度，如果两个父级元素之间有margin，效果不正确
3、隔墙法
外墙法：在两个父盒子之间添加一个div空盒子，设置一个clear: both;的属性
父盒子依旧不能自适应高度，可以用div模拟margin效果。
内墙法：在父元素内部的所有浮动元素的后面加一个空的div，高度为0，添加clear属性
可以完美的解决浮动的问题，但是会添加很多空的标签，给html结构造成冗余
27、清除浮动二
4.伪类
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置
:after：伪类选择器选中某个标签内部的最后的位置
书写方法：前面必须增加普通选择器，后面连续书写伪类名称。
一般给需要清除浮动的父盒子设置一个clearfix的类名
5、溢出部分隐藏
小偏方：给有浮动子元素的父元素添加溢出部分隐藏overflow:hidden;属性可以解决浮动的所有问题。
overflow:hidden会将设置高度的盒子溢出部分隐藏，将没有设置高度的盒子的高度自动适应内容，强制检索内容的高度，包括浮动的高度
总结：如果高度固定，用height设置；如果高度需要自适应，用overflow清除浮动
28、伪类选择器
概念：跟类选择器类似，但是不需要给标签添加属性，伪类名都是提前规定好的，书写伪类时必须与普通选择器搭配使用，伪类选择器添加的样式不一定立即加载到浏览器中，只有用户触发了对应的行为，伪类样式才会立即加载
权重与普通的类选择器相同
a:link访问前 a:visited访问后 a:hover鼠标悬停状态 a:active 点击状态
29、css常用样式 背景属性一
background-color 背景颜色
作用：在盒子区域添加背景颜色的修饰
加载区域：border及以内
属性值：颜色名、颜色值
background-image 背景图片
作用：给背景区域添加图片
加载范围：默认的加载边框及以内部分，后期如果图片不重复添加，加载从border以内开始
属性值：url(图片路径);
背景图会压盖背景颜色
background-repeat 背景重复
设置背景图是否要在盒子中重复加载
repeat 重复，默认值
no-repeat 不重复
repeat-x 水平重复
repeat-y 垂直重复
30、css常用样式 背景属性二
background-position 背景定位
设置不重复背景图的加载开始位置
属性值：三个写法单词表示法、像素表示法、百分比表示法。属性值有两个 值之间用空格分隔
第一个属性表示水平的位置，第二个是垂直的位置
单词表示法：水平 left，center，right 垂直 top，center，bottom
像素表示法：针对border移动
百分比表示法：用百分比作为属性值，100%代表的数值：水平方向等价于盒子内部的border以内的背景区域宽度减去图片的宽度
31、css常用样式 背景属性三
background-attachment 背景附着
设置的是图片是否要随着页面或者盒子滚动而滚动
属性值：scroll 滚动，随着页面的滚动而滚动 fixed 固定，不会跟据盒子滚动而滚动
32、css常用样式 背景属性四
background 综合写法
可以将五个单一属性的值进行合写，1-5个值，五个位置可以互换 backgroune: url(image) no-repeat center top scroll red;
如果值没有设置全，其他的属性进行默认值设置。可以使用单一属性层叠综合属性。
33、背景应用 替换插入图
34、padding 区域背景图
35、精灵图
36、css3背景属性
背景半透明：rgba，alpha的值为0-1，0表示完全透明，1表示完全不透明，0.5表示半透明
文字、边框半透明
背景缩放 background-size：属性值px，设置一边等比缩放；百分比；cover自动缩放至铺满背景；contain自动缩放至最大显示完整图片
多背景 background-image的属性值，以逗号分隔多背景的url路径地址，先写的背景压盖后写的背景图片
37、定位概述
一种布局的重要属性，常用于制作压盖或者位置相关的效果
定位属性：position
属性值：relative 相对定位 absolute 绝对定位 fixed 固定定位
作用：设置定位的元素，他需要根据某个参考元素发生位置的偏移
偏移量属性：水平方向 left right 垂直方向：top bottom
属性值：常用px，或者百分比
38、相对定位 relative
参考位置：标签的原始位置
性质：相对定位不会脱离标签的原始状态（标准流，浮动），不会让出原来的占位。
元素显示效果上，原位留坑，形影分离。
注意：1、偏移量区分正负，2、共一个方向不能设置两个偏移量属性，如果同时设置了left和right属性，只会加载left属性，垂直方向只会加载top
39、相对定位实际应用
1.子绝父相
2.对加载效果区域进行微调，或对文字进行微调
40、绝对定位 absolute
参考位置：参考的是距离最近的有定位的祖先级元素，如果祖先都没有定位元素，则参考body标签
性质：绝对定位会脱离标准流，没有设置宽高会被内容撑开；参考元素是不固定的；参考点不同，left和负值right的效果不同
以body为参考元素时，参考点的确定与偏移量的方向有关
如果top值参与，参考点就是body的左上和右上顶点，对比点是盒子模型的左上角或右上角
如果bottom参与，参考点就是body首屏的左下角和右下角，对比点式盒子模型的左下角或右下角
41、绝对定位 二
如果祖先级有定位的元素，就不会参考body，参考的元素是祖先有任意定位属性，在HTML结构中距离目标最近的祖先
如果参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点。
42、固定定位 fixed
参考位置：浏览器窗口
参考点：浏览器的四个顶点
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素始终显示在定位的位置
性质：脱离标准流，让出位置，可以设置宽高。会固定显示在浏览器的位置
43、定位的应用
1、压盖效果：所有定位类型都可以实现压盖的效果
2、居中：先绝对定位设置50%，再margin-left属性值为负的自身宽度一半
44、定位的应用 压盖
默认的压盖顺序，定位的元素会压盖标准流和浮动的元素，都是定位元素，在HTML中后写的定位压盖先写的定位
自定义压盖顺序：z-index；属性值为数字，属性值越大，会压盖属性值小的，如果属性值相同，HTML后写的压盖先写的；只能给设置过定位的元素设置成功