![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
baby加油_
如果不曾相逢,也许心绪永远不会沉重,如果真的失之交臂,恐怕一生也不得轻松。
一个眼神,便足以让心海掠过飓风,在贫瘠的土地上,更深地懂得风景。一次远行,便足以憔悴了一颗羸弱的心,每望一眼秋水微澜,便恨不得泪水盈盈。
死怎能不从容不迫,爱又怎能无动于衷,只要彼此爱过一次,就是无憾的人生...
展开
-
html引用Bootstrap 针对IE低版本浏览器的兼容写法
CSS3属性border-radius/box-shadow/transform/transition/placeholder这些属性在IE8以及IE9中会有兼容问题<!DOCTYPE html><html lang="en"><head> <!-- 编码格式 --> <meta charset="UTF-8"> ...原创 2020-04-01 10:28:10 · 361 阅读 · 0 评论 -
你不知道的css
行内元素原创 2020-03-10 13:28:10 · 165 阅读 · 0 评论 -
css层的定位问题--父元素设置overflow,绝对定位的子元素会被隐藏或一起滚动
话不多说,直接上图看问题下图是有不符合需求的问题图,整个是个弹框,下拉框是一个ul列表,要的是这个列表在最高层级,但是图中却隐藏在了里面~~下图是理想结果弹框是fixed定位,列表框外有一个relative定位,列表框是absolute定位,是一个多级定位组成,按理来说,在这种情况下,子元素的层级应该是最高的,那么为什么会出现这种问题呢,经查证,一个小小的属性造成了这一问题overflo...原创 2019-12-12 17:58:45 · 9418 阅读 · 2 评论 -
a标签的用法,base标签用法
在前端开发中,经常会遇到a标签–超链接<a> 标签定义超链接,用于从一张页面链接到另一张页面。<a> 元素最重要的属性是 href 属性,它指示链接的目标。超链接<a href="http://www.baid.com" target="_blank">跳转到百度</a><a href="javascript:void(0)" &g...原创 2019-12-12 11:45:13 · 641 阅读 · 0 评论 -
关于css的字体设置font-famliy多值显示规则,微软雅黑侵权问题,微软雅黑不生效问题
今天由于其他公司因为微软雅黑字体的版权问题罚款,我们总监开始问我关于字体设置的一些问题,通过查阅资料,记录下相关重点。如果有不对的地方,望同仁指正!文章主要描述字体的多项设置规则,以及版权问题一、font-famliy字体设置规则常用的字体设置:body,h1,h2,h3,h4,h5,h6{ font-family: "Helvetica Neue", "Luxi Sans", "Dej...原创 2019-11-26 15:09:52 · 3478 阅读 · 0 评论 -
去除输入框input的缓存提示、自动填充
1.input框的缓存提示清除方法:在不想使用缓存的input中添加 autocomplete=“off”;在 input 所在的form标签中添加 autocomplete=“off”;2.input框的自动填充当“密码”那项input的type改成password的时候chrome浏览器对type="password"进行了识别,并把"密码"项进行了填充,并且把"密码"项前...原创 2019-11-13 11:22:07 · 3727 阅读 · 0 评论 -
css文件加载:@import和link的区别
css的引入@impot使用方法:<style type="text/css"> @import url("css/main.css"); @import url("css/base.css");</style>link的使用方法:<link href="css/main.css" rel="stylesheet"原创 2019-03-15 08:22:59 · 200 阅读 · 0 评论 -
css修改滚动条默认样式,及修改页面中部分滚动条的写法
很惭愧,写css写了好几年,竟然今天才知道不用自己写滚动条,不用写任何的js,直接改变默认的滚动条样式就能实现想要的效果!今天就来说一说CSS3自定义滚动条样式 -webkit-scrollbar当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成:可以滑动的...原创 2018-12-29 18:34:05 · 5045 阅读 · 0 评论 -
对文本的处理,必要的属性
在写一个标签中都是文本的情况下,最好加上以下属性,避免为了兼容重复修改等问题。首先了解下普通的文本有哪些属性:属性描述color设置文本颜色direction设置文本方向。line-height设置行高。letter-spacing设置字符间距。text-align对齐元素中的文本。text-decoration向文本添加修饰。...原创 2018-10-31 16:40:19 · 252 阅读 · 0 评论 -
手机横屏后字体变大 -webkit-text-size-adjust
近期遇到一个问题,在H5页面给字体设置了固定的尺寸15px,在andriod手机上横竖屏字体大小不变,但是在苹果手机上,横屏字体会变大,在网上查了资料才知道,需要设置一个属性text-size-adjust-webkit-text-size-adjust: 100%;这属性现在的一般用处是防止iPhone在坚屏转向横屏时放大文字(注意,就算viewport设置了maximum-scale=...原创 2018-10-31 16:05:09 · 4111 阅读 · 0 评论 -
css 文字超出部分自动加省略号
在移动端,经常会在适配的时候遇到文字超出的问题,最合理的做法就是超出部分自动加省略号。用到的属性有text-overflow: ellipsis; /显示省略符号来代表被修剪的文本/word-break: break-all; /允许在单词内换行/white-space: nowrap; /不换行 控制单行文本/<!--多行文本超出部分加省略号-->.a{ wi...原创 2018-09-27 14:08:31 · 2609 阅读 · 0 评论 -
css动画animation,transition,transform
animate连写的时候,至少有两个属性值动画才能生效,一是动画名,二是动画完成所需要的时间~原创 2018-09-26 14:30:35 · 1535 阅读 · 0 评论 -
设置一个宽高相同或等比例的图片,宽度是不固定,恒为页面宽度100%
在移动端,会遇到此类问题,简单的问题,css即可搞定html&lt;div class="foodImg"&gt; &lt;img :src="food.image"/&gt;&lt;/div&gt;css.foodImg{ position: relative; width: 100%;原创 2018-05-31 22:42:49 · 3258 阅读 · 1 评论 -
Sticky footer布局
有很多移动页面,会把一个页面分为头部区块、内容区块和页脚区块 当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布 当页面内容较多时,页脚能随着文档流自动撑开,显示在页面的最底部,这就是Sticky footer布局。 下面,我介绍两种最常见的Sticky footer布局一、负margin布局方式有一个min-height: 100%;(父级)有一个pad...原创 2018-05-12 17:20:21 · 148 阅读 · 0 评论 -
文字超出部分自动加省略号
问题:在做移动端项目的时候,数据渲染的时候经常会遇到因为文字太长而超出的问题,原来的解决方式是对文字进行截取拼接"...",现在有更方便的方式1.单行文字超出省略.a{ width: 300px; word-break: break-all; /*允许在单词内换行*/ text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/ ove原创 2018-01-19 14:53:02 · 940 阅读 · 0 评论 -
前端css 页面高斯模糊效果
问题:前端如何制作高斯模糊的背景图 最近在开发模仿APP页面,制作mp3播放器背景的时候,需要用到高斯模糊的背景图,前端如何实现呢? 这时候我们就要说到 CSS 3 中的一个属性Filter 了。先说案例吧,效果图如下:class = 'playerBox'> class="bg_color" src="http://edit.2or3m.com/sub原创 2018-01-25 18:59:11 · 23035 阅读 · 0 评论 -
background相关常用属性,图片常用放置方式
问题:一个图的放置方式有三种//例如:图片在类为imgBox的框中class="imgBox">div>1、根据div大小,直接铺满div class="imgBox"> img src="http://edit.2or3m.com/subject/php/20171225/0/8mMTBfcBrH.jpg"/>div>img{ width:100%原创 2018-01-25 17:34:46 · 1024 阅读 · 0 评论 -
瀑布流的实现方式,移动端的瀑布流,数据多列表渲染方式
效果请看:链接 代码请看:链接问题:在H5的移动端开发中,经常会遇到类似瀑布流的布局,近期做了一下总结。 大致有三种实现方式: 1. css3的column属性实现 2. jquery,对高做数组处理的定位型方式 3. js,对高做数组处理的定位型方式一、先说在工作中的实例,及制作方式实例,在工作中,我们会用到视频列表,UI如下: 1、 css3实现原创 2018-01-31 19:21:22 · 14702 阅读 · 1 评论