随笔分类 -  HTML&CSS

图片加载防止窗口抖动，又可以等比例缩放
摘要：由于html加载最后才会加载图片,所以如果没有提前设置高度的话,就会出现窗口抖动,用户体验很不好. 如果固定死高度的话，又不能于宽等比例缩放。 解决办法: 已知原图的宽高比例 例如:此图宽500,高321,高/宽为64.2% 方法一: 不考虑兼容性(即手机端开发): 直接设置height: 64.2 阅读全文
posted @ 2018-08-05 21:39 echo'coding' 阅读(593) 评论(0) 推荐(0)
常见的布局方式实现
摘要：单列布局 HTML： <div class="parent"> <div class="child"></div> </div> 一.水平居中（常见的，那些什么table，导致性能不好的就不说了） 实现效果： 1.使用inline-block和text-align实现 <style> .parent 阅读全文
posted @ 2018-07-27 10:40 echo'coding' 阅读(211) 评论(0) 推荐(0)
css选择器---继承,优先级,层叠
摘要：CSS三大特性—— 继承、 优先级和层叠。 继承：即子类元素继承父类的样式; 优先级：是指不同类别样式的权重比较; 层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。 css选择符分类 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如：body,div,p,ul,li) 2 阅读全文
posted @ 2018-07-17 10:28 echo'coding' 阅读(413) 评论(0) 推荐(0)
前端性能优化---减少http请求数量和减少请求资源的大小
摘要：减少http请求数量：就是资源的合并 减少http请求大小：就是资源的压缩 一、资源合并的原理： 资源不合并的缺点： 1.文件和文件之间有插入请求 请求a.js,b.js,c.js（三行请求）合并之后只需要请求一行（请求a-b-c.js）,不合并增加了N-1个网络延迟，上图而言是增加了2个网络延迟。 阅读全文
posted @ 2018-07-12 12:10 echo'coding' 阅读(4081) 评论(0) 推荐(0)
weui&flexible布局
摘要：1.weui 一开始以为只能用于小程序中，原来分两种：weui-wxss-master和weui-master。真的是强大的不得了，把设计好的样式和功能封装。然后分类，有明确的层级和逻辑，感动！！值得学习，并且开发一套属于自己并且不断更新的样式和功能！ 2.还有类似的ANTDESIGN,Living 阅读全文
posted @ 2018-06-23 14:51 echo'coding' 阅读(4303) 评论(0) 推荐(0)
清除浮动
摘要：经常会说没有清除浮动的话就会导致高度坍塌，啥是高度坍塌呢？1.什么是高度坍塌？简单来说就是包含有浮动元素的上一级元素（即父级元素）高度变为0了。下图有浮动元素的父级元素border设置为绿色，但是高度变为了0. 高度坍塌 高度坍塌 为包含浮动元素的父级元素： 未设置浮动.png 未设置浮动.png 阅读全文
posted @ 2018-06-23 14:48 echo'coding' 阅读(180) 评论(0) 推荐(0)