![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
qq_30325409
不要厌烦熟悉的事物,每天都进步一点;不要畏惧陌生的事物,每天都学习一点;
展开
-
CSS3滚动条美化,CSS3滚动条皮肤
SS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条。下面是5个滚动条样式。css代码12345678910转载 2016-09-12 17:44:11 · 592 阅读 · 0 评论 -
10 分钟理解 BFC 原理
一、常见定位方案在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中...转载 2018-03-07 15:49:00 · 250 阅读 · 0 评论 -
CSS常见布局解决方案
说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案。水平居中布局首先我们来看看水平居中1.margin + 定宽div class="parent"> div class="child">Demodiv>div>style> .child { widt转载 2017-05-03 09:51:30 · 389 阅读 · 0 评论 -
CSS技巧(二):形状
1. 自适应的椭圆背景知识:border-radius属性的基本用法使用border-radius制作一个圆很简单,只要给任何正方形元素设置固定宽高及一半长度以上的border-radius,就可以得到圆形1234background: #fb3;width: 200px;height: 200px;border-radius: 100px; /*转载 2017-03-29 17:32:34 · 417 阅读 · 0 评论 -
CSS技巧(一):背景与边框
背景与边框1.半透明边框背景知识:rgba/hsla,在rgb/hsl的基础上增加了Alpha通道,用于设置颜色的不透明度(就是能透过多少背景)rgba接受四个数值,即rgba(red, green, blue,a),rgb可以为数值(0 ~ 255),也可以为百分比(0 ~ 100%),a表示不透明度(0~1),1为完全不透明,0表示完全透明。rgba(0转载 2017-03-29 17:31:26 · 1117 阅读 · 0 评论 -
ie6-ie8不支持opacity,rgba解决方法
半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常。但是这样在ie6-ie8中是不支持的,需要加上下面这句话:filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); 这里的opacity是百分比的opacity表示透明度,默认的范转载 2016-11-01 14:24:14 · 1637 阅读 · 0 评论 -
CSS书写顺序
作者:词晖链接:https://www.zhihu.com/question/19586885/answer/48933504来源:知乎著作权归作者所有,转载请联系作者获得授权。CSS书写顺序 1.位置属性(position, top, right, z-index,display, float等) 2.大小(width, height, padding, marg转载 2016-09-08 17:51:36 · 234 阅读 · 0 评论 -
7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
今儿,我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位,类似pixel 和 em 这样的,但是很有可能你之前从来就没听过这些家伙们!rem我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设置的font转载 2016-09-23 10:58:40 · 474 阅读 · 0 评论 -
网页字体设置你了解吗
以前做项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等类似的字体,然而当更多的设备和系统出现后,以前这样的设置已不能满足网页在各设备上的显示需求。就拿最简单的宋体(simsun)来说吧,在Windows系统下显示是一个比较容易阅读的字体,然而在Mac上简直无法直视,如下图给出一个优化前后页面转载 2016-09-06 14:59:20 · 299 阅读 · 0 评论 -
:after伪类+content内容生成经典应用举例
一、简单说说content内容生成content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外,目前Opera 9.5+ 和 Saf转载 2016-08-24 15:21:32 · 1315 阅读 · 0 评论 -
移动端上的设计和适配
面对于不同移动设备,特别是针对于屏幕高度的设计和适配,一直是困扰着视觉和前端。特别是设计师和前端开发人员之间的协调,沟通的成本也随着增加。那么这篇文档,主要是用于移动端设计和适配(针对屏幕高度方面),希望通过文档的形式能减少设计师和开发人员之间的一些沟通成本,同时让前端开发人员用最低的时间成本来完成终端设备的UI适配工作。了解一些概念不管是设计师或者开发人员,对于一些概念都应该要有一定的了...转载 2018-07-27 18:43:38 · 3055 阅读 · 0 评论