css3
理个以哈呦
这个作者很懒,什么都没留下…
展开
-
em和rem的区别
用户的浏览器默认渲染的文字大小是“16px”,换句话说,Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”,当然也是可以修改的。em是针对响应式页面的,是一个相对的单位,这里的相对指的是相对于元素父元素的font-size。 比如说:如果在一个<div>设置字体大小为“16px”,此时这个<div>的后代元素教程了是将继承他的字体大小,除非重新在其后代元素中进行过显示的原创 2016-01-26 20:53:47 · 965 阅读 · 0 评论 -
css实现垂直居中(兼容)
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .middle-box{display: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 au转载 2016-08-23 10:00:46 · 315 阅读 · 0 评论 -
模仿bootstrap实现边框效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Ty原创 2016-08-19 09:44:52 · 4233 阅读 · 0 评论 -
css设置placeholder
input::-webkit-input-placeholder { color:#fff; text-align: center; font-size: 0.46rem;}input:-moz-placeholder { color:#fff; text-align: center; font-size: 0.46rem;}input:-ms-p原创 2016-06-22 16:27:34 · 1142 阅读 · 0 评论 -
CSS3嵌套立方体旋转
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> html{ background: linear-gradient( yellow 0%,#000 80%); height: 100%;原创 2016-07-12 11:26:01 · 1170 阅读 · 0 评论 -
SCC3实现文字背景动态滑动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .te{ width: 600px; height: 700px; margin: 10px aut转载 2016-02-18 13:41:24 · 772 阅读 · 0 评论 -
图片左右垂直居中显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .te{ width: 700px; height: 600px; margin: 10px aut原创 2016-02-18 13:20:46 · 311 阅读 · 0 评论 -
css selection改变文字反选的背景颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> p::-moz-selection{ /*针对Firefox*/ background:#cc0000; color:#ff原创 2016-02-17 22:30:49 · 553 阅读 · 0 评论 -
css overflow:hidden为什么会失效
现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?我们知道,overflow属性值有这几种: visible:声明内容不会被剪裁。比如内容可能被渲染到容器外面。 hidden:声明内容将被剪裁,并且也甭想使用滚动条来查看剪裁掉的内容。 scroll:声明内容将被剪裁,但有可能出现滚动条来查看被剪裁掉的内容。滚动条出现的位置在inn转载 2016-02-17 21:41:58 · 10867 阅读 · 2 评论 -
css绘制带箭头对话框
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Test</title> <style> .tip { position: relative; background-color: deepskyblue; margin原创 2016-02-17 16:37:27 · 8892 阅读 · 1 评论 -
css中文字体对应英文写法
宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB231原创 2016-02-17 16:04:32 · 425 阅读 · 0 评论 -
CSS定位absolute和relative
absolute绝对定位,分为两种 不设置相对点进行定位,设置相对点进行定位,绝对定位的,工作方式相对于设置了position属性的元素进行定位,浏览器会一级一级的向上查找,如果到body最后都没有找到,那就默认是相对于body(整个页面)进行定位,会脱离文档流。/**不设置任何父元素的属性为position**/<!DOCTYPE html><html lang="en"><head>原创 2016-01-27 20:24:47 · 319 阅读 · 0 评论 -
base64编码图片替换url图片
移动端,网络请求是很珍贵的资源,尤其在2g或者3g网络下,所以能不发请求的资源都尽量不要发,对于一些小图片icon之类的,可以将图片用base64编码,来减少网络请求。/**将图片转化成base64编码 (多用于小图片)**//**使用时勾选 包含头和包含css这时候回自动添加background-image:**/工具:将图片转化成base64编码 转化图片 /**转换后的base64的编码原创 2016-01-29 16:05:50 · 375879 阅读 · 1 评论 -
Css3绘制圆形
/**通过box-shadow绘制圆形**/基本语法是box-shadow: h-shadow v-shadow blur spread color inset;box-shadow属性的参数设置取值:inset:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;h-shadow:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时原创 2016-01-29 10:22:45 · 2315 阅读 · 0 评论 -
面试题
CSS部分一、一个元素100%显示,又必须有一个固定的padding-left/padding-right,还有1px的边框,不允许出现滚动条,怎么办?{ box-sizing:border-box; -webkit-box-sizing:border-box;}转载 2016-01-29 15:31:09 · 261 阅读 · 0 评论 -
CSS水平垂直居中
使用场景 单行内容 固定高度 height=line-height,既可以达到垂直居中,水平居中因为div是块级元素,居中需设置text-align: center;/**适合在所有浏览器,没有足够空间时,内容不会被切掉**/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document转载 2016-01-27 14:29:58 · 336 阅读 · 0 评论 -
CSS3动画-表盘
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body,html{ color: #fff; font-family: 'Sourc原创 2016-01-29 10:57:24 · 744 阅读 · 0 评论 -
css3 添加三角形
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .c1 { width: 0; height: 0; bord原创 2016-01-27 11:07:42 · 476 阅读 · 0 评论 -
css单位rpx
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 1px.原创 2017-04-13 14:52:17 · 9198 阅读 · 0 评论