2018年10月_KlayChan

原创 css选择器中:first-child与:first-of-type的区别

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：<div> <p>第一个元素</p> <h1>第二个元素</h1> <span>第三个元素</span> <span>第四个元素</

2018-10-30 21:27:34 324

转载 JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）

一般讲的宽度指的是内容宽度，但一个 div 的实际宽度不仅只于内容宽度，尤其在做 CSS 排版时更不能搞错，必须同时考虑 Padding、Border 与 Margin 的宽度，四个加起来才是 div 真正占有的宽度。JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）全都有了！var content = $(‘div’). width();//只...

2018-10-30 12:22:59 644

转载 css实现两栏布局，左侧固定宽，右侧自适应的七种方法

一个面试会问的问题，如何实现两个盒子，左侧固定宽度，右侧自适应。下面是实现的其中方法：1、利用 calc 计算宽度的方法css代码如下：.box{overflow: hidden;height: 100px;margin: 10px 0;}.box&gt;div{height: 100%;}#box1&gt;div{float: left;}.left1{width: 100px;b...

2018-10-17 19:01:01 1010

转载 querySelector()和querySelectorAll()

querySelector()和querySelectorAll()是两个原生的选择符。querySelector()用于接收一个css选择符，返回与该模式匹配的第一个元素；querySelectorAll()返回所匹配到的所有元素。大家会问已经有getElementById（）和getElementsByTagName（）了吗，这两个新增加的选择符API意义在哪？对比而言，query选择符...

2018-10-14 23:38:25 344

转载原生 JS 获取元素的尺寸和位置

关于元素的尺寸和位置，这原本是 CSS 干的事，但更多的时候需要用 JavaScript 来获取这些参数，比如一个很好的例子 js 实现的图片瀑布流。在介绍 JS 中的例子之前，先来说明一下 css 中的元素尺寸。CSS 中的 width 和 height先开个头吧，一个元素所占据的物理尺寸包括以下几个部分，由内到外分别是内容，padding，border，margin，这些值加到一起才算是...

2018-10-13 21:16:33 1833

转载 document.documentElement和document.body的区别

网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动：<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>window.onscroll = function (){ ...

2018-10-13 15:55:04 186

转载 CSS图片下面有间隙的解决方案

在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳，供大家参考。1、将图片转换为块级对像即设置img为：display：block；在本例中添加一组CSS...

2018-10-11 15:24:48 1194

原创 css属性选择器*=,|=,^=,$=的区别

总结:“value是完整单词” 类型的比较符号: ~= , |=“拼接字符串” 类型的比较符号: *= , ^= , $=1.attribute属性中包含value:[attribute~=value] 属性中包含独立的单词为valuee.g:[title~=flower] --&gt; &lt;img src="/i/eg_tulip.jpg" title="tul...

2018-10-11 14:56:15 921

原创 H5获取用户位置API + 百度地图API介绍

一. Geolocaiton API 功能介绍Geolocation接口是一个用来获取设备地理位置的可编程的对象,它可以让Web内容访问到设备的地理位置,这将允许Web应用基于用户的地理位置提供定制的信息.出于安全考虑,当一个Web页尝试获取地理位置信息时, 会请求用户批准地理位置访问权限, 每个浏览器都有自己请求用户批准该权限的策略和方法.二. Geolocation API 使用说明G...

2018-10-03 15:28:44 3746

转载 slice() 与 splice()区别

slice()1.1（1）接受一个参数是：返回从该参数指定位置开始到当前数组末尾的所有项；（2）接受两个参数是：返回起始和结束位置之间的项，但是不包括结束位置的项。注意：slice()不会影响原数组1.2start 要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。end ...

2018-10-02 22:38:34 267

KleyChan的博客