混杂模式与标准模式的一些区别

关于文档模式,已在上一篇文章(文档模式)中说过,这里就说说混杂模式和标准模式的一些区别。

众所周知的一个区别,就是CSS盒模型了,我们都知道标准模式中,CSS盒模型是w3c标准盒模型,也就是它的height和width就是里面内容(content)的高和宽。

那混杂模式呢?它会按照IE5.5的CSS盒模型,就是它的height和width是包含padding和border的宽度的,这个就是非常明显的区别,当然了,IE8及之前只支持IE盒模型,到IE8+之后,就可以通过设置box-sizing的值来切换,默认值是content-box,就是w3c标准盒模型,而设置为border-box,就是回到IE盒模型了。

基本来说,就如图:

一个div元素里面只包含图片的时候,混杂模式和标准模式也是不一样的,在标准模式下,不管IE还是标准浏览器,在图片底部都有3像素的空白。但在混杂模式下,标准浏览器(Chrome)中div距图片底部默认没有空白。

如果是在IE的混杂模式下,给行内元素是可以设置高度和宽度的,标准模式下肯定是无效的。

在混杂模式下,IE和其他浏览器对百分比宽度的解析是不一样的。如果父级是行内块或者浮动或者有定位的元素,给子元素设置百分比宽度100%时,IE的混杂会以父级的100%算(父级没有设置宽度,再往上一层),而标准浏览器是取决于内容的宽度,所以关键还是看父级是否行内块或者浮动或者有定位的元素。

在混杂模式下,当我们给一个元素设百分比高度,其他浏览器(正常,inline高度无变化,inline-block和block都会按百分比),而IE是自适应到内容高度。有点跟上面设置宽度相反的感觉。

overflow溢出默认值的问题。标准模式下,溢出元素是溢出可见的,超出部分的内容呈现在它的包含元素外。在混杂模式下,IE浏览器的溢出元素会自适应内容的尺寸。其实这个联想上面也很容易理解,标准模式是定好了的,而混杂模式是靠内容来撑开的感觉。

这里主要参考了这篇总结得不错的文章:标准模式与混杂模式

 

文档模式

IE5.5引入了文档模式的概念,最初的文档模式包含两种:混杂模式和标准模式。而这个模式就是通过文档类型(doctype)的切换来实现的。

为什么会出来这个东西呢?其实浏览器发展以前,都是自己弄自己的这样一个境况,所以很多时候不同浏览器解析出来的东西大不相同,后来有了w3c标准,将相应的规范统一了起来,大家就有了一定的标准了,所以其实标准模式就是标准后的模式,而混杂模式就是保持IE5以前的行为。后来IE又提出了一种叫做准标准模式的东西,其实就是大部分按照标准,但不完全按照,这里具体就不展开这个准标准模式了。

如果文档开始的时候没有引入文档类型声明,所有的浏览器默认都会开启混杂模式的,混杂模式在不同的浏览器肯定行为差异巨大的,很多时候要用一些hack的技术,所以并不推荐这种方式,一般都开启标准模式。

那标准模式如何开启呢?就是在文档的最前面加上<!DOCTYPE html>这么一句就行了,什么意思呢?DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD),这样,在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型,以决定其需要采用的渲染模式。

我们怎么用js判断是开启了哪个模式呢?可以通过document.compatMode这个属性,如果是CSS1Compat就是标准模式,如果是BackCompat就是混杂模式。

至于混杂模式和标准模式会有什么巨大差异呢?下一篇再说说。

 

XML和HTML

前面的文章(dom的几个级别)说到,DOM其实包含DOM XML的,那XML是什么东西呢?和HTML又有什么关系呢?

XML 全称是可扩展标记语言,是被设计用来传输和存储数据。
HTML 全称超文本标记语言,是被设计用来显示数据。

XML是标准通用置标语言(SGML)的一个子集,而HTML是SGML的一个应用,XML就是要弥补HTML的不足,所以是未来大规模应用的趋势,而中间会有个叫做XHTML(可扩展超文本标记语言)的东西,就是要支撑HTML过渡到XML的产物,目标是替代HTML,而XHTML说得简单点,就是要求更严格的HTML。

在 XML 中,元素名称是由开发者定义的,当两个不同的文档使用相同的元素名时,就会发生命名冲突。所以前面讲DOM级别的时候,有一个叫做XML命名空间的东西,其实就是将某个相同元素区分在对应的命名空间中。

最后再提提XML的几个语法规则,就知道为什么说XHTML是更严格的HTML了:

XML 文档必须有根元素
XML 文档必须有关闭标签
XML 标签对大小写敏感
XML 元素必须被正确的嵌套
XML 属性必须加引号

使用ECharts绘制图表

        如果我们想绘制一些图表类的,用框架肯定非常简单就能绘制出我们需要的图表了,其实绘制图表的框架有很多,这里就用ECharts做一个简单的例子,也是非常容易上手的,官网:http://echarts.baidu.com/

        引入echarts之后,步骤简单分为三步:

        1、为ECharts准备dom;

        2、设置配置项和数据;

        3、使用配置项和数据渲染图表。

        看起来是不是和模板引擎使用差不多呢?可以认为我们设置一个图表模板,然后在某个dom节点上渲染出来,就是那么简单。

        直接分解出三步来写一下代码:

        1、为ECharts准备dom:


<div id="main" 
style="width: 600px; height: 400px; margin: 200px auto;">
</div>

        2、设置配置项和数据option:

//设置图表标题
title: {
   text: 'web前端技术掌握程度表'
}
//设置数据名称
legend: {
   data:['掌握程度']
}
//设置 x 轴各项
xAxis: {
   data: ["HTML","CSS","JavaScript","Vue","React","Angular"]
}
//设置对应数据名称的实际值
series: [{
   name: '掌握程度',
   type: 'bar',
   data: [85, 80, 90, 85, 70, 50]
}]

        3、使用配置项和数据渲染图表

myChart.setOption(option);

        就是这么简单了,完整代码为:代码,完整效果为:图表

文章在我的github上的地址:点击跳转

HTML5中的简单过渡效果

        网页的动画越来越多样化,而且HTML5越来越得到更多的支持,我们可以结合CSS3(主要用到transition和animation两种方式)和js脚本来实现很多复杂的动画和特效。这里举一个超级简单例子展示一下:

        我们实现一个按钮及其过渡效果,最后效果这样:效果

        先设置一个div,里面放一个链接a标签,文字为“点击按钮”:

 <div>
   <a href="http://www.ershing.cn">点击按钮</a>
 </div>

        然后设置外面的样式,使得div大概居于屏幕中间,背景颜色为浅蓝色:

 body{
   width:100%;
   height:100%;
   background:lightblue;
 }
 div{
   background:lightblue;
   height:60%;
   width:30%;
   margin:20% auto;
   text-align:center;
 }

        然后设置a标签的样式为白色边框,白色底,还有一些文字间隔大小等内容:

 a {
   display: block;
   margin:50px;
   color: white;
   text-decoration: none;
   font-family: sans-serif;
   font-size: 25px;
   line-height: 60px;
   border: 1px solid white;
   border-radius: 10px;
   text-align: center;
   text-indent :20px;
   letter-spacing: 20px;
 }

        再设置它的鼠标放置上面之后(hover)的样式:

 a:hover {
   color: purple;
   background: white;
   border:1px solid plum
 }

        好了,基本样式就搞定了,我们发觉这样每次放置鼠标上去和离开鼠标都有一种很突然的感觉,这里就要用到过度效果了,给a加一个匀速的0.5s转换效果:

 -webkit-transition: all .5s linear;
 transition: all .5s linear;

        好了,基本就搞定了,源码参考:源码

        效果可以参考:效果

        其实压根就是非常简单的用了一个transition过渡,不过结合css样式一起,我们可以得到很多我们想要的效果。

文章在我的github上的地址:点击跳转

原创文章,转载请注明出处!

知识共享许可协议
本文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。

CSS3中的图形

        CSS3出来之前,我们只能有矩形的图形,CSS3之后,clip-path和shape-outside可以做出很强大的图形功能,这里暂且不说。我们也可以通过border-radius、 border、 transform、 伪元素配合、gradient 渐变,我们能够作出非常多的几何图形,这里举例一下几个经典的样式:

        三角形:

 .traingle {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid lightblue;
 }

        梯形:

.trapezoid {
    position: relative;
    width: 60px;
    padding: 60px;
}

.trapezoid::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: perspective(20px) scaleY(1.3) rotateX(5deg);
    transform-origin: bottom;
    background: lightblue;
}

        六边形:

.hexagon {
    position: relative;
    width: 60px;
    border-bottom: 60px solid lightblue;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

.hexagon::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 0px;
    top: 60px;
    left: -40px;
    border-top: 60px solid lightblue;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

        五角星:

.star {
    margin: 50px 0;
    position: relative;
    width: 0;
    border-right: 100px solid transparent;
    border-bottom: 70px solid lightblue;
    border-left: 100px solid transparent;
    transform: rotate(35deg) scale(.6);
}

.star:before {
    content: '';
    position: absolute;
    border-bottom: 80px solid lightblue;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -45px;
    left: -65px;
    transform: rotate(-35deg);
}

.star:after {
    content: '';
    position: absolute;
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid lightblue;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}

        椭圆:

.ellipse {
    width: 120px;
    height: 160px;
    background-color: lightblue;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

        还有其他的一些可以直接看图:效果

        参考源码(反正我也是摘抄的):源码

 

CSS样式参考配色

        关于在css样式选择配色问题的时候,个人认为不能随便选择一个颜色,网上有很多配色方案,都可以参考一下,不同颜色的搭配方案是很符合个人审美观的,这里贴一下别人发我的图,应该都是网上截图过来的,这里借用一下:

        可以用QQ截图时候直接当吸管工具,查看颜色值。

文章在我的github上的地址:点击跳转

原创文章,转载请注明出处!

知识共享许可协议
本文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。

大文件分块上传、断点续传

        很多时候我们需要上传文件,都会用到直接form-data的方式上传,但是如果文件太大呢,例如一个500MB的文件,服务器端对请求数据有大小要求限制怎么办,不可能整个大文件传输,又或者你想读取文件内容怎么办,这么大的文件全部读入内存?浏览器不答应吧。所以我们就想到分块的方法。

        主要用到的是HTML 5 的file相关的api,这里不讨论相关读取文件内容(其实也不过是用了FileReader 对象的readAsArrayBuffer方法而已),这里单纯实现文件分块,然后上传,当然还有断点续传。下面只展示关键代码。

        废话少说,先来个HTML的框架大致内容用于测试,一个选择文件按钮,一个上传按钮:

<input type="file" id="files" name="file" />
<input id="uploadBtn" type="button" value="上传">

        然后开始script标签内容了,先DOM获取文件和按钮、并设置上传的地址:

var input = document.getElementById('files');
var upload = document.getElementById('uploadBtn');
//自己建立一个测试的服务器,后面会提到后端的代码
var host = 'http://localhost:10000/attachment/upload'  

        好了,获取到文件之后,就要开始切割了,切割考虑到不同浏览器的兼容性问题,所以要做个判断:

var blob;
if (file.webkitSlice) {
      blob = file.webkitSlice(fileLoaded, fileLoaded + block);
} else if (file.mozSlice) {
       blob = file.mozSlice(fileLoaded, fileLoaded + block);
} else if (file.slice) {
      blob = file.slice(fileLoaded, fileLoaded + block);
} else {
      alert('不支持分段读取!');
}

        切割完之后,就要放进去新创建的FormData对象里面了:

var formData = new FormData();
formData.append("fileBlob", blob);

        最后,用jquery的ajax异步上传,在回调的地方判断文件是否完成整个切割上传,如果还没上传完成,继续切割继续上传:

$.ajax({
    url: host+'/base_data_service/pic/upload',
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
        if (data.guid) {
            //用guid来标识某个文件
        }
        if (percent < 1) {
            // 继续切割下一块
        } else {
            // 结束
            console.log('已完成文件存储');
        }
        return;
    },
    error: function (data) {
        console.log('上传出现错误', data);
    }
});

        至于怎样断点续传呢?就是在每次回调的地方存储文件已经切割上传的位置,那么即使断网了,再连上去下一次也知道从哪里开始继续切割了。

        参考代码并不完全严谨,只是提供一个总体思路。

        完整的前端代码可以参考:前端源码参考

        当然了,这个前端代码还是要配合后端的操作的,这里后端用node写的,也可以参考一下:后端源码参考

文章在我的github上的地址:点击跳转

原创文章,转载请注明出处!

知识共享许可协议
本文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。