前端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把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

你可能感兴趣的:(html,css,html,html5)