html5&css3
文章平均质量分 53
.
zihanzy.com
前端攻城狮
个人博客 https://www.zihanzy.com
欢迎来访
展开
-
什么是 Web Workers?
个人博客上线欢迎来访 http://www.zihanzy.com引入H5规范提供了js分线程的实现,取名为Web Workers他是HTML5提供的一个JavaScript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面但是子线程完全受主线程控制,且不得操作DOM,所以这个新标准并没有改变JavaScript单线程的本质相关API1.Worker:构造函数,加载分线程执行的js文件2.Worker.prototype.onmessage:用于接受另一.原创 2020-10-01 21:54:07 · 2246 阅读 · 0 评论 -
初识Websocket
什么是WebsocketWebSocket是一种通信协议,可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就可以建立持久性的连接,并进行双向数据传输。Websocket是一种通信协议,与HTTP不同,HTTP只能实现单项通信,也就是客...原创 2020-03-29 16:21:07 · 1624 阅读 · 0 评论 -
Bootstrap4与Bootstrap3的区别
Bootsrap3采用的float布局,而Bootstrap采用的flex布局Bootstrap4中的栅格系统可以不用添加指定的列数 如row 里面有2个col 会任何尺寸下均分rowBootstrap3只有4种栅格类 分别为(col-xs特小,col-sm小,col-md,中col-lg大)Bootstrap4有5种栅格类,(col-特小,col-sm-小,col-md-中...原创 2020-03-05 18:27:31 · 2852 阅读 · 0 评论 -
Less
定义Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端下面通过一些例子来加深对它的理解情景一我们知道网页一般有主题色,很多地方都会用到主题色,但如果有一天我们要更换主题色怎么办?是不是要一个一个的替换,这样做是不是显得很麻烦且浪费时间我们想像,既...原创 2020-02-18 21:49:45 · 1352 阅读 · 0 评论 -
HTML空白字符占位问题
如下例我们想实现这样一种效果父盒子包含两个子元素,这两个子元素分别平分父元素的宽度但我们要使两个元素显示在同一行,所以设置其display:'inline-block',如下代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title>...原创 2020-02-16 18:42:44 · 3259 阅读 · 0 评论 -
CSS加号(+)选择器
+选择符手册给他的定义是相邻选择符E+F 相邻选择符(Adjacent sibling combinator) 选择紧贴在E元素之后F元素。做一个示例li{ height:20px;}ul li.itemtwo+li{ //选取li类名为itemtwo的后一个为li元素 background: red;}<ul> <li>1</li&...原创 2020-02-14 17:20:31 · 6009 阅读 · 1 评论 -
弹性布局(伸缩布局)
伸缩布局display:flexflex:nflex-direction 调整主轴方向(默认水平方向row)column:垂直justify-content(水平对齐):flex-start:子元素从父容器开头排序flex-end:子元素从父容器的末尾排序center:位于中间space-between:左右的盒子贴近父盒子,中间的平均分布空白间距space-around:每个...原创 2020-02-11 17:49:48 · 2801 阅读 · 0 评论 -
CSS新增2D,3D属性
2D(谷歌浏览器和safari需加前缀-webkit-)(ie浏览器需加-ms-)(火狐浏览器需加-moz-)格式:[前缀]transform:以下方法;translate(x,y):元素移动指定像素(如果单位为像素则相对于父元素移动,如果单位为百分比相对于自己移动);tramsform-orgin:指定中心点(position)rotate(numdeg):num:设置元素旋转角度...原创 2020-02-11 14:06:59 · 1490 阅读 · 0 评论 -
CSS BFC
BFC(块级格式化上下文)BFC是个独立的渲染区域,只有块级盒子参与,它规定了内部的盒子如何布局,但不会影响外部盒子简单的说 它就是一块封闭的区域,里面的盒子在怎么动也不会影响外面的布局。创建BFC也有条件只有display属性为 block,list-item,table的元素才能创建BFCBFC有宽度,高度。有外边距margin,有内边距外边框BFC的特性1.在BFC中,盒子...原创 2020-02-11 13:52:01 · 1406 阅读 · 0 评论 -
CSS3动画
通过 CSS3动画,我们可以在许多网页中取代动画图片、Flash 动画以及 Js特效动画属性动画说明@keyframes定义动画。animation-name规定 @keyframes 动画的名称animation-duration一个动画完成的时间。默认是 0animation-timing-function规定动画的速度曲线。默认是 “ease...原创 2020-02-10 16:00:52 · 1369 阅读 · 0 评论 -
CSS定位盒子水平/垂直居中(transform)
以前我们使定位的盒子水平/垂直居中可能是这样的 .father{ width:300px; height:200px; border:1px solid red; margin: 100px auto; position: relative; } .son{ width:70px; height:50px; background: skyb...原创 2020-02-10 12:29:27 · 2161 阅读 · 0 评论 -
CSS滑动门
引入我们在制作网页时,为了美观常常需要为网页元素设置特殊的背景,如下微信导航栏文字的背景肯定是以图片的方式实现的,这里最关键的问题就是,字数不一样如何显示?如果直接插入一张背景图,对应不同的字数显示就不正常了,那么他是如何使背景图适应文字呢?这里就用到了【滑动门】为了使用各种特殊形状的背景都能够自适应元素文本内容的多少,出现了css滑动门技术,它从新的角度构建页面,使各种特殊形状背景都能...原创 2020-02-09 21:44:27 · 1760 阅读 · 0 评论 -
CSS使用字体图标
图片的缺点:1,文件大,增加许多额外的“http”请求,降低网页性能,2,图片不能很好的缩放,过渡缩放会导致失真…字体图标就是为了解决这些问题而来字体图标的优点:1,可以做和图片一样的事情,如改变透明度,旋转等2,字体图标本质是文字,可以改变其字体颜色,设置阴影等3,字体图标体积更小4,兼容性强,几乎支持所有浏览器字体图标使用流程1.UI人员设计字体图标效果图.svg格式--...原创 2020-02-09 18:46:42 · 1569 阅读 · 0 评论 -
CSS Sprites(精灵图)
引入当用户访问网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而一个网页中往往会有很多小背景图片作为修饰,当网页背景图像过多时,服务器就会频繁的接收发送请求,这会大大降低页面的加载速度,为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度,就出现了css精灵技术 (CSS Sprites)CSS精灵并不是很高深的技术,CSS精灵是一种处理网页背景图像的...原创 2020-02-09 16:51:29 · 1654 阅读 · 0 评论 -
CSS清除浮动
了解为什么要清除浮动我们先来看一个例子我们想要的效果是这样的son1和son2并排显示,不会影响底部蓝色的盒子,要实现这种效果我们先写出元素,如下如果我们想son1和son2盒子并排显示,那么设置他们左浮动.son1{ width:100px; height:30px; background: orange; float: left; } .son2{...原创 2020-02-09 12:19:22 · 1367 阅读 · 0 评论 -
CSS权重计算
在没有引入权重的概念时,我们对css的优先级认识是这样的!important>行内样式>ID>类/伪类|属性>标签排在最前面的优先级越高。但css是有权重机制的,css的优先级都是根据权重推算出来如下表格用四位数字来表示,分别表示四个级别,从左到右不断递减(排在前面的越大)Name0,0,0,0,(贡献值)标签0,0,0,1类/伪类...原创 2020-02-08 12:19:45 · 1588 阅读 · 0 评论