css

vue父子组件状态同步的最佳方式续章(v-model篇)
日志大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...
1
vue 通过css实现输入框居中输入
日志今天开发时突然想写blog了,水一下(o゚v゚)ノ css代码 .inputStyle { text-align: center;/*主要就是这个,下面的都是样式*/ width: 6rem; hei ...
1
javascript事件环微任务和宏任务队列原理
日志哈喽!大家好!我是木瓜太香,我又来嘞,今天来说说前端面试中经常别问到的 JS 事件环问题. JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事 ...
1
vue父子组件状态同步的最佳方式
日志哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面 ...
1
vue、react等SPA应用页脚组件闪烁的解决办法
日志大家好,我是木瓜太香.大家在开发单页应用的时候,经常会遇到这样的需求,头部和尾部两个组件是大多数组件公用的,而中间的内容区域则是单独存在的,而且一般内容组件逻辑会比较多,如果我们不停刷新页面可能会出现 ...
DOM监控 MutationObserver | 木瓜太香
日志DOM监控 MutationObserver 大家好!我是木瓜太香,一个传播webstorm使用技巧的前端工程师,这一次给大家带来的是 DOM 监控的方法. MutationObserver接口提供了 ...
css动画是否会被js阻塞
日志css动画是否会被js阻塞 css的动画部分是会被js阻塞的,不过transform的动画则不会受影响. 下面举一个margin-left移动的动画下,启动js阻塞动画的性能图表 <style& ...
1
flex布局学习总结
日志最近项目主要是小程序,小程序里面的布局主要采用flex布局,之前对flex 布局只是稍作了解,总结下flex 布局的常用套路 容器 Flex是Flexible Box的缩写,意为"弹性布局& ...
css实现椭圆
日志先实现个简单点的,用css实现一个圆,ok,直接上代码: .circle{ width: 100px; height:100px; background: red; border-radius: 50 ...
css实现心形图案
日志用1个标签实现心形图案,show you the code; <!DOCTYPE html> <html lang="en"> <head> & ...
响应式布局-媒体查询
日志媒体查询(@media):能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果 列举常用的pc屏幕宽度: 1024  1280  1366  1440  1680  1920  ...
css布局(转载)
日志单列布局 水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素 ...
[CSS布局]简单的CSS三列布局
日志前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...
[css]等高列的简单实现
日志又碰到css等高布局的问题,发现以前没有总结,这里再把基本原理写一下吧. 1.负边距控制法. <div id="content"> <div class=&quo ...
[css知识体系]flexbox模型
日志背景 flexbox 模型的产生主要是为给布局.对齐和容器内的空间分配提供一个更有效的方法,即使尺寸未知或是动态改变的(flex,收缩,弹性 就是为此命名). flex布局使得容器能够改变子元素的宽高 ...
CSS input 框的一些事情
日志1.input框光标太长与不居中的问题 如果input框height:40px 为了字体垂直居中line-height也设为40px 问题来了,这样光标在刚刚focus时候是占据整个input框并且输 ...
css对齐 块内或者行内图片与文字居中对齐最靠谱的方式!
日志块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...
CSS div的背景图完整图片覆盖
日志最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...
CSS 三栏布局的经典实现
日志要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...
网页布局基础 css布局学习总结
日志三种定位机制 1.标准文档流:从上到下,从左到右输出文档内容 2.浮动 3.绝对定位 需要注意的是块级元素如div p ul 等 行级元素如span strong img input等 块级元素与行级 ...