css
fechild
这个作者很懒,什么都没留下…
展开
-
css background详解
css background background-size不起作用原创 2017-04-18 11:40:29 · 499 阅读 · 0 评论 -
常用的css
1.手机端:防止用户长按文字选中(user-select)兼容性:ios:加-webkit-前缀全部支持android:加-webkit-前缀全部支持2.手机端常用的transform(translate/scale/rotate)兼容性ios: ios8.1-8.4 要加上-webkit-前缀 其余系统版本支持android: 安卓4.4及以下要加上-webkit-...原创 2019-04-16 18:41:11 · 174 阅读 · 0 评论 -
flex布局:justify-content、aign-content、align-items
1.justify-content:弹性盒子在主轴方向上的排列方式,例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <style type原创 2018-08-20 14:16:26 · 5539 阅读 · 0 评论 -
inline-block按行排列有3px的误差
<div class="line"> <span class="item"></span> <span class="item"></span> <span class="item"></span><原创 2018-08-27 14:33:59 · 487 阅读 · 0 评论 -
使用于所有手机的0.5px的border
1px的线在手机上会影响美感,太粗,这个时候,需要兼容所有手机的0.5px的线。iphone手机支持.5px的设置,字体方面也是支持任何大小的字体。而安卓手机不支持.5px的设置,浏览器会渲染为1px。在字体方面,安卓手机最小支持8px的字体设置,如果设置的再小点,还是显示为8px的大小。(Webkit内核的适用范围较为广泛,Android原生浏览器、苹果的Safari、谷歌的Chrome(And...原创 2018-08-27 11:54:33 · 837 阅读 · 0 评论 -
css 优先级
<!DOCTYPE html><html><head><style>/*1, answer: blue. 把li和ul调换顺序也一样*/ul { color: red;}li { color: blue;}/*1, answer: blue*/ul li { color: red;}#must-buy ...原创 2018-06-06 18:07:36 · 807 阅读 · 0 评论 -
position: sticky实现吸顶操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> </style></head><body&g原创 2018-04-28 17:16:10 · 1042 阅读 · 0 评论 -
未知高度和宽度元素 上下左右居中
未知宽高元素水平垂直居中 .outer { position: fixed; width: 100%; height: 100%; top: 0; left: 0; } .inner { position: absolute; left: 50%; margin-left:原创 2018-04-19 09:59:38 · 901 阅读 · 0 评论 -
前端踩坑
1.display遇上transition。需求:元素渐隐渐现,或者带有某种动画出现时,也就是说元素刚开始的样式display:none, opactiy: 0, transition: all ease 500。后续用js控制元素的样式让其渐现:ele.style.display='block', ele.style.opacity=1。会发现动画也就是opacity并没有生效。原因是因为:op...原创 2018-03-21 15:15:32 · 226 阅读 · 0 评论 -
css3
一、css3新特性1.position新增:sticky,表现为吸顶,当元素在视野范围内时,与position:relative,表现相同,当元素不在视野范围内时,与position:fixed表现相同。但是需要注意的一点是:sticky属性必须与top、left、bottom、right任意之一结合才可以生效。例子:<!DOCTYPE html><html lang="en"...原创 2018-03-07 11:43:47 · 148 阅读 · 0 评论 -
带指示箭头的下拉菜单(css)
.wrap { position: relative; background-color: white; border: 1px solid grey; width: 300px; height: 600px; } .triangle1 { display: block; position: absolute; width:原创 2017-12-29 17:46:51 · 5115 阅读 · 0 评论 -
手机端的宽度
当我们在编写手机端页面时,需要兼容各种宽度的手机,这个时候,对于大的包裹元素,一般不会直接设置其宽度,这个时候,可以使用css3的calc函数,它的使用语法为calc(expression); 其中这个expression可以包括任何css的长度度量方式,例如:百分比、rem、em等。我们知道,当我们对一个元素设置width: 100%时,表示,它的元素宽度为它的containing box的宽度...原创 2017-12-15 18:11:38 · 937 阅读 · 0 评论 -
css元素的堆叠顺序(z-index堆叠上下文(stack contex))
问题:什么是堆叠上下文?怎样才能形成堆叠上下文?在堆叠上下文中,元素是怎么排列的?结论:元素是根据堆叠上下文排列的,如果设置了z-index则形成了一个堆叠上下文。同一个堆叠上下文中的元素,按照其z-index的顺序堆叠,没有设置则按照其内部元素出现的顺序堆叠。详解:一、没有z-index的情况,按照下列原则排列:1.position为static处在默认的堆叠上下文中,(忽略top left r...原创 2017-12-15 16:33:48 · 2497 阅读 · 0 评论 -
css-block背景色的投影
投影 box-shadow定义:box-shadow:h-shadow, v-shadow, blur, spread, color, inset下面分别介绍以上各个属性的意义,color最容易理解,就是阴影的颜色呗,这个不做测试了。先来介绍h-shadow和v-shadow,字面的理解是水平方向和垂直方向的投影。在这里指的是水平方向和垂直方向的投影相对于原始位置的偏移量。而原始位置,原创 2017-10-27 18:25:39 · 2533 阅读 · 0 评论 -
ps 切图
前端开发人员在开发一些比较炫的网页时,经常需要进行切图。这个时候,怎样切图,需要切哪些图,决定了开发的效率。本文简单讲解下,我在实践过程中的总结。1.怎样切图?用哪个软件切图取决于设计给你哪种格式的设计图,一般来说为psd图或者sketch图,psd图用photoshop切取,而sketch图用sketch软件进行截取。本文简单介绍如何用ps进行切图。首先应该明白一个概念,psd图是由图层原创 2017-04-18 14:13:41 · 475 阅读 · 0 评论 -
手机端 不断向上或者向下跳动的 提示箭头
现在,手机端微信中经常会出现按页浏览的宣传性的页面。其中每一页的最下方会出现 向上跳动的箭头,用来提醒用户向下滑动到下一页,继续浏览。本文介绍如何用css编写这个提示箭头。动效如下图所示模板部分和css部分如下: .arrow_up{ //居中 position: absolute; left: 50%; bottom: 100px; c原创 2017-04-18 13:50:57 · 5990 阅读 · 1 评论 -
border-left、border-right、border-top、border-bottom深入理解
一、有宽和高1.一个矩形的4个边的组成部分.box { border-right: 55px solid red; width: 200px; height: 200px; border-bottom: 55px solid blue; border-left: 55px solid yellow; border-top: 55px solid...原创 2019-04-17 18:44:20 · 9993 阅读 · 0 评论