第一阶段复习总结

第一阶段复习总结

html(超文本标记语言)

模板<!Doctypehtml>必须放在第一句，是H5文档的声明，告诉浏览器以哪个规则解析文档避免怪异模式

告诉浏览器以哪种字体集进行解析源码

浏览器 内核 私有前缀

chrome webkit-blink -wenkit-

safari webkit -webkit-

firefox gecko -moz-

IE trident -ms-

opera presto -o-

html标签分类

块级标签（div p ul li dl dt ）

独占一行，可以设置宽高，内外边距，大小由自身决定，行高可以撑开盒子

行内标签（span a em i b strong）

默认宽高取决于内容，设置宽高不起作用，并排一行显示，自动换行，行高不可以撑开盒子，但会使盒子移动，中间有默认间距，设置上内边距会溢出，上下外边距无作用，左右可以

行内块标签（img input）

宽高由本身决定，可设置宽高，并排存在，有文字间距文字特性，行高不起作用，内外边距均可起作用

标签类型转换

disply:inline 转为行内类型标签

disply:block 转为块级类型标签

disply:inline-block 转为行内块类型

传统盒模型

可视化区域+内边距（padding）+边框(border)+外边距（margin）（设置边框，内边距时需要内减）

边距设置（上右下左顺时针）单独一个数值表示四边都设置

外边距塌陷问题（父子嵌套塌陷，兄弟上下塌陷）共用外边距产生问题

父子嵌套塌陷解决

给父元素加上边框，上内边距；加overflow:hidden属性；

兄弟上下塌陷

利用BFC规则给盒子加上overflow:hidden属性；套一个父盒子，市父元素成为BFC盒子

BFC规则

块级格式化上下文，形成一个独立的渲染区域，盒子内部不影响外部，外部不影响内部

触发BFC规则：

float不为none

position为absolute和fixed

disply为inline-block

overflow不为visiable

html根标签

BFC具体规则：

BFC盒子内部便签按照从上到下，从左到右排列

BFC盒子内部浮动便签也要参与高度计算

BFC盒子与浮动元素不重叠

BFC盒子内外部互不影响

BFC规则解决问题;

外边距塌陷问题；浮动特性，清除浮动影响；文字环绕问题

利用传统盒模型的边框特点，边框相交处出现交线，设置三条边框颜色为透明，width,height设置为0，利用盒子边框可以出现三角形（border-width,border-style,border-color）,利用定位属性将两个三角形定位压盖可以实现一个小箭头。

浮动，定位

在元素布局时，浮动实现元素的并排显示，定位实现元素的掩盖显示

浮动属性：float-left/right/none

浮动引起父元素的高度塌陷，影响与父元素同级元素的排列。

清除浮动产生的影响：

给父盒子加上overflow:hidden属性；利用伪元素::after清浮动（content,disply,clear）

清浮动的属性只能加在直接父元素身上才起作用

定位（子决父相）

静态定位（默认属性）

相对定位（relitive）:参考自身左上角，不适合布局，移动会产生留白（占据原来位置），不脱标准流

绝对定位（absolute）:参考父级带有相对定位属性的元素，就近原则，以父级元素的左上角为参考，向父级元素里面定位，定位值为正值，反之为负值，适合布局，脱离标准流

固定定位（fixed）:默认以视窗左上角为参考，固定显示，形成导航栏压盖

定位层级：z-index:n 层级数越高越靠上显示，层级为-1则被压盖不能显示，不脱标时层级默认为0，结构越靠下默认层级越高。

利用定位实现盒子的居中显示（必须知道盒子的具体宽高）（子决父相）

子元素：position:absolute

​ left:50%

​ top:50%

​ margin-left:-自身宽度的50%

​ margin-top:-自身高度的50%

​ position:absolute

​ left:0

​ top:0

​ right：0

​ bottom:0

​ margin:auto

​ position:absolute

​ left:50%

​ top:50%

​ transform:translate(-50%,-50%)

html文字属性

字体颜色；color

font-style(normal,italic)/weight(100-900)/size/family(楷体宋体)

text-align（left，right，center）/indent(缩进字符)/decoration（none,underline下划线,line-through中划线）

line-height(行高）单行字体垂直居中，盒子高度=行高

以上都为可继承属性

单多行字体省略号;

单行

whit-space;nowarp

overflow;hidden

text-overflow;ellipsis

多行文本溢出

div{

width:200px; /* 限定盒子的宽度 */

display:-webkit-box; /* 将对象作为弹性伸缩盒子模型显示*/

-webkit-line-clamp:3; /* 用来限制在一个块元素显示的文本行数*/

-webkit-box-orient:vertical; /* 设置或检索伸缩盒对象的子元素的排列方式*/

overflow:hidden; /给元素设置溢出隐藏/

text-overflow:ellipsis; /文本溢出显示省略号}

伪元素显示

div:after{

​ content: ‘…’;

​ position: absolute;

​ right:0px;

​ bottom:0px;}

html表单

form (name action=后台相应接收信息地址 method=post/get)

input type :text password radio checkbox file submit number tel url date email

radio单选框name一定要相同名字

所有input元素有默认边框，默认轮廓（outline）

textarea文本域（用来写文字resize可以自动改变文本域的大小）

select;option下拉表单和显示option个数

弹性盒子

display;flex(拥有主轴，交叉轴特定的元素对其方式，可以改变主轴交叉轴的方向进行补救展示)

主轴默认向右，交叉轴默认向下（flex-direction改变主轴方向）

主轴对齐方式；start/end/center/spacing-between/around/evenly

交叉轴对齐方式：start/end/center/baseline(基线对齐)/stretch(等高布局)

flex-wrap;warp/nowarp多行显示

布局方案

圣杯布局，双飞翼布局

新型盒子box-sing;borderbox;盒子设置边框和内边距时不用再内减会自动内减

流式布局：大盒子用%小盒子用px，图片大小%文字px

rem布局：盒子宽度%，盒子高度rem 设置html标签字体大小，1rem=100px font-size

视口布局；width100vw ,height:100vw;根标签字体大小设为13.3333vw

响应式布局；一套项目代码可以再不同的设备上进行显示，展现出不同的布局和交互的方式

原理就是媒体查询与流式布局的结合，媒体获取不同的屏幕大小，显示不同的布局方案

响应式布局；优点维护成本低，开发周期短，用户好感度高

缺点；在移动端也要加载pc端的样式代码，图片资源，界面加载速度慢，不适合复杂交互项目

html5新属性

语义化标签

语义化好处：

有利于seo，在没有css的前提下可以显示清晰的代码结构，可读性高，方便团队协作开发

新增音频视频标签，不在用flash网站加载更好

CSS层叠样式表

三种引入方式

行内引入，只对当前元素起作用，冗余高可读性低，优先级高，适用于覆盖样式，js操作

文本内嵌入，冗余减少，结构清晰，好维护，覆盖公共样式写在head标签里style

外部链接引入，link引入到当前文件，单独编辑结构性好优先级低

行内>文本嵌入>文本外部链接

css选择器

*{}全局选择器，匹配HTML标签在内所有元素

#id{}id选择器，匹配唯一标识的一个元素

.{}类名选择器，匹配拥有此类名的元素

targetname{}标签名选择器，所有此标签元素

结构伪类选择器 父子结构，相当于类选择器

E:first-child 选择父元素的第一个子元素

E;nth-child(n) 选择第n个子元素 n=even第偶数个元素；n=odd第奇数个元素；n=-n+3前三个元素；n=n+6后6个元素

E：last-child 选择最后一个元素

E;nth-of-type 父元素中第那个为E的元素，有过滤属性

表单类型选择器

input foucs/checked/completed/…

属性选择器 相当于类选择器

[class] 拥有class属性的选择器

[class=“s”] class为s的元素

[class*=“s-”] 包含s-开头的元素 s-=“icon-”

[class^=“s-”] 以s-开头的元素

[class$=“a”] 以a作为结尾的元素

伪类选择器

::after/::before a:hover::before 紧贴使用

/* 鼠标移入a找到a的after伪元素 */
.a:hover:after {
color:gold;
}

css透明度；圆角边框；盒子字体阴影；iconfont图标

透明度

background-color rhba(0,0,0,0)背景透明文字不透明 0-1表示透明度

opacity:(0-1) 1不透明，0完全透明

显示与隐藏属性

display:none 隐藏，消失不见且不保留原来的位置；block进行显示

visibility:hidden隐藏，保留原位置，visible显示

元素的宽高字体大小行高属性全都为0，实现消失

负的margin值，实现元素在界面上消失

定位属性，定位到视窗之外实现消失

利用overflow:hidden属性，将子元素从父元素中移动出去，实现隐藏

圆角边框

border-ridius:50%实现圆形，npx实现小小的圆角边框，左上，右上，右下，左下四个角顺时针

盒子阴影，文字阴影

box-shadow: h-shadow v-shadow blur size color inside

​ 水平阴影 垂直 模糊距离 阴影大小 阴影颜色 盒子内阴影

​ 0px 0px 3px 3px #000 默认外部阴影

text-shdow: h-shadow v-shadow blur

​ 负值出现在上左，正值出现在右下

icon-font iconfont.cn 图标库，进行在线或者下载使用，一些字体标签小图都可以用这个

css背景属性

多背景属性 bg-img url，url，url

​ bg-repeat no-repeat/repeat

​ bg-size npx,npx,npx

​ bg-position center,left,right,bottom

背景图初始放置位置 bg-orgin;ocntent-box 初始在有效内容区

​ padding-box 初始在内边距区域

​ border-box 初始在边框区

背景图溢出剪切 bg-clip ：content-box 溢出有效内容区的直接剪切掉

​ bg-size:cover图片铺满整个盒子，但是图片可能会不完整显示

​ contain图片会完整显示但可能会有留白

背景渐变 bg-image : liner-gradien线性渐变（渐变方向，颜色，停止位置，颜色2，停止位置）

渐变方向可以是（top，left,right,bottom)也可以是（0deg-180deg）

​ bg-image；radiol-gradient径向渐变（形状，大小，渐变中心位置，颜色1，位置，颜色2，位置）

渐变文子

bg-image letter-spacing color;rgba(0000) -webkit-backg-clip:text 实现文子的渐变色

CSS过度和动画

实现页面的动态特效

过度：transition:要过渡的属性名字 过渡的时间 运动的曲线 延时时间0s;
transition-property:要过渡的属性名字 width ;
transition-duration:1s
transition-timing-function:ease/linear/ease-in/ease-in-out/ease-out;
transition-delay:1s

多属性过渡transition:width 3s,height 2s;
transition:all 3s;

2D变形 平移 旋转 缩放 倾斜

平移属性；transform:translate(x,y); x沿着x轴 +x 沿着x轴正方向 -x 沿着x轴反方向
transform:translate(-300px,0px);
transform:translate(0px,300px);
transform:translate(-300px,300px);
transform:translate(n%,n%); n%走自身宽度的n%

续传属性；transform:rotate(ndeg); deg度数 +n顺时针 -n逆时针

改变形变中心；transform-origin:left top /right bottom/center center
/50px 50px/50% 50%/100% 0%/0% 100%;

缩放；transform:scale(w,h) w:宽度缩放 <1 缩小 >1放大 =0没有 h高度缩放

transform:scale(0.5) 0.5代表宽高同时缩小一半，实现小字体显示

倾斜；transform:skew(xdeg,ydeg) x朝x轴方向的倾斜 -deg x轴正方向倾斜 +deg x轴负方向倾斜
你只写一个值 默认是在x轴上的倾斜

3D变形 平移 旋转

3D坐标xyz轴 transform:translate3d(x,y,z); z轴在元素的正前方 从屏幕内射出的一条指向你眼睛的线(+z)

transform:translateX();
transform:translateY();
transform:translateZ();
transform:translateX() translateY() translateZ();

视距景深perspective:0px; 1000px 随便设置 代表的是你的距离3d物体的值 ----》3d效果

一般来说 这个属性加在3d变形元素的父盒子身上

旋转；transform:rotate3d(x,y,z,ndeg);
x,y,z向量值 方向 +x -x 大小
transform:rotate3d(1,1,0,45deg) 1 有旋转 0没有旋转
transform:rotate3d(300,300,0,45deg) 300 300和写1 1没有区别 是因为旋转轴方向一致
transform:rotate3d(200,600,0,45deg) 围城的是长方体 绕长方形面对角线旋转

transform:rotate3d(1,1,0,-45deg)

transform:rotate3d(1,0,0,45deg)绕X轴旋转 （横）
transform:rotate3d(0,1,0,-45deg)绕y轴 （竖）
transform:rotate3d(0,0,1,-45deg)绕z轴 相当于2d平面 +ndeg顺时针 -ndeg逆时针

动画

使用动画；animation:动画的名字 持续的时间 [ 运动的曲线 延时时间 执行次数 是否反向 播放状态 动画最后一帧的状态 ] ;
动画的名字 @keyframes 后面你自己起动画的名字animation-name
持续的时间 s animation-duration
运动的曲线 animation-timing-function
延时时间 animation-delay
执行次数 animation-iteration-count:1(默认)/3/4/infinite无限次
是否反向 animation-direction :normal/alternate反向
播放状态 animation-play-state:running/paused暂停
动画最后一帧的状态 animation-fill-mode:forwards(保持最终状态)/backwards;

动画库；动画库

第一步:引入

<link href="./animate.css">

第二步:使用

<div class=" animated flash">HIUF</div>
animated全局类
flash你想要的动画类

图片下间隙问题

图片默认有基线对齐方式，解决方法

vertical-align middle

font-size 0 lineheight 0

display;block

精灵图技术

将很多小图片小图标集成在一张大图里，减少http调用请求，优化网页加载速度

利用背景图进行载入，利用背景图定位属性，找到所用小图片，图标进行显示

精灵图二倍图技术

精灵图图片大小太大，不方便使用，采用bg-size属性，将图片具体PX缩小一倍，进行定位显示

微信滑动门技术 将大小不确定的背景图，铺在大小不确定的盒子里

ul>li>a>内容 li背景图铺设在左上角，a背景图铺设在右下角实现背景图跟随内容改变大小

轮播图实现的两种方式

控制移动进行显示；控制图片的显示隐藏进行显示

相框>照片条>照片盒子*n>a>img

照片条绝对定位压盖相框，相框overflow：hidden,照片条控制左右平移进行显示

相框>照片盒子*n>a>img

照片决定定位进行压盖，控制照片盒子的影藏显示

less预编译语言，进行css代码的预编译，使css代码可读性提高，结构更好

less 变量，方法，混合，引入