nannanyu - 博客园

2019年5月10日

摘要：首先两者都是两边宽度固定，中间宽度自适应，并且中间盒子(主题内容)放在最前面，以便优先渲染。实现方案：都使用浮动来实现。圣杯布局实现如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</ti 阅读全文

posted @ 2019-05-10 12:05 nannanyu 阅读(107) 评论(0) 推荐(0) 编辑

2019年5月9日

css常用布局

摘要： 1.实现div的水平垂直居中 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> *{ margin:0; padding:0; } /*不需固定宽高*/ .box{ b 阅读全文

posted @ 2019-05-09 17:13 nannanyu 阅读(149) 评论(0) 推荐(0) 编辑

2019年4月26日

基础总结（05）-- 回流和重绘

摘要：回流：由于元素的宽高/隐藏/布局发生变化等变化导致render 树重新构建的过程被称为回流。 render树重新构建后，需要重新渲染页面，这个过程就是重绘。重绘：影响元素外观的某些属性（如color/bacnground-color…）发生变化时需要重新渲染页面的过程叫做重绘。所以回流一定会引起阅读全文

posted @ 2019-04-26 15:05 nannanyu 阅读(130) 评论(0) 推荐(0) 编辑

基础总结（04）-- display:none;&&visibility:hidden;区别

摘要： display:none 1.使元素隐藏，不再占据空间。 2.动态操作时会引起页面回流和重绘，影响性能。 3.子元素也会被隐藏并且添加display:block/visibility:visible无效。 visibility:hidden 1.使元素隐藏，占据空间。 2.只引起页面重绘，性能开销相阅读全文

posted @ 2019-04-26 14:46 nannanyu 阅读(159) 评论(0) 推荐(0) 编辑

2019年4月25日

js实现点击按钮复制文本功能

摘要：最近项目活动中用到复制文本功能，发现在chrome中之前的clipboard的demo失效了，查了下发现是因为版本升级导致的。最新用法如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> 阅读全文

posted @ 2019-04-25 11:15 nannanyu 阅读(2623) 评论(0) 推荐(1) 编辑

2019年4月18日

基础总结（03）-- css有趣的特性

摘要： 1.currentColor:可用于background/border-color/渐变/box-shadow/svg填充色，颜色继承自color. 待补充… 阅读全文

posted @ 2019-04-18 15:34 nannanyu 阅读(151) 评论(0) 推荐(0) 编辑

2019年4月17日

基础总结（02）--BFC（块级格式化上下文）

摘要： BFC（块级格式化上下文）布局规则 1.元素垂直排列。 2.同一个BFC相邻两个元素的margin会重叠。 3.BFC区域不会与浮动元素重叠。 4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 5.计算BFC的高度时，浮动元素也参与计算。如何创建BFC 阅读全文

posted @ 2019-04-17 16:20 nannanyu 阅读(90) 评论(0) 推荐(0) 编辑

基础总结（01）--css清除浮动几种方法

摘要： 1.父元素添加overflow：auto/hidden; 2.父元素内加空div,添加样式clear:both; 3.父元素添加伪类; .parent:after{ content:''; display:block; clear:both; } 阅读全文

posted @ 2019-04-17 11:36 nannanyu 阅读(123) 评论(0) 推荐(0) 编辑

2018年4月28日

vue设置路由跳转参数，以及接收参数

摘要：最近做Vue项目，遇到了一个路由跳转问题：首页要跳转到项目页指定的Tab选项卡项，一开始总是跳到默认项。解决方法如下：在跳转链接处设置了路由跳转参数，如下： <router-link :to="{path:'/project',query:{tab:0}}" >项目页</router-link> 阅读全文

posted @ 2018-04-28 14:20 nannanyu 阅读(824) 评论(0) 推荐(0) 编辑

2018年1月17日

vue学习笔记（一）--Tab切换

摘要：最近在学Vue，写的第一个demo是Tab,刚开始还直接把js代码贴过来改，没觉得有什么不同。然后请教别人说，用Vue最好不要操作dom啦，又把代码做了修改-_-。 html代码如下： <div id="tab"> <ul> <li @click="toggle(index,list.conent) 阅读全文

posted @ 2018-01-17 10:59 nannanyu 阅读(160) 评论(0) 推荐(0) 编辑