css
文章平均质量分 65
汪小穆
走在成为web前端大牛路上......
展开
-
【css】兼容rgba
background:rgba(); 是css3新增的。它非常实用,可以很简单的就做出一个背景透明而内容不透明的遮罩层。可惜的是IE8及IE8以下并不兼容该属性。但我们可以通过IE下的滤镜来实现rgba的效果。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/...原创 2017-12-11 10:30:30 · 816 阅读 · 0 评论 -
【css】用边框border实现各种各样的形状
前言:前端性能优化中有一个准则是:能用css实现的图标(图片)就尽量用css去实现,达到减少图片使用的目的,从而减少从服务器请求的资源。该篇就说说怎么用边框border实现各种各样的形状。原创 2019-01-14 17:25:49 · 10906 阅读 · 3 评论 -
【css】display:flex;弹性盒模型全解
前言:弹性盒模型的出现使得前端的布局更简单,更快捷,更灵活。(反正很好用就对了)。 一、flex的浏览器内核兼容写法原创 2018-10-31 14:56:37 · 15976 阅读 · 1 评论 -
【css】最简单的瀑布流布局方法
前言:用column-count就能实现简单的瀑布流布局原创 2018-09-19 17:54:34 · 11264 阅读 · 3 评论 -
【css】巧妙解决边框颜色渐变时,border-radius失效的问题。
前言:颜色渐变很好用,丰富了前端的色彩世界。边框的颜色用上渐变也很好看,但是当边框颜色渐变遇上border-radius时,问题就出现了。原创 2018-07-12 16:48:25 · 15005 阅读 · 2 评论 -
【css】background-position陷阱与移动端雪碧图处理
前言:大家肯定都试过给元素添加背景background,并且用的绝对不少,但是其中的background-position,你真的了解吗?我们往往要把页面的中的众多图标合并成一张雪碧图,已减少对服务器的图片请求次数。pc端处理雪碧图是很好处理,但是移动端如果不熟悉background-size跟background-position,处理起来还是有很大麻烦的。一、例子①测试图片:...原创 2018-06-13 18:52:03 · 3418 阅读 · 0 评论 -
【css】行内块元素overflow:hidden;带来的塌陷问题
前言:奇怪的事情总会发生在生活的方方面面,前端开发也是。一、问题起始①行内块与行内元素<body><span>夏末微凉</span><span>夏末微凉</span><style>span { border-bottom:1px solid #000; }span:first-child { display:i...原创 2018-06-04 15:28:22 · 5469 阅读 · 4 评论 -
【css】移动端自适应布局与字体大小自适应
前言:前面已经说过【css】移动端响应式布局与设置响应式字体大小,但是移动自适应布局跟自适应字体大小该怎么进行设置呢? 一、vw, vhvw它是根据可视区的宽度来计算的。vh它是根据可视区的高度来计算的。<body><style>body { margin:0; }.testDiv { width:100vw; height:100vh; fon...原创 2018-06-04 10:43:30 · 47041 阅读 · 5 评论 -
【css】使用margin时易出现的错误
前言:margin在布局的时候还是蛮常用到,不过margin还是容易产生一些问题的。 一、margin-top传递给了父级。<body><style>body { margin:0; background:pink; }.box1 { width:200px; height:200px; background:#333;}.box2 { width:1...原创 2018-05-26 14:46:40 · 1884 阅读 · 1 评论 -
【css】移动端响应式布局与响应式字体大小
前言:移动设备(手机、平板电脑等),已经逐渐成为人们生活中必不可缺的物件了,这也意味着人们更多的用移动设备浏览网页。然而移动设备有着各式各样的分辨率与大小,这使用前端开发人员不得不去设配它们。相关链接:【css】移动端自适应布局与字体大小自适应前言二: 说到移动设备,一个不得不提就是viewport的设置了<meta name="viewport" content="width...原创 2018-05-07 12:48:54 · 20730 阅读 · 4 评论 -
【css】用css巧妙实现移动端横向滑动展示功能
前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用css就能很好的解决这功能。 一、直接上代码。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">...原创 2018-05-19 13:53:31 · 25996 阅读 · 2 评论 -
【css】行内元素、行内块元素的默认间隙问题
前言:我比较用喜欢行内元素,行内块元素来做横向导航,这样就不用再去担心浮动块级元素带来的不必要影响。但行内元素,行内块元素元素有个硬伤--有默认的间隙一、行内标签元素出现问题<body> <style> span { background:red; } </style> <span>行内元素</span>...原创 2018-04-28 09:57:21 · 11713 阅读 · 2 评论 -
【css】关于transform的fixed定位失效问题
前言:发现一个很有趣的关于transform的bug。一、问题起始:①、要弄一个侧边展开栏,我是直接给body添加一个transform:translateX(80%);的样式,让body整体往左移了80%的距离②、然后点击侧边展开栏再给body添加一个transform:translateX(0);的样式,让他回到原来位置。③、整体的效果实现并没有问题。④、但是fixed定位...原创 2018-05-04 18:24:48 · 12067 阅读 · 2 评论 -
【css】背景颜色渐变,文字颜色渐变,边框颜色渐变
前言:css3的出现使得我们可以通过前端技术,让网页内容变得更丰富,更华丽。今天来玩玩好玩的颜色渐变。一、背景颜色渐变。<body><style>.content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;bac...原创 2018-05-17 14:38:30 · 4401 阅读 · 0 评论 -
【css】不定宽高的div水平、垂直居中问题
1、兼容最佳原创 2017-09-15 15:43:42 · 10215 阅读 · 1 评论 -
【css】兼容IE8及IE8以下伪类选择器
css伪类选择器很好用,让我们的工作变的更方便。但有个麻烦,IE8及IE8以下对很多伪类选择器并不兼容。这六个伪类选择器是比较长用到的:这时会发现,IE9对这些伪类选择器都兼容。IE8、IE7除了的 :first-child 是兼容的,其他五个都不兼容。兼容:<body> <div> <p>aaaa</p> ...原创 2017-12-05 11:52:39 · 6485 阅读 · 0 评论 -
【css】不设置行高,文字水平垂直居中显示
前言:两种实用的方法原创 2017-12-06 16:22:24 · 3641 阅读 · 0 评论 -
【css】不同大小的字体底部对齐
前言:不同font-size的字体会出现上下偏差,这是一个蛮令人头疼的问题。特别是中文字体(英文字体不会出现这种问题)。<body> <style> b { font-size:24px; } span { font-size:50px; } </style> <div><b&g...原创 2017-12-13 16:41:18 · 23970 阅读 · 4 评论 -
【css】探究font-size、文本实际高度、line-height之间的关系
前言:当我们给一个元素设置font-size之后,会发现该元素也会被加上一个line-height,而且该line-height的高度跟font-size并不一致,那么它们之间到底有什么关系呢?原创 2019-08-15 17:59:51 · 16021 阅读 · 0 评论