随笔分类 -  css

css规范 - bem
摘要：用我的话简述来说，即 B：何种元素 E：何种模块使用它（header,footer）等 M：描述它是做何种事情的 例如就是我有个主页，名称是：index.html index_header_logo 或 index-header-logo index_footer_concat 或 index-fo 阅读全文
posted @ 2019-01-24 20:05 Sunsin 阅读(195) 评论(0) 推荐(0) 编辑
z-index
摘要：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的比较 1. 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。 2. 对于同级元素，position不为static且z-index存在的情况下z-i 阅读全文
posted @ 2017-12-05 16:08 Sunsin 阅读(212) 评论(0) 推荐(0) 编辑
布局尺度单位介绍
摘要：布局分为以下三种: 1。layout viewport ,也就是这个浏览器默认的viewport 2。visual viewport , 浏览器可视区域viewport 3。 ideal viewport ,移动设备的理想viewport 1.px并不相通(适合pc设备) 2.rem并不相通(适合移动设备) 3.vh适用于两者之间(移动+PC) 设置viewport 1 为了达到理... 阅读全文
posted @ 2017-12-05 16:05 Sunsin 阅读(206) 评论(0) 推荐(0) 编辑
移动端(阿里rem)布局
摘要：Document 25元起 阅读全文
posted @ 2017-12-05 16:03 Sunsin 阅读(1496) 评论(0) 推荐(0) 编辑
H5移动前端完美布局之－margin百分比的使用
摘要：当然 现实情况没有这么糟糕...但因为前端页面是是最直接的展示给用户的 如果跟差异太大 这个页面其实是失败的 而设计师也会不断的找你调视觉，所以我们就要最大限度的实现设计 作为设计师和用户的桥梁完美的展现页面... 在移动端页面开发我们经常会遇到一件尴尬的事 我们所开发出来的页面跟设计师所给的页面差 阅读全文
posted @ 2017-12-05 16:01 Sunsin 阅读(516) 评论(0) 推荐(0) 编辑
css网页单位
摘要：1 2 3 4 5 6 7 8 Document 9 10 48 49 54 55 89 90 91 96 97 98 99 102 103 106 107 108 109 110 111 112 我1... 阅读全文
posted @ 2017-12-05 15:56 Sunsin 阅读(171) 评论(0) 推荐(0) 编辑
均匀分布
摘要：1 2 3 4 5 6 7 均匀分布 8 9 66 67 68 69 70 71 72 73 74 75 76 --> 77 78 ... 阅读全文
posted @ 2017-12-05 15:54 Sunsin 阅读(272) 评论(0) 推荐(0) 编辑
圣杯布局
摘要：1 2 3 4 5 15 18 19 24 25 26 27 圣杯gold 28 174 175 176 177 头部 178 179 180 181 主内容栏自适应宽度 1... 阅读全文
posted @ 2017-12-05 15:53 Sunsin 阅读(385) 评论(0) 推荐(0) 编辑
三栏布局
摘要：绝对定位 Left Main Right --> 圣杯布局 Left Main Right --> 双飞翼布局 Left Main ... 阅读全文
posted @ 2017-12-05 15:52 Sunsin 阅读(116) 评论(0) 推荐(0) 编辑
HTML5 移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
摘要：1 2 3 4 5 6 7 8 Document 9 38 39 40 41 --> 42 43 旧数据 旧数据 旧数据 旧数据 44 45 46 47 阅读全文
posted @ 2017-12-05 15:51 Sunsin 阅读(1844) 评论(0) 推荐(0) 编辑
h5移动端百分比
摘要：1 2 3 4 5 6 7 Document 8 45 46 47 48 49 50 51 52 53 54 55 56 阅读全文
posted @ 2017-12-05 15:50 Sunsin 阅读(1493) 评论(0) 推荐(0) 编辑
flex 布局示例
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex实例</title> <style> * { font-family: "微软雅黑"; } html, body { margin: 0; padding: 0; } h2 阅读全文
posted @ 2017-12-05 15:48 Sunsin 阅读(243) 评论(0) 推荐(0) 编辑
Chrome扩展之css used 获取网页样式
摘要：地址栏输入: chrome://extensions/ 然后获取更多扩展程序，得到css used 复制html节点 最后点击 "css used" 把样式全部复制下来即可 (记住样式和html节点一定要符合匹配) 完整示例图 阅读全文
posted @ 2017-12-05 10:58 Sunsin 阅读(1925) 评论(0) 推荐(0) 编辑
在线sass编译器
摘要：工作中，我们可能遇到突发情况（无法安装考拉，gulp以及webpack以及其它的自动化工具），我们这时就要用即时编译工具了，那么它就是你的首选： http://tool.oschina.net/ 阅读全文
posted @ 2017-10-30 16:25 Sunsin 阅读(1875) 评论(0) 推荐(0) 编辑
base64 图片编码之再优化
摘要：首先进入网站： http://b64.io/ 最多可减少图片体积容量近70%，建议不要优化base 64 图片格式为gif ， 已实测如果用gif的话会增加容量。 阅读全文
posted @ 2017-10-30 16:02 Sunsin 阅读(789) 评论(1) 推荐(0) 编辑
h5样式初始化
摘要：nav, header, section, article, aside, footer { display: block; } body, p, pre, hr, ul, dl, dd, h1, h2, h3, h4, h5, h6 th, textarea, td, ol, menu, lege 阅读全文
posted @ 2017-10-27 13:22 Sunsin 阅读(1114) 评论(0) 推荐(0) 编辑
photoshop 雪碧图制作
摘要：图片拖入后 一般取同行同列最高最宽 自动在所选目录生成 打开: 修改 四次请求有点多啊. 打开 （下载）css sprite 自动生成坐标地址. 不过我们要把它排远一点 OK了。 我们生成以后: 坐标地址就可以直接用了，不用一个像素的移了 因为生成时，也会产生文件，所以我们还是选择源文件夹吧. 雪碧 阅读全文
posted @ 2017-10-27 13:18 Sunsin 阅读(3550) 评论(0) 推荐(0) 编辑
css雪碧图（css splite）
摘要：将很多小的背景图片放在一起，可以减少http请求. 这些图片通常是一类的。 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0 阅读全文
posted @ 2017-10-27 12:58 Sunsin 阅读(488) 评论(0) 推荐(0) 编辑
base64减少图片请求
摘要：1. 使用base64减少 a) 2. 页面解析 CSS 生成的 CSSOM 时间增加 Base64 跟 CSS 混在一起，大大增加了浏览器需要解析CSS树的耗时。其实解析CSS树的过程是很快的，一般在几十微妙到几毫秒之间。 CSS 对象模型 (CSSOM)：CSSOM是一个建立在web页面上的 C 阅读全文
posted @ 2017-10-27 12:55 Sunsin 阅读(674) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示