css
关注
分享
扫一扫
文章平均质量分 75
liu__software
这个作者很懒，什么都没留下…
展开
-
CSS设置下划线与文字间距距离改用border实现
css的写下划线 text-decoration: underline;但是这样的样式下划线太靠近文字了 如图。转载 2023-03-02 10:35:03 · 1239 阅读 · 0 评论 -
深入理解CSS之 如何使子元素撑宽撑开宽度 设置了display: block； 的父元素
HTMLCSS效果图。转载 2023-03-01 12:39:07 · 5446 阅读 · 0 评论 -
详解filter与fixed冲突的原因及解决方案
但是，如果 filter 作用在根元素（即 html 标签）时，它是不会为 absolute 或 fixed 子元素创建新的包含块的。ps：HTML 元素是 max(屏幕高度, 内部元素高度)属性，那么它会为其创建一个新的包含块/容器，会造成该。元素就会根据这个包含块进行定位，所以我们会看到。元素的定位元素，变成新创建的元素）。就会生成一个新的包含块，其位置大小和。的时候，如果该元素或者其子元素具有。元素的定位发生变化（就是改变了。滤镜属性的时候，会导致。转载 2023-02-28 11:39:55 · 649 阅读 · 0 评论 -
移动端开发1px像素线条变粗的原因与解决方法
移动端1px像素线变粗的原因在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，UI审查的时候也常常会觉得分割线或则边框线太粗了，要更细一点，但是一看代码，已经是1px了，为什么看着还是那么粗呢？要知道问题的原因首先要了解一下几个概念：(1)物理像素(physical pixel)一个物理像素是显示器（手机屏幕）上最小的物理显示单元（像素颗粒），在操作转载 2021-12-21 15:30:47 · 1259 阅读 · 0 评论 -
css常用font-family
实例例1（小米米官网）：font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; 例2（淘宝技术研发中心）：font: 12px/1.5 tahoma,arial,'Hiragino Sans...转载 2020-04-21 10:31:19 · 692 阅读 · 0 评论 -
经典CSS实现三角形图标原理解析
前言： 在写这篇文章之前，我也看过很多前端大神写的代码，But，都只是粘贴代码和给出显示效果，对于初学者来说大家都喜欢刨根问底，为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解：border边框语法： border 四条边框设置border-left 设置左边框，一般单独设置左边框样式使用border-right 设置右边框，一般单独设置右边框样式使转载 2017-11-15 14:08:51 · 521 阅读 · 0 评论 -
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px：绝对单位，页面按精确像素展示 IE5+em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 IE5+rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE转载 2018-04-13 17:51:33 · 1353 阅读 · 0 评论 -
iOS---z-index失效导致的原因
iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效转载于：https://my.oschina.net/yjjjjjj/blog/993805转载 2018-10-17 09:15:12 · 8635 阅读 · 0 评论 -
深入理解CSS中的层叠上下文和层叠顺序
零、世间的道理都是想通的在这个世界上，凡事都有个先后顺序，凡物都有个论资排辈。比方说食堂排队打饭，对吧，讲求先到先得，总不可能一拥而上。再比如说话语权，老婆的话永远是对的，领导的话永远是对的。在CSS届，也是如此。只是，一般情况下，大家歌舞升平，看不出什么差异，即所谓的众生平等。但是，当发生冲突发生纠葛的时候，显然，是不可能做到完全等同的，先后顺序，身份差异就显现出来了。例如，杰克和罗斯，...转载 2018-10-17 09:17:01 · 287 阅读 · 0 评论 -
让高度百分比，height:100% 生效的3种方法
核心原理；height:100%这个概念是子节点相对于父容器而言；所以要让此属性生效，必要的一点就是：父容器必须具有具体的高度信息；直接在<body>的子节点（如div中）写height:100%是不会生效的，因为此时<body>的高度是不确定的，默认是auto；方法一给从根的父容器到子容器的所有容器都设置好百分比高度信息比如：<!DOCTYPE...转载 2018-10-25 17:15:20 · 3009 阅读 · 0 评论 -
纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方法1：table-cellhtml结构： 1 2 3 <div class="box box1"> <span>...转载 2018-12-06 15:12:38 · 194 阅读 · 0 评论 -
表单元素input、按钮、文字完美垂直居中对齐方法
本文最终总结出来办法就是要对齐的表单内容（含文字、图片、表单各种元素、label）字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)，其中个别的input元素如radio的padding和margin设置为0，即可完美解决表单元素input等对齐问题。最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复...转载 2018-12-19 14:05:59 · 2804 阅读 · 0 评论 -
input输入框中的光标上下不居中的解决方法
谷歌和火狐下input输入框中的光标大小显示不一致input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。一直没弄明白为什么这样...转载 2018-12-19 14:08:18 · 1661 阅读 · 0 评论 -
css控制单行或者多行文本超出显示省略号
1.单行文本使用text-overflow：ellipsis属性text-overflow: clip|ellipsis|string;clip：修剪文本。ellipsis：显示省略符号来代表被修剪的文本。string：使用给定的字符串来代表被修剪的文本。示例：css: 1 2 3 4 5 6 7 8 ...转载 2019-08-14 17:29:34 · 321 阅读 · 0 评论 -
css样式可以使用百分比的属性--总结
css样式可以使用百分比的属性–总结可以使用百分比的样式属性: 定位：top,right,bottom,left; 盒模型：height,width,margin,padding, 背景：background-position,background-size(CSS3), 文本：text-indent， line-height字体：font-size;各个属转载 2017-08-07 20:50:52 · 936 阅读 · 0 评论 -
CSS隐藏元素 display visibility opacity的区别
一、CSS元素隐藏在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。后宫选秀——一个一个看。{ display: none; /* 不占据空间，无法点击 */ }{ visibility: hidden; /* 占据空间，无法点击 */ }{ position: absolute; clip:rect...转载 2019-10-22 16:33:03 · 1100 阅读 · 0 评论 -
使用 CSS3 实现超炫的 Loading（加载）动画效果
SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）转载 2014-03-18 22:44:34 · 1510 阅读 · 0 评论 -
transform使用参考指南
语法transform ：none | [ ]*取值指定一个身份转变说明应用于block水平和inline水平的元素。transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现在设置了transform属性后，可以设置transform-origin属性，这个属性控制变形时转载 2014-03-20 14:03:48 · 716 阅读 · 0 评论 -
css3效果展示及演示
transform(变形)和transform-origin(变形原点)-Css3演示:http://www.css88.com/tool/css3Preview/Transform.htmlcss3动画及介绍:http://goodboy5264.blog.163.com/blog/static/25382982010427101518260/原创 2014-04-02 21:18:11 · 859 阅读 · 0 评论 -
CSS3 Gradient 渐变
CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient─CSS3转载 2014-04-22 10:34:35 · 672 阅读 · 0 评论 -
css position相对定位绝对定位
今天研究了一下，总算有所了解。在此总结一下：先看下各个属性值的定义： 1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。转载 2014-04-25 11:47:16 · 776 阅读 · 0 评论 -
CSS3 Media Queries 屏幕自适应
Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> link href="css/style.css" rel="stylesheet" type="text/css" med转载 2014-06-13 10:29:08 · 883 阅读 · 0 评论 -
CSS3 timing-function 贝塞尔曲线
timing-function timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效，有多种特效展示。这里得涉及到一个学术性的话题：貝茲曲線。W3C给出的一张曲线图。 cubic-bezier即为貝茲曲線中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P转载 2014-08-11 15:08:50 · 868 阅读 · 0 评论 -
HTML5之SVG详解（一） 时间 2012-12-21 19:49:00 博客园-原创精华区 原文 http://www.cnblogs.com/hupeng/archive/2012/12/2
1、背景SVG是Scalable Vector Graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过XML来表现矢量图形的技术——SVG！由于SVG也是一种XML文件，所以SVG也继承了XML的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持SVG，大家可以从 这里 得到更多的兼容信息，其中包括：使用或者元素来显示基本的SV转载 2015-08-21 13:35:44 · 2589 阅读 · 1 评论 -
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
http://www.jb51.net/css/41448.html转载 2016-06-02 15:54:13 · 941 阅读 · 0 评论 -
Flex 布局教程：语法篇
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就转载 2016-06-29 12:43:18 · 753 阅读 · 0 评论 -
移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：input,textarea { border: 0; /* 方法1 */ -webkit-appearance: none; /* 方法2 */}转载 2017-01-20 17:18:30 · 17724 阅读 · 0 评论 -
大小不固定的图片、多行文字的水平垂直居中
本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持转载 2017-03-10 23:08:25 · 417 阅读 · 0 评论 -
CSS选择器的浏览器支持
CSS选择器的浏览器支持下面是一系列关于最流行的浏览器对CSS选择器和伪选择器的支持情况的测试。该测试包括从过去美好的CSS1到当前时髦的CSS3最基本的东西。如果你想了解关于CSS的选择器的更多内容，W3C官方文档绝对是个好地方!如果你发现了任何错误(这个，大家都会发生的)或者有任何看法，请在前端观察联系我们。CSS 1↓ 选择器 / 浏览器 →转载 2017-04-26 21:58:04 · 1310 阅读 · 0 评论 -
纯CSS制作的图形效果
今天这个教程中主要和大家一起来探讨和学习：如何使用CSS来制作图形，比如说圆形，半圆形，三角形等。前面有几个教程中都有使用了纯CSS使用border来制作三角形，今天我特意在网上查阅了一下，介绍这样的教程还是蛮多的，因此我也决定整理一份相关教程出来与大家一起分享。最早发现使用border制作三角形是人物Eric Meyer的发现的，但我没有找到Eric Meyer介绍的教程，可相关教程就很多，我在转载 2014-03-18 09:35:01 · 1062 阅读 · 2 评论