weixin_44823731的博客

styled-components的作用：用来在react中编写css样式，css in js1.安装yarn add styled-components2.styled-components基本使用index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './styled_component_test/01_styled_components复习';import { Theme

实现前端响应式的布局的方法有很多种，下面我介绍的是使用rem跟vw/vh这两种方法来实现响应式页面。1.使用rem来实现响应式布局rem：是一个相对根元素字体大小的单位。总的来说就是一个相对单位。看到rem这个单位，很多人就会想起em这个单位，em也是属于相对单位，但是他是相对于父元素字体大小的单位。根元素是html，不是body。使用方式：html { font-size: 100px;}p { font-size: 0.16rem; }div { width: 2rem;}

margin的负值的情况分为两种：margin-left、margin-top：当这两个的属性值为负值的时候，自身会根据负值的大小来向左和上方向偏移。margin-right、margin-bottom：当这两个的属性值为负值的时候，自身的位置不会发生改变，但是会影响自己身后的元素。这两个为负值，相当于自己的宽度缩小（宽度缩小是表示自己占用的宽度变小，但是不会影响自身元素的显示。当负值到达-100%的时候，自身的就不占用宽度，如果由于宽度不够而导致的换行，就会偏移到原来的位置），导致后续的元素向自己偏移

使用svg和circle来实现进度条。circle标签的属性：cx：圆心的x坐标cy：圆心的y坐标r：圆的半径fill：填充的颜色stroke：边框的填充的颜色stroke-width：边框的大小stroke-dasharray：圆的周长2PIRstroke-dashoffset：等于周长就是边框空白，等于0就填充完边框实现原理：画出两个圆，两个园的边框填充颜色不一样，填充第一个园的边框，动态改变第二个元的stroke-dashoffset的值，让它从圆的周长变到0，然后填充完整个边.

padding和margin的百分比是根据容器的宽度来计算的。宽度！宽度！宽度！！！！

处理在js中因为浏览器兼容而产生的重复的代码

看懂原理，不用看别人代码也能写

实现原理:利用css3动画中的animation-timing-function的steps()，让一张有连续动作图片一段一段的在页面上显示出来，从而实现动画效果。1.需要素材:2.准备一个div盒子div盒子的作用：用于显示素材中的一只北极熊。因为我们的素材是1600x100，有8只北极熊，所以我们div盒子的宽高就是200x100,这样我们就把我们的素材分成8份了<div cl...

在你使用float属性进行页面布局的时候：例如：<div class="container"> <div class="div1" id="box"></div> <div class="div2" id="box"></div> <div class="div3" id="box"></div...