第一阶段复习总结
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 变量,方法,混合,引入