前端html和css基础知识

第一天

常用的浏览器和内核

1.谷歌（chrome）前端工程师必备

2.firefox 火狐

3.safari iphone ipad 苹果

4.IE/Edge微软

5.Opera 欧鹏

HTML骨架 都是双标签

​​

常用标签 段落标签

换行标签：单标签

​

大盒子 一行显示一个

​

小盒子一行可显示多个 图像标签 单标签 语法： 作用 ：展示图片 必不可少的属性src作用：指明图片的路径 alt 在图片不能正确显示的时候 显示1alt里面的提示内容 title 在鼠标移入的时候显示的提示文字，不管图片有没有显示都会出现 三标签 width height border cellspacing 单元格之间的距离 cellpadding 内容与边框之间的距离 路径 上一级../ 上两级 ../../ 以此类推 同级./

下一级/

链接标签

语法： 作用：从一个页面链接跳转到另一个页面或者页面的其他位置

必不可少 href 用来指定跳转目标 空链接#

target 窗口打开方式 _self默认值 当前窗口打开 _blank在新的窗口打开

锚点链接 ：配合id使用 例如

href里面跟着谁的id 就跳转到哪里

注释标签/特殊字符   空格符号 >大于号 <小于号

第二天

表格table tr 独占一行 三种列表（所有的标签都是独占一行的）

表单域 基本语法：

表单元素

表单控件 input表单元素： type值：text文本框；password密码框；radio单选框；checkbox复选框 了解：file 上传文件 ；button普通俺妞；搭配js去使用 submit 上传按钮，上传用户信息给服务器；reset重置按钮，可以把表单内容初始化；

属性： name可以给表单元素起名字，用于区分不同的表单元素，在单选按钮和复选框中必须给相同的 name值。 value可以用来设置输入框的初始值，还可以用来改变按钮的默认值。 placeholder 常用！！！ 用来提醒用户，这个表单用来输入什么值的，而且里面的内容偏灰，不占位置的。 checked 主要针对单选框和复选框，用来默认选中。 maxlength 用于控制文本框最大可以输入多少个字符。

label标签：作用：用来增加点击范围，提高用户体验

使用步骤：

1.把要转换为可点击的图片或者文字等其他元素，用label包裹，for=“名字”；

2.谁要被增加响应区域的表单元素，就给该表单元素加id=“名字”

下拉菜单 ：基本语法

默认选中的是第一个，通过selected修改默认选中

文本域：基本语法内容

第三天 css

css语法规范：1内部样式表记得写style 标签

2.选者器 {属性：值；属性：值}；

3.建议使用展开式，不要用紧凑式

选择器：作用通过选者器，选择出合理的标签

基础选择器：

1.标签选择器：根据我们HTML的标签名，直接进行选择；

优点：可以一次性选择相同的标签，统一设置样式；

缺点：不能够差异化选择

2.类选择器：给某一个或者多个标签，起一个类名（class），把这个类名选择出来，进行针对性的设置样式。

优点：能够进行差异化选择，还可以使用多类名就是说调用了几个类，他就有几个类的样式叠加，类名与类名之间通过空格隔开。

口诀：样式点定义，结构类class调用，一个或者多个，开发最常用

3.id选择器

口诀：样式#定义，结构id调用，只能使用一次，别人切勿使用；基础学习时期不建议使用id选者器，是和js搭配使用的。

4.* 通配符选折起

它可以一次性选择所有的标签，并且不需要调用

字体属性

color 设置文本颜色

预定义颜色值，red green blue skyblue....

十六进制 #fff #000 #6cf

rgb(0-255,0-255,0-255)

rgba(0-255,0-255,0-255,0-1)a取值为0，就是完全透明；a取值为1，就是完全不透明。

font-family 设置字体系列

1。一般结合font在body中设置，开发团队会有统一的要求

2.谷歌浏览器默认字体系列是 微软雅黑

font-size 设置字体的大小

1.比如font-size：16px；一定要跟px（像素）单位

2.谷歌浏览器默认字体大小式16px，最小字体是12px

font-weight 设置字体粗细

1.normal默认值===400 不加粗 ， 常用于h strong这些加粗的标签编程不加粗

2.blod加粗 ===700，常用于把普通不加粗的文字进行加粗

font-style设置字体

1.normal默认值 用于把em i这些倾斜的字体变为不倾斜 不常用

2.italic 倾斜 用于把正常字体变为倾斜的 不常用

font复合写法

1.font ：font-style font-weight font-size/line-height font-famil

(1)顺序不能随意改变

（2）必须要有font-size font-family

2.只能body里面设置一次，其他的地方不推荐使用

css引入方式

行内式（行内样式表）：

用style属性 来单独给某一个标签设置样式 基础学习时期不推荐使用

嵌入式（内部样式表）：

用style标签 放在title标签的下面，把css代码包裹起来，一般我们平时写案例的时候用

外联式（外部样式表）：

1.新建css文件 直接在里面书写css代码

2.通过link标签，把css文件和当前要引入他的HTML文件 关联起来

在实际开发中使用

文本属性

text-align 文本对齐方式 left居左 center 居中 right居右

注意：！！！只在独占一行的元素中起作用

text-decoration 文本装饰：

1.none 去除一些标签的默认文本修饰样式，一般用于去除a标签的下划线 最常用

2.underline 给某些文字添加下划线

3.line-through 添加删除线

4.overline 添加上划线

tex-indent 首行缩进：

1.具体的px数值 20px；

2.跟em，一个em就表示当前一个文字大小 text-indent：2em

line-height 行高 行间距：

1.文字在盒子内部垂直居中对齐 就用 行高=盒子的高度 一定要记得带单位

2.当不带单位时，数值是几，就表示当前文字大小的几倍

第四天

emmet语法

快速生成html结构

1.ul>li*5

2.dl>dt+dd*5

快速生成css

一般就是属性的首字母连携+tab（enter）

tac bgc bgi bgp bga w100+h100

后代选择器：语法 选择器1 选择器2 {样式代码}

1.选择器之间要用空格隔开；

2.最终选择的子元素，也就是最后一个选择器

子集选择器（亲儿子选择器）：语法：选择器1>选择器2{样式代码}

1.选择器之间用>链接，最后一个选择器不需要>;

2.最终选择的子元素；

3.只能选择亲儿子（亲儿子）

并集选择器 ：语法：选择器1，选择器2，选择器3{样式声明}

1.选择器与选择器之间要用英文逗号隔开，最后一个不需要逗号；

2.一次性选择多个标签（或者类名），一起书写相同的样式；

链接伪类选择器：

a:link选择所有未被访问的链接

a:visted 选者所有被访问的链接

a:hover 当鼠标移入的一个状态

a:active 当鼠标按下未抬起的状态

注意：

1.他们如果同时出现，必须按照LVHA( LOVE HATE LV包包好)；

2.：hover 它只是一个状态，所有的元素都会有鼠标移入的状态，所以所有的元素都可以使用

：focus 伪类选择器

主要是针对input标签 获取脚店（光标）时执行

input：focuus{样式声明}

元素显示模式

块级元素： 1.独占一行；

2.宽高。内外边距，边框可以直接设置；

3.如果不设置宽度，默认宽度就是父容器的宽度；

4.块级元素里面可以放任何元素；

5.p h最好用来存放文字或者行内元素，不要存放块级元素

行内元素：

1.一行可以显示多个；

2.宽高不能直接设置，但是内外边距和边框可以直接设置；

3.默认宽度就是内容本身的宽度；

4.行内元素只能存放文本或者其他行内元素

5.a标签里面不要再放a标签，在特殊情况下可以存放块级元素（转换为块级元素）

行内块元素 ：

1.一行存放多个，他们之间会有空白缝隙；

2.可以直接设置宽高

3.默认宽度就是它本身的宽度；

元素显示模式的转换：

转换为块级元素：display：block db

转换为行内元素：display：inline di

转换为行内块元素:display:inline-block dib

背景属性：

背景颜色 background-color bgc：

预定义，十六进制，rgb，rgba

背景图片background-image bgi

1.none 默认值 表示没有背景图片

2.url（图片路劲）

背景平铺background-repeat bgr

1.repeat默认值 平铺

2.no-repeat 不平铺

3.repeat-x 横向平铺

4.repeat-y 纵向平铺

背景位置 background-position bgp

1.方位名词x和y没有顺序

如果省略一个值，这个值就是居中（center）

2.精确单位 第一个值必须是x，第二个值必须是y 20px 50px

3.混合单位 第一个值必须是x 第二个值必须是y

如果只写了一个background-position：20px；第二个就是y值center

背景固定 background-attachment bga

1.scroll 默认值 背景图片跟随内容滚动

2.fixed背景固定 视差效果

背景复合写法 background

没有顺序，不需要的可以不写

约定顺序：bgc bgi bgr bga bgp

第五天

css的三大特性

层叠性：在有样式冲突的情况下，就近原则

继承性：简单理解：子承父业

优先级：

1.继承和通配符 *选择器 权重为0

2.标签选择器 权重为1

3.类选择器和伪类选择器 权重为10

4.id选择器 权重为100

5.行内样式 style=”“ 权重为1000

6.！important 权重为无穷大

注意：

1.优先级不能进位，类选择器的权重比标签选择器的权重要大；

2.继承的权重为0

盒子的组成部分 从里往外：内容padding border margin

边框border：

1.border-width设置边框的粗细

2.border-style 设置边框样式：solid实线，dashed虚线，dotted点线

3.border-color 设置边框颜色

推荐写法：

复合写法：border：1px solid #000；

边框会影响盒子的大小

内边距padding：

可以分别设置四个方向 padding-left padding-right padding-top padding-botton

复合写法：padding：10px；四个方向（上下左右）的内边距都为10px

padding：10px 20px；第一个值表示上下为10px，第二个值左右为20px

padding：10px 20px 30px；第一个值表示上10px，第二个值表示20px 第三个值表示下30px

padding：10px 20px 30px 40px；从上开始的顺时针方向，上右下左

padding也会影响盒子的实际大小，但是在块级元素没有设定

width属性的时候，就不会撑大盒子的宽度

内减模型/边框盒子模型：

语法：简写bx box-sizing：border-box

box-sizing：content-box；默认值 初始给盒子设置的宽高其实是给内容设置的

，边框和内边距都会影响盒子的实际大小

box-sizing：border-box；内减模式：我们初始给定的宽高是给一整个盒子的，边框和内边距都不会影响盒子的实际大小。初始设置的是多大，那么这个盒子一直是多大

外边距margin 用法：和padding完全一致

让块级元素水平居中：

1.盒子必须要有宽度；

2.左右的外边距设置为auto;,argin:auto;margin:0 auto;

相邻垂直块级元素外边距合并：

引起上面的块级元素给了margin-bottom下面的块级元素又给了margin-top，这个时候他们之间的距离取得是最大值；

解决：只给其中一个盒子设置外边距

1.给父元素添加上边框；

2.给父元素添加上内边距；

3.给父元素添加overfl：hidde

清除内外边距：作用：为了清除标签自带的默认边距

*{

/m0+p0+bx/

margin：0；

padding：0；

box-size：border-box；

}

第六天

综合案例思路：

1.画最大的盒子；

2.把盒子通过css摆放到正确的位置；

3.如果盒子里面的内容左右排版的话，从左到右依次写下去；如果盒子的内容上下排列，从上往下写

圆角边框border-radius bdrd

画圆形：

1.盒子必须是正方形；

2.border-radious：边长的一半或50%；

画圆角矩形：

1.盒子必须是长方形；

2.border-radius：高度的一半

1.border-radious：10px；表示左上 右上 右下 左下 四个角的圆角都为10px；

2.border-radious：10px 20px；第一个值表示左上和右下圆角为10px，第二个值表示

右上和左下圆角为20px；

3.10px 20px 30px 第一个值表示左上10px，第二个值表示右上和左下为20px，第三个值表示右下为30px

4.10px 20px 30px 40px 从左上开始，顺时针方向 左上 右上 右下 左下

盒子阴影 box-shadow bs ：

1.box-shadow：2px 2px 2px 2px rgba（0，0，0，0.3）

第一个值表示x轴偏离，第一个值表示y轴偏移，第三个值表示阴影的模糊程度，值越大越模糊，第四个值表示阴影的大小，值越大阴影就越大

2.默认就是盒子的外部阴影，但是outset千万不要写在属性值中，否则属性就会失效

3.inset 内部阴影 非常少见，了解即可

4.一般会在浏览器中调试阴影 进入检查，点开属性值前面的小层叠盒子

文字阴影 text-shadow ts：text-shadow： 2px 2px 2px rgba（0，0，0，0.5）x y 模糊程度 了解

浮动：

语法：float：left right

特点：

1.浮动的元素会脱离标准流（脱标），他就会不再保留原来的位置，并且浮动的元素会压住标准流的盒子；

浮动的元素遇到边界才会停止，浮动的盒子之间中间没有空隙；

2.浮动的元素可以一行显示多个，保持顶部对齐；

3.浮动的元素具有行内块元素的某些特性

可以直接设置宽高；

默认的宽度就是内容的宽度

注意事项：

1.所有的元素都可以添加浮动，只要是添加了浮动，就会具有上述浮动的特性；

2.浮动的元素不会前面的标准流，只会影响后面的标准流；

3.在影响了布局，就需要清除浮动

清除浮动：

（1）额外标签法

1.要在最后一个浮动的元素后面添加一个块级元素；

2.给这个添加块级元素设置clear：both；实际开发中 不推荐使用。产生了很多额外的标签

（2）给父盒子添加overflow：hidden 不推荐使用，他会导致溢出隐藏

（3）单伪元素清除浮动：

.clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } 大厂使用中：百度，网易...

（4）

双伪元素清除浮动： .clearfix::before, .clearfix::after { content: ''; display: table; }

.clearfix::after { clear: both; } 大厂使用中：小米

一般实际工作中用的都是伪元素清除浮动，两者选其一，都是给clearfix这个类名，浮动的元素的亲爸爸（

（最近一级父元素）进行调试

第八天

定位组成：

1.定位模式+边偏移

2.定位模式：用于指定定位元素的定位方式。通过position属性设置

3.边偏移：根据定位模式确定最终的位置，通过top，bottom。left，right四个属性设置，

一般用两个就可以确定位置

相对定位 relative ：

1.相对定位对于元素自己原来的位置（自恋型）

2.相对定位不会脱离标准流，原来在标准流的位置继续保留，后面的盒子依然以标准流的方式对待它

绝对定位 absolute ：

1.如果父元素有定位（相对，绝对，固定），相对最近一级有定位的父元素来

来移动位置的

2.如果没有父元素或者父元素没有定位，他就相对于整个浏览器文档移动

3.会脱标，不在占有原来的位置

子相父绝：

子元素使用绝对定位，父级元素使用相对定位；

父级他一般是占用位置，所以给绝对和固定都不可以，只有给相对定位。

固定定位fixed ：

1.相对于浏览器的可视窗口来移动，和父元素没有任何关系

2.会脱标，不占有原来的位置

固定位置小技巧--让盒子固定到版心的右侧:1.lift:50%;2:margin-left:版心宽度的一半

粘性定位sticky 他是即占位置（相对），当移动到满足条件的边偏移量，就会变成固定定位

定位拓展：

定位的叠放顺序z-index ：

1.数值是正整数，负整数，0，auto（默认值），数值越大，层级越高；

2.数值相同或者都没有设置z-index，后来者居上；

3。数值后面不要带单位；

4.只有定位的盒子才有z-index属性

绝对定位水平垂直居中：

水平居中：

1.lift：50%；

2.margin-left：自身宽度的一半

垂直居中：

1.top：50%；

2.margin-top：自身高度的一半

绝对定位完全压住下面的内容，不管是不是文本；

浮动就不会压住文字，因为它产生的目的就是用来做文字环绕图片的效果

显示与隐藏display：

1.display：none；隐藏元素，同时该元素不会占有原来的位置；

1.display：block；除了可以将盒子转换为块级盒子以外，最主要的是用来显示；

visibility：

1.hidden 隐藏元素，但是还是会保留原来的位置；

2.visble 显示元素

3.重点：记住hidden和display：none；的区别

overflow：

1.visble ：不剪切内容也不生成滚动条；

2.hidden 溢出的部分，给你剪掉。溢出隐藏

3.scroll 直接生成滚动条，不管内容超不超出

4.auto 自动生成滚动条，只有超出了才会有滚动

5.在mac下，scorll和auto 都是自动生成滚动条

第九天

精灵图：

精灵图核心使用：

1.在合适的盒子之中，插入大的精灵图，并设置不平铺

2.通过bgp去调整精灵图的位置，注意都是负值

字体图标：

主要用于网页中通用，常用，结构样式简单的小图标

本质：显示的图标，核心本质就是文字，文字的样式都可以给字体图标设置

字体图标下载库：

1.icomoon 国外网站，加载速度慢一点

2.iconfont 阿里妈妈字体图标库

使用：

1.去官网下载，将下载来的安装包解压出来；

2.把fonts文件夹放在你的项目文件夹的根目录；

3.去找到解压出来的style.css第一个完整的{}，复制出来放入想要使用字体图标的文件之中；

4.用盒子去装[]，再去给这个盒子声明字体系列为你所使用的字体图标库。

简单使用（实际开发中的使用）：

1.把fonts文件夹和style.css 文件都放入你的项目的根目录中；

2.用link引入style.css;

3.给一个空盒子使用双类名：第一个类名声明字体图标库比如icomoon，

第二个类名就是要使用的图标完整类名

追加字体图标：

1.上传你解压出来的selection.json;

2.接着继续添加你想要的字体图标；

3.后面和上面的步骤一样

css画三角：

等腰三角形：

1.指定盒子的宽高，字体，行高为0；

2.用borfer绘制一个有粗细的透明边框

3.根据你想要的三角形方向，去给对应的边框单独设置颜色

京东三角形（普通的直角三角形）；

width：0；

height：0；

font-size：0；

line-height：0；

border-color:transparent #fff transparent transparent;

border-style:solid;

border-width:22PX 10PX 0 0;

都是用到子相父绝

用户界面样式：

cursor 设置鼠标样式：

default 小白 默认

pointer 设置为小手，示意可点击 最常用

move 移动，表示可移动，可拖拽

text文本

not-allowed 禁止，提示用户不可再点击

outline：none 取消input获取焦点边框

resize：none 文本框textarea 让他不可改变大小

vertitcal-align 设置图片和行内块元素与文本对齐的方式：

注意：块级元素不会生效

baseline 默认值，基线对齐

top 顶部对齐

middle 居中对齐 最常用

bottom 底部对齐

除了默认值，其他的都可以用来消除图片下面的空白缝隙

单行文本溢出用省略号表示：

强制在一行显示文本，默认normal 会自动换行：white-space：nowrap；

超出的部分隐藏：overflow：hidden；

文字用省略号代替超出的部分：text-overflow：ellipsis；

多行文本用省略号表示：

1.超出的部分隐藏：overflow：hidden；

2.文字用省略号替代超出的部分：text-overflow：ellipsis；

3.弹性伸缩盒子模型显示：display：-webkit-box；

4.限制在一个块元素显示的文本行数：-webkit-line-clamp：2；

5.设置或检索伸缩盒子的子元素的排列方式：

-webkit-box-orient：vertitcal；

不需要掌握，因为有严重的兼容性，一般让后台去控制

属性选择器：可以根据元素属性来选择元素，属性语法选择器

根据文档结构来选择元素，常用于选择父级选择器里面的子元素

E:first-chid 匹配父元素中的第一个子元素E

E:last-child 匹配父元素中的最后一个子元素E

css初始化

写一个完整的案例或者页面所必须的

第十一天

h5新增语义化标签

header 头部标签

nav 导航标签

article 内容标签

section 块级标签

aside 侧边栏标签

footer 尾部标签

结构伪类选择器：

first-child 匹配父元素中的第一个元素

last-child 匹配父元素中最后一个元素

nth-child（n） 匹配父元素中的第n个子元素

first-of-type 指定类型的第一个

last-of-type 指定类型的最后一个

E:nth-of-type 指定类型e的第n个

• 结构伪类选择器一般用于选择父级里面的第几个孩子

• nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配

• nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子

• 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式

• 如果是无序列表，我们肯定用 nth-child 更多

• 类选择器、属性选择器、伪类选择器，权重为 10

nth-child（n）：

2n 偶数

2n+1 奇数

5n 第5 10 15....

n+5 从第5个开始（包含第五个）到最后

-n+5 前5个（包含第五个）

伪类元素选择器：

：：before 在元素内部的前面插入内容

：：after 在元素内部的后面插入内容

1.before和after 必须有content属性

2.berfore 在内容的前面，after在内容的后面

3.before和after 创建一个元素，但是属于行内元素

4.因为在dom里面看不见刚才创建的元素，所以称为伪元素

5.伪元素和标签选择器一样，权重为1

6.单标签无法生成伪元素，只有双标签才有伪元素

7.js无法获取伪元素

第十二天

新增语义化标签：

header，footer,nav,aside,article,section

新增多媒体标签：

video视频标签：

src路径

source标签 引入多个格式的资源文件

loop 循环播放

controls 播放控件

autoplay 自动播放 谷歌浏览器需要添加muted属性才能够自动播放

muted 静音

poster 视频封面

preload 预加载

audio：视频标签

src路径

source标签 引入多个格式的资源文件

controls 播放控件

loop 循环播放

autoplay 自动播放 需要js才能实现

muted 静音

preload 预加载

新增表单type ：

表单验证：

1.前端初步验证用户输入内容的合法性

2.非空验证

email,url,date,week,time,month,color,munber,tel,search

number,tel在移动端可以弹出数字软键盘

search 点击叉叉可以清空当前内容

表单属性：

placeholder：占位符 input：：placeholder{}

disabled :禁用表单，cursor:not-allowed(禁止选中)

【disabled】 {

cursor:not-allowed;

}

disabled 一般是和禁止选中一起用的，用的是属性选择器

required 必写属性

autofocus 自动获取焦点

autocomplete 自动填充表单：on和off （ctel+shift+del 高级 清除）

multiple ：< input type="file" multiple> 多文件上传

属性选择器：

[属性名]

[属性名^=“属性值”] 以。。开始

[属性名$="属性只"]以...结束

[属性名*=“属性值] 只要有。。

权重10

伪元素选择器 ：

：：berfore

：：after

只有双标签有：：before和 ：：after

必写属性content

行内元素

权重为1

伪类结构选择器：

li：nth-child(7) 第七个个li

li:nth-child(7n) 选中7的倍数li

li:nth-child(2n)和li:nth-child(even) 是偶数

li:nth-child（2n+1）和li:nth-child(odd)是奇数

li：nth-child(n+3) 从3到最后

li：nth-child（-n+3）从开始到3

：first-child 第一个孩子

：last-child 最后一个孩子

匹配类型的机构伪类选择器 ：

非列表结构/自定义列表结构

：nth-of-type()

:first-of-type()

:last-of-otype()

权重为10

滤镜 filter ：

1.blur 模糊，大于0的px，值越大越模糊；

2.grayscale 灰度，0-1， 0%-100%， 数值越大越黑白

计算器属性 calc（）：

1.支持四则运算

2.单位会参与运算

3.运算符前后必须加空格

透明度 opacity：

0 -1

1.容器内部的元素和内容都会添加透明效果

2.添加过度可以实现淡入淡出的效果

过渡：

transition:过度属性 时间 延迟时间 速度曲线

过渡属性：

width,height,transform,background-color,用逗号分隔多个属性过度

transition:width 2s,height 10s,transform 1s;

默认值 all

不能参加过度的元素显示和隐藏

过渡时间：

s，ms,1s=1000ms , 必须要写

延迟时间：s,ms

速度曲线：ease默认 linear匀速运动

注意 提前加给要变化的元素身上，尽量不要加载：hover上

2d变换/转换 ：

二维坐标系：

1.水平向右x轴的正方向

2.垂直向下y轴的正方向

行内元素设置无效

移动：

1.transfrom:translate(x,y)

2.transform:translateX(x)

3.transform:translateY(y)

4.参考自身原来的位置移动

5.设置百分比的时候也是参考自身尺寸计算

6.之前的位置保留

7.不会影响其他的盒子

旋转：

1.transform: rotate(deg);

2.正值顺时针负值逆时针

缩放：

1.transform:scale (x,y);

2.transform:scaleX(x);

3.transform:scaleY(y);

取值范围：

0-1缩小的倍数

大于1放大的倍数

更换转换原点：

1.transform-origin: x y ;

2.默认值center

3.如果只设置一个值 另一个值默认为center

4.方位坐标 left，center,right,top,bottom

5.具体像素

6.混合单位 center 20px;

多个转换的连写：transform：translate（100px）rotate（10deg）

第十二天

动画：

动画·和过度的区别：

1.动画可以执行多次，并且声明溢出动画可以多次调用，可以自动播放，反向播放。

2.过度需要配合：hover才能实现的效果

定义动画序列，声明动画、定义动画的关键贞：

@keyframes 自定义动画名称 {

from {

}

to {

}

}

@keyfrom 自定义动画名称 {

0% {

}

50% {

}

100% {

}

}

调用动画：

动画名称:

1.必写

2.和声明动画中的名字一至

单次动画执行时间 ：s,ms必写

动画播放次数：

1.数字

2.常用infinite 无限次

速度曲线：

1.ease 默认

2.linear 匀速

3.steps（数字）逐帧动画，分几步执行动画

首次播放动画延迟：s，ms

是否反向播放：

1.normal 默认

2.alternate 反向播放

动画结束停留位置：

1.默认backwards 回到起始位置

2.forwards 结束结束位置

动画暂停 animation-play-state：

1.running 默认播放

2.paused 动画暂停，配合：hover{}使用

3d变换：

透视，景深，视距 perspection :

1.300px-1200px

2.安排一只眼睛去观察页面中的元素

3.加·给父元素 子元素获得透视

3d移动：

transform:translateX();

transform:translateY();

transform:translateZ();

transform:translate3d(x,y,z);

3d旋转：

transform:rotateX();

transform:rotateY();

transform:rotateZ();

transform:rotate();

transform:rotate3d(x,y,z,角度)：自定义轴旋转，前三个值代表一个右方向的量，决定自定义轴

左手定则：大拇指指向轴线的正值方向，四指弯曲的方向为正值旋转的方向

3d呈现：

transform-style:preserve-3d,开启子元素的3d环境

第十四天

flex布局：

原理：

1.给父元素设置display：flex属性，所有的子元素当成flex项目。会在一行上显示。

2.如果想控制子元素的位置，我们需要给父元素添加display：flex

3.当父元素设置乐display：flex之后，所有的子元素都可以设置宽度和高度，并且在一行上显示（默认不会换行），如果子元素不设置宽度和高度的话，默认宽度由内容撑开，默认的高度和父元素等高。

父元素的属性 ：

flex-direction:

1.控制主轴的方向

2.row默认，从左到右

3.column 从上到下

4.row-reverse 从右到左

5.colimn-reverse 从下到上

flex-wrap：

1. 控制子元素是否换行

2. nowrap 不换行

3. wrap 子元素一行显示不下的时候才会生效。

justify-content :

1.子盒子在主轴的排列方式

2.flex-start 默认主轴开始

3.flex-end：主轴结束

4.space-between ：两端对齐，子盒子之间间隔都相等

5.center 居中

6.space-around：每个项目两侧的间隔相等。

7.space-evenly 子元素间隙完全相同

align-items:

1.单行子盒子在侧轴上的对齐方式

2.flex-start 侧轴开始

3.flex-end：侧轴结束

4.center：居中

5.stretch 拉伸（默认值）

align-content :

1.多行侧轴对齐方式

2.注意：必须要和flex-wrap：wrap；一起使用

3.strech 拉伸 默认

4.flex-satrt：侧轴开始

5.flex-end:侧轴结束

6.center：居中

7.space-between：两端对齐，侧轴之间的间隔平均分布

8.space-around：侧轴之间的间隔平均分布

复合属性：

1.flex-direction和flex-wrap

2.没有顺序限制

3.用的较少了解即可

子项的属性：

flex：

1.份数

2.设置给子项之后可以瓜分剩余空间

3.如果每一个子元素都设置为1那么就是平分剩余空间

order：

1.子元素的排列顺序

2.默认0

3.数值越小越靠前

align-self

指定某一个子元素在侧轴的排列方式

flex-satrt：侧轴开始

flex-end:侧轴结束

背景渐变 线性渐变：

1.background-image：linear-gradient(方向，颜色，颜色)

方向：

1.不写默认为从上到下

2.方位名词：to left 从右到左；to left top 从右下到左上

3.角度

1.0deg 从上到下

2.90deg 从左到右

注意：如果从上到下 让body渐变 要给body和html都要设置100%的高度

第十五天

移动端的适配

公式：要书写的rem值= 测量出的尺寸 / 设计稿的根字体大小 less+媒体查询+rem适配

flexible.js+ px to rem适配：

1.引入flexible.js

2.设置根字体大小上下限

3.利用 px to rem 插件 alt+z实现快速转换

不需要转换成rem单位的情况

1.html 和 body中的数据不需要转换

2.一些一两px的边框也不需要转换

3.模糊程度 滤镜 阴影

4.小圆角 三四个像素的小圆角不需要转换

单位

相对单位：

em：参考当前容器的字体大小经行计算

text-index:2em

rem 参考html的fint-size进行

%

vh 1vh = 视口高度的1%

vw 1vw=视口宽度的1%

绝对单位 ：

px ， s ，ms ，deg

媒体查询：

查询访问当前网页的媒体设备类型以及特性

语法：

@media screen and （width ： 100px）{

选择器 {

}

}

注意 ： and前后一定要加空格

width： 100px后面没有分号

如果要是有多个查询条件 用and分隔

如果要是有多个查询条件 用and 分隔

@media screen and （min-wdith ：100px）and （max-wdith：500px） {

选择器 {

}

}

css的预处理语言 ：

常见的css 预处理语言 ： less，sass，stylus

浏览器不认识css预处理语言的

编译：

1.vscode插件Easy Less

2.less文件编译成css文件在同级目录

3.每一次保存less文件的时候，css中的内容都会重写

4.当less 有语法错误的时候，不会选择编译

变量：

1.变化的量

2.一般来说，变量定义在less文件的顶部

语法 自定义的变量名：值

注意：必须用@开头

自定义的变量名要符合命名规范

结尾必须带分号

调用：在需要调用的地方直接调用即可 width：@long

嵌套：

.box {

.son {

}

}

.box .son {}

伪类伪元素需要使用&去掉多余的空格

a {

&:hover {}

}

运算：

1.支持四则运算

2.除法运算注意 把/换成./ ;[推荐]用（）小括号把算式包裹起来

3.单位不参与运算 如果多个单位参与运算，最后结果的单位取算式中的第一位

注释：

单行注释：

1.//注释内容

2.ctrl+ /

3.不会将这种注释编译到css文件中

多行注释：

1./* 注释内容 */

2.ctrl+shift + / Sublime Text Keymap and Settings Importer

3.会将这种注释编译到css文件中

导入：

1.//通过less导入语法可以导入另一个less文件

注意：

1.@import 开头 并且后面一定要带空格！！！！

2.结尾一定要带分号

3.引入的文件必须位less文件 不能引入css文件

4.less的后缀名可以省略

第十六天

响应式开发原理

就是使用媒体查询针对不同屏幕宽度的设备经行布局和样式的设置，从而适配不同设备的目的

设备的划分情况：

• 小于768的为超小屏幕 （手机）xs

• 768-992之间的为小屏设备（平板）sm

• 992~1200中等屏幕（桌面显示器 ）md

• 大于1200的屏幕宽度 （大桌面显示器）lg

Bootstrap 提供了一套响应式，移动设备有限的流式格栅系统，随着屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

• 按照不同屏幕划分为1~12等分

• 行（row）可以去除父容器作用15px的边距

• xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大；

• 列（column）大于12，多余的列column 所在的元素将被作为一个整体另起一行排列

• 每一列默认有左右15像素的padding

• 可以同时为一列指定多个谁不的类名，以便划分不同份数 例如calss=“col-md-4 col-sm-6”

栅格嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*

  

    

         
小列
         
小列
    

​

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）

      
1
      
2
  

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易改变列（column）的顺序

      
左侧
      
右侧
  

.hidden-xs 在超小屏幕中隐藏

.visible-xs 在超小屏幕中显示

补充知识

倾斜 skew

transform: skewX( deg)

让元素按照一定的角度倾斜

背景原点

background-origin:border-box;

背景图片靠近盒子边框处

background-origin:paddin-box;

背景图片靠近盒子内边距处

background-origin：content-box；

背景在盒子的内容部分

背景裁切

background-clip : border-box ;

是靠着边框显示图片

background-clip： padding-box；

靠着内边距显示

background-clip： content-box；

内容部分裁切

background-text ：text；

在文字区域裁切，文字要设置半透明 transparent

background-size:背景的大小

3.1物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334

我们开发时候的1px 不是一定等于1个物理像素的

一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放

Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

通常使用二倍图， 因为iPhone 6 的影响背景图片 注意缩放问题

3.2 背景缩放background-size

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

单位： 长度|百分比|cover|contain;

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域