css第一天
1、单词：marquee(选取框) param(参数)
2、H5新增的表单(移动端用的比较多 浏览器兼容性差)：
(滑块 一般配合js使用较多)
(日期)
(数字 在手机里可以自动唤醒数字键盘)
3、H5之前：通过第三方网站上传(播放)视频(优点：没有兼容性 缺点：有广告)
4、video的使用方法与img相似 (优点：更安全 没有广告 缺点：兼容性差【不过可以忽略】)
video属性介绍：src(地址) autoplay(自动播放 不过谷歌不支持) controls(控制器) loop(循环播放)
5、video视频只支持格式，并且不同的浏览器支持不同格式的视频：(ogg MPEG 4 WebM)
6、video视频格式的兼容写法：前提(将三种格式的视频全部准备好**[下载格式工厂])**
<video autoplay controls loop>
<source src="media/mp4" />
<source src="media/ogg" />
<source src="media/webm" />
你的浏览器太low 赶紧点击升级<a href="" />
</video>
浏览器的解析过程：只要遇到当前浏览器能识别的格式视频 就直接解析 后面不管 如果没有找到 继续找下面的source(注意：国内mp4兼容最好)
6、音频(音频和视频的使用方式一样) 音频格式(ogg wav mp3)(注意：国内mp3兼容最好)loop(环)
7、span div没有任何语义 就是一个容器 用来装东西
8、字符实体：将网页上的特殊符号，用特定的代码表示
9、html骨架：老师源代码09
10、字符集：网页源代码—>通过字符编码集(记录了文字和编码的的对应关系)—>存储编码到电脑里面—>传递给浏览器—>浏览器通过字符集获取到文字—>呈递给用户(见教学资料其他资料的字符编码集.png)
11、乱码问题：电脑存储的字符编码集和浏览器解析的字符编码集不一样
css：在css中 绝大多数的数值都需要添加单位
12、字体属性:
font-size(文字大小[默认文字大小是16px])
font-weight(控制文字的粗细[取值：normal(正常默认) bold lighter /数值表示100~900 400=normal 700=bold 100=lighter])
font-style(控制文字是否倾斜【取值：normal(正常默认) italic倾斜】)
font-family(控制使用什么类型的字体 字体值是中文或者字体有空格的一定要加引号(单双均可) 多个字体间逗号分隔 )
简写：font: font-style font-weight font-size/line-height font-family;(按顺序写 可不写[如果是默认值可以不写 但是font-size和font-family即使是默认值也必须写])
13、css选择器
标签选择器：会将同类型的标签选择但是 无法实现同类型标签差异化
类选择器：创建一个类选择器 然后给对应的标签添加这个类(一次创建 多次使用)
id选择器：创建一个id选择器 然后给对应的标签添加这个id(一次创建 一次使用 经常配合js使用)
通类符选择器：* 只会在css初始化中使用
伪类选择器：选择的是元素的某一种状态 link(没有访问的状态) visited(访问过后的状态) hover(移入) active(点击)
14、多类名选择方式：一个元素可以有多个类名，类名的作用不同
15、文本属性：
text-decoration(取值：underline(下划线) line-through(删除线) none)
text-indent( 默认文字大小=1em，em是动态变化的)
text-align(控制文字的水平对齐方式) 给span(行内元素)这种元素添加text-align无效
line-height(上一行的中线到下一行的中线)
16、div默认和父元素一样宽，高度默认内容撑开
css第二天
1、rgba(r,g,b,a)颜色表示法 a代表透明度，取值为0 ~ 1
2、line-height 可以直接写数字，表示当前文字的倍数
3、css三种样式表：外链式 内嵌式 行内式(权重高)
4、css复合选择器
并集选择器:选择器1,选择器2 {}
交集选择器:选择器1选择器2 {} 如果有标签选择器，标签选择器在最前面(一个元素同时具备多个选择器)
后代选择器：祖先选择器 目标选择器 {}
子元素选择器：父级选择器 > 子集选择器 {}
5、标签的三种显示模式
块级显示模式：独占一行 自定义宽高 如果没有自定义宽，默认从父级继承宽度（div p h系列 列表 ）
使用场景：(布局)用来包裹其他块级标签和行内标签
注意:p标签不能套块级标签
行内显示模式：排成一排 不能自定义宽高 大小由内容撑开( span a 8大格式化标签strong em ins del u s b i )
使用场景：包裹文字
行内块级显示模式(本质上来说是一种特殊的行内元素)：可以自定义宽高 可以和其他行内元素排成一排( img input(表单元素) td )
6、标签的显示模式转换
display:inline
display:block
display:inline-block;(常用)
7、text-align补充点
text-align:控制其内部文字,行内标签,行内块级标签 水平居中 添加给父级元素
可以将行内标签和行内块级标签看成一种特殊的"文本"
不要给行内标签添加块级元素 a标签除外(一般将a标签转块)
8、img与背景图片的区别
背景图片为壁纸,img为画
body标签比较特殊:虽然没有高度 但是添加背景图片默认会占满整个浏览器窗口
实际工作中使用图片:产品图片用img ;大背景或者小图标用背景图,不需要经常更新
background-attachment(背景图片是否跟随滚动):scroll(默认 跟随滚动)/fixed(固定不动)
css第三天
1、preload 预加载
2、background-position:
五个方位名词可以在页面的9个点，如果只写前面一个词，后面的一个词可以不写，默认是center
坐标系：以当前盒子的左上角为顶点，水平向右x轴垂直向下y轴（注意：第一个是x轴的值，第二个是y轴的值）
可以方位名词和坐标系混写
3、背景简写：background：#000 url() no-repeat scroll right center;(注意：在简写当中是有默认值的，所以不能在简写前面写背景单一属性属性，因为单一属性会被覆盖；实在要写的话，可以在背景简写后面写属性来覆盖)
4、包括字体简写里面也有默认的行高(差不多是1.2)，所以行高可以在简写里面设置，或者在简写后面的设置
5、绝大数的简写都有这种问题，所以在写简写时，注意单一属性和简写有没有冲突
6、css继承性：后代元素可以继承祖先元素的一些css样式，跟文字相关的(font系列，text系列(text-decoration text-indent(只针对块级有效) text-align(只针对块级有效))，color,line-height)(注意点：当一个元素自己没有该属性，才会继承，如果自己有，就不会继承) ，a标签特殊，因为a标签自己有颜色，所以不会继承父级的颜色
7、特殊的a标签：可以继承font系列，无法继承line-height,color,text-decoration,text-indent,可以继承text-align(因为在父元素内容里面)
8、块级元素的宽度继承，高度不继承
9、 权重：一个元素被多个选择器选中，到底哪个选择器生效
继承 < * < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ! important(作用于单条属性的最后面，分号前面)（例子：color: red !important;）!important 添加给继承的属性没有效果，因为后代元素自己没有属性才会继承。（注意 !important 要少用）
10、权重是会进行叠加的(一般出现在复合选择器或者是伪类中但是并集选择器不叠加)，权重一样的话，后渲染的盖住先渲染的
11、选择器的级别之间不可以跨越。复合选择器除外
12、盒子模型的组成：width + height(content区域) +padding(一般用来撑开盒子的内容) + border(也会撑开盒子的内容背景 需要内减) + margin(一般用来移动盒子)
13、块元素独占一行的原因，会将一行剩下的部分默认用margin填充
14、大背景图片居中：设置background-position: center top;
15、double双实线边框 border:none;(去掉边框 可用于input input自带边框2px)
16、边框的单一属性写法：border-weight border-style border-color
17、padding：为了使内容不再拥挤，一般用来撑开盒子的内容
18、padding三个值写法：上 左右 下
19、行内元素的高度和宽度由内容撑开，添加padding也不会撑开父盒子
20、外边距用来移动盒子
21、同级元素大胆使用margin,父子盒距离用父盒子的padding 去挤出来，如果父盒子宽高度固定，父盒子内减
22、行内元素使用margin和padding都可以可以挤出距离
23、注意：不要给行内元素添加上下padding和margin(没有价值 会有问题 影响布局)，添加左右padding可以。 块级元素继承的是父级元素内容区域的宽度，所以给父盒子添加左右padding的时候宽度也需要内减，如果给父盒子添加上下padding,高度需要手动内减
24、text-align：让内部的文本、行内元素、行内块级元素水平居中（给父元素添加）
25、margin: 0 auto; 让块级元素水平居中(给块级元素自己添加 只针对左右有效)
26、border中，border-style默认值是none,所以不能省略，其他都可省略
27、h系类标签虽然可以显示文字大小，但是他不继承，有默认大小
28、挤出文本的距离不仅仅可以用padding和margin还可以用text-indent(给块级元素添加不能给行内元素添加)
29、图片在盒子内居中可以将图片转块(图片有默认大小)，然后设置margin:0 auto;
30、看到相同列表中有不同的最好用div +a标签，而不用ul
31、块级元素默认会继承父级的宽度，所以想让块级元素水平居，需要设置块级元素的宽度
css第四天
1、silver 银白色 tan 茶色 brown 棕色
2、外边距合并：上下垂直方向的两个块级元素 上盒子有margin-bottom 下盒子有margin-top，会取最大值。
3、外边距塌陷：两个嵌套的块级元素，都有margin-top，那么这两个margin-top会合并，取较大值，作用于父级元素(解决办法：给父盒子添加一个padding-top或者border-top或者给父盒子写东西 或者给父级元素添加overflow:hidden;牛郎织女银河) 所以为了避免外边距塌陷所带来的问题，父子元素的距离尽量用父元素的padding去挤出来，然后内减，避免外边距塌陷；同级元素大胆使用margin(没有问题)
4、自动内减(自动减去所加的padding和border值)：box-sizing: border-box;后期可以写在通配符里面
5、text-indent只针对块级元素有效，而且里面必须是文字，或者盒子里面一定是文字，只针对文字有效
5、布局套路：初始化–>划分盒子–>写结构–>初始化盒子(写宽写高写背景写边框)–>摆放位置–>修饰细节
6、外盒模型：margin(不可以渲染边框);内盒模型：padding(可以渲染边框)
7、子盒子变小并且在父盒子里居中可以给父盒子添加padding 或者给子元素设置margin 或者 给子元素固定的宽度 然后居中
8、图片居中：可以将图片转块 margin: 0 auto; 或者在图片外面套一层div 然后 text-align: center;
9、行内块的问题：
本质上是文字，可以去掉空格(手动取消空格或者给body设置font-size:0;)
最致命的：行内块优先文字对齐(只要有一个文字发生变化或者一个盒子发生变化，全部都变化了，不利于复杂的布局)
行内块可自定义宽高
行内块和排成一排
行内块不设置宽高，由内容撑开
10、浮动(优先盒子对齐)：可以看作成是一种显示模式
浮动可以自定义宽高(意味着行内元素一旦浮动了 可以直接自定义宽高)
可以和其他浮动元素排成一排(块级行内都行)
浮动元素不设置宽高，大小由内容撑开(意味着块级元素一旦浮动了，宽度会收缩到内容的大小)
11、浮动的使用场景：有宽有高的盒子排一排(盒子一旦对齐之后 内部的操作不会影响其他的盒子)
12、float:left;贴父级左边 float:right;贴父级右边
13、浮动元素的居中：(margin: 0 auto对于浮动元素不起作用)没有属性可以直接让一个浮动元素居中，可以间接的给浮动元素找个爹，让他爹地居中（围魏救赵）
14、浮动的作用：
有宽又高的盒子排成一排(盒子内部的变化不会影响到其他盒子) 区别于行内块的优先文字对齐
一左一右的排版布局(一左浮 一右浮)
15、行高撑开盒子有风险 有误差
16、浮动：脱标(不占标准流位置，同级元素 要浮动 都浮动防止影响布局)
17、浮动细节：
浮动在内容区浮动，不会超出padding区域(包括div宽度的继承)
浮动元素装不下掉下来，以上一个浮动盒子的底线为标准，向左浮动，如果向左被卡住了，就从那边开始浮动(有人挡住就碰瓷)(当浮动的元素在一个特别奇怪的位置就可以给这个元素一个margin来测试)
右浮动会会颠倒盒子顺序
浮动压不住图片和文字(因为浮动最初的设定就是为了实现图文绕排)
18、存在父子盒子，子盒子设置margin-top，父盒子也跑下来了，是因为包含塌陷的原因。
19、盒子先写上下 再写左右
css第五天
1、variant(变化) transform(变换) line(行) spacing(间隔) align(排列) layout(布局) flow(流动) direction(方向)
2、脱标的元素撑不开父级元素
3、竖着的方向一定是标准流完成，横着的方向才可能是浮动
4、合理利用子代选择器减少代码量
5、浮动的问题:浮动的盒子撑不开父级容器，所以我们要清除浮动（清除浮动带来的问题）
6、如何清除浮动：
定高方法清除浮动(强行给父级添加一个固定的高度 弊端：高度写死 后续维护较为麻烦)
额外标签法清除浮动：在浮动元素的最的后面加一个块级元素，给这个块级元素设置属性为clear:both;注意(一定是块级元素)，一定添加在浮动元素的最后面（弊端，每一次清除浮动都会产生一个多余的标签 基本不用）
伪元素清除浮动：将固定的css代码复制到页面上来 ,给浮动元素的父级添加前面这个类即可（实际工作中使用最多）
.clearfix(选择器选择当前标签)::after {
content:’’;
display:block;
clear:both;
height:0;
visibility:hidden;
}
overflow:hidden;清除浮动(给浮动元素的父级添加)救命稻草(弊端：在有些场景上使用不了)
7、伪元素(不会单独出现)：在当前标签的内容的前面或者后面添加一个“标签”这个标签由css渲染 ，伪元素可以自己给自己css效果
选择器(当前标签)::before =>在当前标签的内容的前面添加标签(默认是行内标签)
选择器(当前标签)::after=>在当前标签的内容的前面添加标签(默认是行内标签)
.clearfix::after {
content:’’;（必写属性)
display:block;（伪元素是行内元素，但是清除浮动默认是块级元素）
clear:both;(核心语句)
height:0;（以防万一）
visibility:hidden;（隐藏掉 不需要展示在页面上）
}
伪元素是一个标签，在当前标签的内容的前面或者后面添加一个“标签”
默认是行内元素，可以转块
清除浮动之后也是默认变为块级元素 不能实现浮动元素的居中
8、版心：固定宽度且居中的盒子
9、使用背景图不会产生横向滚动条，用img图片>电脑分辨率的时候 就会产生横向滚动条
10、ps ctrl+k(打开首选项)–>拖拽图片到ps–>
11、实际工作中没有项目中没有任何中文的命名，包括图片路径
12、行内块优先文字对齐，默认有间隙，有宽有高的盒子排一排 浮动
13、养成加了浮动就给其父级清除浮动的习惯clearfix
14、3个盒子一排有相同距离，可以直接给中间的盒子加margin
css第六天
1、css3新盒子模型就是自动内减
2、伪元素由css渲染，所以js获取不到
3、双伪清浮动还可以帮我们解决外边距塌陷的问题:before就起作用了
4、定位自带吸盘，想去哪就去哪，并不会影响别人
5、position:static;一般配合js使用较多
6、ctrl+shift+i
7、相对定位微调元素，他虽然走了，位置依然会留白。，比如字穿线效果
8、mode模式 grid网格
9、脱标的特性：不占有标准流的位置；可以直接自定义宽高；如果没有自定义宽，宽度会缩小到内容的大小；auto对于脱标元素不起作用
10、行内块会带来幽灵节点
11、相对定位和浮动能共存
12、绝对定位元素水平垂直居中：margin(可以移动自身)
css3写法：transform: translate(-50%,-50%);让自身往左往上移动自身宽高的一半
13、固定定位：鼠标的移动对其没有作用(参照物：浏览器窗口对应的屏幕)
background-attachment:scroll/fixed;
14、针对外边距塌陷，如果大盒子是body,给body添加overflow:hidden是不能解决的
15、绝对定位的水平垂直居中，对固定定位依旧有效
16、实现搜索框的垂直对齐，可以用vertical-align: top;或者浮动
17、z-index(层级性:盒子与盒子之间谁盖住谁):和定位息息相关，控制定位元素之间的层级性
18、定位和定位之间的z-index;
19、在定位中，默认后渲染的定位元素盖住先定位的元素，父子都有z-index且值为auto，按父亲的算
20、边框合并实现细线表格：border-collapse: collapse;
21、盒子圆角（和边框没有关系）：border-radius: 左上 右上 右下 左下；
两个值：对角线
三个值：左上 对角线 右下
圆：半径为盒子的一半或者50%（正方形）
22、胶囊形(长方形)：半圆，短的边的一半(或者是贼大的高)
23、当margin四边都有距离时候，会以向左上为准向右下移动
css高级第一天
1、clip(剪) display(显示) margin(边缘) outline(轮廓) scroll(滚动控件)
2、元素的显示和隐藏有两种方式：
display:none/block/inline-block/inline;切换(不占位置隐藏实际工作较为常用 盒子完完全全不见了)
visibility:hidden/visible;(占位置隐藏)是典型的幕后工作人员
3、A:hover B(B为A的子元素)
4、绝对定位脱标：宽度坍塌到内容的大小(text-align:center就无法继承了)
5、overflow:控制内部元素溢出之后的显示方式
取值：visible(默认值 超出部分直接显示)/hidden(超出部分隐藏)/auto(如果内容超出了，自动产生滚动条，如果没有超出，则无影响)/scroll(不管有没有超出，都会有滚动控件 用的少)
6、overflow 清除浮动的局限性：
由于overflow:hidden天生会让超出盒子的部分隐藏当内部有元素定位时，并且定位的元素超出盒子本身的大小，定位的元素会被隐藏掉(如果超出部分隐藏，会影响效果),通用性没有伪元素好；(建议：如果浮动元素或者浮动元素的兄弟元素有定位，就别用overflow:hidden清除浮动了)
7、overflow:加给父元素 或者是文字的父元素，类似text-align;
8、overfllow:hidden 调错：浮动元素会上下相互影响，一旦上面的浮动元素高度超出了，会影响后面的浮动元素，此时，只要给父元素加overflow:hidden;就可以解决
9、BFC(纯理论 块级格式化上下文 css排版)：内部的盒子和外界完全隔离
解决外边距塌陷：两个块级盒子呈现嵌套关系；子盒子的margin-top会影响父级元素，给父元素添加了overflow:hidden(取值不为visible)/或者浮动/绝对定位/固定定位/行内块display:inline-block/display:table；就产生了BFC;将盒子的内部空间和外部空间完全隔离。这样就可以解决外边距塌陷
形成了BFC之后，会解决外边距塌陷问题，可以清除浮动(overflow:hidden(取值不为visible) BFC可以自动计算内部内容的大小(浮动的元素宽高由内容撑开) )
脱标的元素都可以形成BFC，内部元素对外界毫无影响
行内块也是BFC,但是文字对齐方式高于BFC的排列规则
BFC:内部的盒子和外界完全隔离(解决外边距塌陷)、可以自动计算内部内容的大小(清除浮动)
10、图片水平居中：text-align:center;
图片垂直居中：line-height = height(让文字垂直居中[有无文字均可]); vertical-align:middle;
vertical-align:middle(让图片和文字保持中对齐)(加给行内块元素):调整行内块和文字的对齐方式
11、表单元素和文字垂直居中：vertical-align:middle(加给行内块元素)
12、基线(一般针对英文)。不同的字体基线不一样
13、解决图片底部留白问题：图片和文字默认是基线对齐，基线与底线还有一小段距离(文字有没有都无所谓 因为在行内块旁边会有幽灵文本节点)
解决方式1：将图片转块(最棒的方法)
解决方式2：vertical-align: 取值不为baseline即可(要注意行高，行高贼大也会影响)
14、先排好；再向大盒子里仍；图片过大，默认底线对齐的方式会导致文字下来(行高决定文字的顶线和底线)
15、用行内块不保险原因之一，就是行高会引起问题
16、input的基线比较高，基本没有问题，除了textarea
17、实现未知宽高的盒子水平垂直居中(定位)(12课堂)
18、实现未知宽高的盒子水平垂直居中：在图片居中基础上将图片转换为行内块盒子 因为行高会继承，所以然后给行内块盒子添加一个行高（）
19、浮动能解决行内块元素的间距和对齐方式
20、箭头在右 1、定位 2、右浮动(前提a是行内元素) >font-family(宋体)
13、多行文本实现垂直居中的效果：将包裹多行文本的父级转化为行内块级元素，然后设置它的父级行高等于高，此时行内块继承了行高，所以给行内块单独设置一个行高覆盖掉父级的行高，设置行内块vertical-align:middle;（因为涉及到了文本 文本会继承行高）
14、图片实现垂直居中的效果：设置父级div的行高等于高，然后给图片加上vertical-align:middle;
15、图片底侧空白缝隙的原因是因为图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。导致图片底侧会有一个空白缝隙。解决的方法就是：给img vertical-align:middle | top| bottom等等。让图片不要和基线对齐。或者给img 添加 display：block; 转换为块级元素就不会存在问题了。
css高级第二天
iconfont.css说明(复习)
1、filter(过滤器) hover(徘徊) attribute(属性)
2、行内块和浮动一起，浮动起效果
3、精灵图三个必须属性：width;height;background
4、精灵图的取值必须是负值，直接将坐标系取反
5、盒子的背景图不一样 因为盒子大，图片小
6、精灵图优点：减少网络请求，降低服务器压力，提交效率
7、服务器：24小时不断电，不断网，有专门的人维护(电脑主机)
8、ip地址(域名网址)–>服务器
9、字体图标有点：容量更小；更加利于维护和修改
10、cursor：pointer(手)/default(箭头)/text(输入框)/(图片)url(),临时替换的样式;
11、outline:none;去掉表单元素选中之后的蓝色边框
12、resize:none;针对textarea,去掉文本域的自动缩放
13、行高对a标签也有用
14、li{$}*10;
15、因为图片默认是行内块元素，所以一般在图片外面套一个div，如果留白，可以给图片width:100%;height:100%;
16、common.css:头和尾/分页
17、ico图标：登录在线制作ico图标(放在根目录)，沾到head中
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
