随笔分类 -  css

flex的使用以及布局
摘要：1.添加flex属性后的区别 效果如下： ff47,360,chrome40基本一致,ie10却不支持，查了下是版本问题,flex是新版本ie11之后才使用的，ie10及以前使用的属性是flexbox;，增加display:-ms-flexbox;就支持了。 Flexbox布局的语法经过几年发生了很 阅读全文
posted @ 2016-11-13 19:40 waisonlong 阅读(5039) 评论(0) 推荐(0)
关于clear与清除浮动
摘要：今天看bootstrap突然看到了 好像对clear的用法有点模糊，于是于是又研究一下用法。 上面搜资料总会搜到张鑫旭老师的相关文章，又把他的《准确理解CSS clear:left/right的含义及实际用途》重新看了一遍。 下面是其原文： 我不清楚大家是不是跟我一样，我之前文章，写浮动那一块的时候 阅读全文
posted @ 2016-08-30 17:44 waisonlong 阅读(6665) 评论(0) 推荐(0)
利用rem解决移动端响应适配问题
摘要：最近看了《从网易与淘宝的font-size思考前端设计稿与工作流》和github上的《使用Flexible实现手淘H5页面的终端适配》 以前一直用百分比的我，对移动前端的H5页面网页有了新的了解，暂在这里记录一下，留着后期项目中运动到这个知识点，再作补充... 相关网站链接： http://www. 阅读全文
posted @ 2016-01-27 14:52 waisonlong 阅读(224) 评论(0) 推荐(0)
文字和图片垂直居中
摘要：一、文字垂直居中习惯性的我们想对文字进行垂直居中，首先想到的是设置line-height与height相等 我是垂直居中位置，我就这么帅！效果如图：但是如果出现多行文字效果就... 我是垂直居中多行文字，我就这么帅！ 我是垂直居中多行文字，我就这么帅！立刻就不帅了！！然... 阅读全文
posted @ 2015-12-24 16:46 waisonlong 阅读(1508) 评论(0) 推荐(0)
CSS3 Transitions, Transforms和Animation的使用
摘要：一、首先说说transition这个属性:它有下面几个参数：transition-property：* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡transition-duration：*//指定这个过渡的持续时间tran... 阅读全文
posted @ 2015-12-11 16:14 waisonlong 阅读(571) 评论(0) 推荐(0)
word-wrap和word-break的区别吗？
摘要：word-wrap:css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。word-break:css的 word-break 属性用来标明怎么样进行单词内的断句。貌似从上面两个读着都蛋疼的翻译中找到了一些区别：w... 阅读全文
posted @ 2015-12-11 11:57 waisonlong 阅读(255) 评论(0) 推荐(0)
css3中比较少用到的属性记录
摘要：letter-spacing 属性支持：所有浏览器都支持 letter-spacing 属性。letter-spacing 属性增加或减少字符间的空白（字符间距）。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就... 阅读全文
posted @ 2015-12-10 11:53 waisonlong 阅读(174) 评论(0) 推荐(0)
CSS ::Selection的使用方法
摘要：大家都知道浏览器对选中的文本默认样式都是统一的，Windows下是一个深蓝色的背景，白字的前景，而在Mac下是一个淡蓝色背景，白色字体，就如上图所展示的一样，自从有了这个“::selection”选择器后，我们在部分浏览器中可以设置你所需要的样式，下面就让我来告诉大家如何使用这个“::selecti... 阅读全文
posted @ 2015-12-09 17:51 waisonlong 阅读(5022) 评论(0) 推荐(0)
CSS 属性 - 伪类和伪元素的区别
摘要：CSS伪类用于向某些选择器添加特殊的效果。CSS伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他css无法描述的东西。伪类种类伪元素种类区别这里用伪类:first-child和伪元素:first-letter来... 阅读全文
posted @ 2015-12-09 17:27 waisonlong 阅读(252) 评论(0) 推荐(0)
pointer-events属性值详解
摘要：其实早知道这个属性，但是一直没有去研究过。今天正好在twitter看到这个词，就去研究了下，正好解决了目前遇到的一个小难题，所以分享下。嗯，其实这是个比较简单的CSS3属性。在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的div... 阅读全文
posted @ 2015-11-25 10:18 waisonlong 阅读(3607) 评论(0) 推荐(0)
clearfix的用法
摘要：如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有 clear，导致不能被撑开。看下面的例子：Div布局如下：Css代码如下：.out{border:1px solid #F00; width:500px;}.inner1{width:200px; h... 阅读全文
posted @ 2015-11-24 16:21 waisonlong 阅读(21743) 评论(0) 推荐(0)
CSS3 pointer-events:none应用举例及扩展
摘要：一、pointer-events:none是？pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto... 阅读全文
posted @ 2015-10-12 16:32 waisonlong 阅读(3989) 评论(0) 推荐(1)
css3 appearance在iphone上面的问题
摘要：最近在做项目的时候，发现iphone上中在修改了css样式之后还是保留自带的一些属性，然后在安卓手机上不会出现这样的问题，在网上找了一些资料，使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来... 阅读全文
posted @ 2015-09-18 17:43 waisonlong 阅读(600) 评论(0) 推荐(0)
各种浏览器的Hack写法(chrome firefox ie等)
摘要：Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS... 阅读全文
posted @ 2015-08-25 10:58 waisonlong 阅读(190) 评论(0) 推荐(0)
纯CSS让overflow:auto页面滚动条出现时不跳动
摘要：现代浏览器滚动条默认是overflow:auto类型的，也就是如果尺寸不足一屏，没有滚动条；超出，出现滚动条。于是，问题来了： 当前优化这种体验问题，一般有两种解决方法： 二、CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动 很简单，只要一行代码就搞定了： 或者： 首先，.wrap-out 阅读全文
posted @ 2015-07-21 14:47 waisonlong 阅读(968) 评论(0) 推荐(0)