随笔分类 -  css/css3

摘要:1.chrome浏览器 从上面数据我们可以看出,html作为body的容器,其大小就是我们可视窗口的大小,window.innerHeight与html的clientHeight相同即可验证。 同时,也可以看出,offsetheight放在html元素上与放在其他元素上不同,并不是视口+boder+ 阅读全文
posted @ 2016-12-02 16:47 很好玩 阅读(1459) 评论(0) 推荐(0) 编辑
摘要:1.去掉数值的单位 持续更新。。。 阅读全文
posted @ 2016-09-22 10:38 很好玩 阅读(333) 评论(0) 推荐(0) 编辑
摘要:我们直接从例子出发 这个例子对IE做了兼容,首先看第二个src,因为IE识别不了多属性值(也可以说识别不了‘,’),所以把适应IE的格式放在第一个;再看一下我们为什么写了两个src,这里也是做了一个兼容,因为IE自己的格式也分为IE8以前和IE9适配的格式,大家记住书写一样的属性时,在只能识别一种的 阅读全文
posted @ 2016-07-22 20:36 很好玩 阅读(784) 评论(0) 推荐(0) 编辑
摘要:HTML: CSS: 以上是主要的代码,有几点需要注意: 利用rgba实现有兼容性的问题,所以采用两层覆盖的方法 float元素与position:absolute元素平级时,当绝对定位没有指定top/left时,float会在绝对定位元素前面出现 绝对定位元素当不指定top/left时,则相对于o 阅读全文
posted @ 2016-07-21 13:42 很好玩 阅读(667) 评论(0) 推荐(0) 编辑
摘要:有很多css属性可以影响元素定位,比如float,margin,padding,position,translate()。表面上来看,position:relatative和transform:translate()似乎作用一致,但其实他们之间也有几个差别,本篇文章就将比较这两个属性。 1.浏览器支 阅读全文
posted @ 2016-07-08 17:32 很好玩 阅读(1816) 评论(0) 推荐(0) 编辑
摘要:一、图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的《CSS层叠上下文和层叠顺序》,这里我们简单复习一下产生层叠上下文的原因。 1.根层叠上下文 指的是页面根元素,也就是滚动条的默认的始作俑者<html>元素。这就是为什么,绝对定位元素在left/top等值定位的时候,如果 阅读全文
posted @ 2016-04-22 00:36 很好玩 阅读(4550) 评论(0) 推荐(0) 编辑
摘要:Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。(这里我们称为Flex)。 Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型 阅读全文
posted @ 2016-04-20 11:14 很好玩 阅读(242) 评论(0) 推荐(0) 编辑
摘要:大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端 阅读全文
posted @ 2016-04-18 16:39 很好玩 阅读(538) 评论(0) 推荐(0) 编辑
摘要:inline-block属性 This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The 阅读全文
posted @ 2016-04-11 22:39 很好玩 阅读(2878) 评论(0) 推荐(0) 编辑
摘要:margin折叠的产生有几个条件: 这些margin都处于普通流中,并在同一个BFC中; 这些margin没有被非空内容、padding、border 或 clear 分隔开; 这些margin在垂直方向上是毗邻的,包括以下几种情况:1、一个box的top margin与第一个子box的top ma 阅读全文
posted @ 2016-03-16 10:45 很好玩 阅读(216) 评论(0) 推荐(0) 编辑
摘要:一、什么是filter CSS滤镜属性,可以在元素呈现之前,为元素的渲染提供一些效果,如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。目前Filter Effects Module还只是W3C的一个草案,浏览器还不完全支持,在使用时需要加浏览器前缀。 二、filter语法 /* 设置滤 阅读全文
posted @ 2016-01-28 16:19 很好玩 阅读(2473) 评论(0) 推荐(0) 编辑
摘要:今天做项目中偶然误把元素加上了pointer-events属性,结果导致后来在js中给该元素加点击事件不能用,检查了半天才发现是这个属性的问题。之前没有好好研究,于是决定仔细研究一下。一、定义及语法根据MDN上的解释如下:CSS属性pointer-events允许作者控制特定的图形元素在何时成为属性... 阅读全文
posted @ 2016-01-22 22:01 很好玩 阅读(6524) 评论(0) 推荐(1) 编辑
摘要:本文转载自http://www.zhangxinxu.com/wordpress/?p=5019一、IE和Chrome等浏览器与zoom还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:zoom的... 阅读全文
posted @ 2016-01-21 17:36 很好玩 阅读(476) 评论(0) 推荐(0) 编辑
摘要:今天做项目中,用background显示了二维码和一些文字,但显示到页面上时,二维码和图片都变得模糊了。于是将图片调整、放大,但在放大后,作为背景图片的它则显示不全,无奈之下用了backgroung-size。但background-size在IE下不兼容,故最后使用了img+width+hei... 阅读全文
posted @ 2016-01-13 16:54 很好玩 阅读(8488) 评论(0) 推荐(4) 编辑
摘要:一、什么是层叠上下文和层叠水平层叠上下文和层叠水平有一点儿抽象。我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文。Stacking context 1由文件根元素构建,Stacking context 2和Stacking context 3是在Stacking... 阅读全文
posted @ 2016-01-11 15:36 很好玩 阅读(1358) 评论(0) 推荐(0) 编辑
摘要:html,body,h1,h2,h3,h4,h5,h6,form,dl,dd{ margin:0;}th,td{ padding:0;}input,textarea,ol,ul{ margin:0; padding:0;}textarea{ resize: none; ... 阅读全文
posted @ 2015-12-25 22:16 很好玩 阅读(162) 评论(0) 推荐(0) 编辑
摘要:background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。 虽然两者看上去... 阅读全文
posted @ 2015-12-25 22:11 很好玩 阅读(8093) 评论(1) 推荐(3) 编辑
摘要:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。 我们来看一下w3c上是怎么说的?This::notation is introduced by the current document in order to establish a discrimination betwee... 阅读全文
posted @ 2015-12-25 21:40 很好玩 阅读(1132) 评论(0) 推荐(1) 编辑
摘要:1.IE6下最小高度问题描述:在IE6下,元素高度小于19px时,会被当做19px处理解决:overflow:hidden;2.border:1px black dotted;IE6下不支持解决:用背景平铺来实现3.IE6下解决margin传递解决:父级触发haslayout4.IE6双边距bug描... 阅读全文
posted @ 2015-12-17 10:18 很好玩 阅读(252) 评论(0) 推荐(0) 编辑
摘要:垂直对齐元素只应用于行内元素(图像、文本)和表单元素垂直对齐文本会影响行高默认值为baseline 阅读全文
posted @ 2015-11-12 17:06 很好玩 阅读(438) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示