至于未来会怎么样 反正路还长 天总会亮

Life is a journey, not a destination, care should be the scenery along the way and the mood to see the scenery.

个人博客
  • ...
     前端 浏览(21)  tangzihan ++阅读原文
    CSS 水平居中与垂直居中的16个方法
    水平居中 行内元素 .parent{ text-align:center } 块级元素 .son { margin: 0 auto; } 子元素含 float .parent{ width:fit-content; margin:0 auto; } .son { floa...
  • ...
     前端 浏览(16)  tangzihan ++阅读原文
    CSS3有哪些新特性?
    新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)} 弹性盒模型 display: flex; 多列布局 column-count: 5; 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}} 个性化字体 @font-face{fo...
  • ...
     程序 浏览(20)  tangzihan ++阅读原文
    CSS盒模型详解
    什么是盒子模型 盒模型是规定了网页元素如何显示,元素间的相互关系,定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距。 可以认为每一个HTML标签都是一个容器,这个容器又包着几个...
  • ...
     前端 浏览(33)  tangzihan ++阅读原文
    闭包的缺点与解决办法
    我们知道闭包延展了局部变量的生命周期,使得外部操作局部变量成为可能,一般来讲函数在调用执行后函数就会被释放,但如果函数中产生了闭包,就会导致函数执行完毕后,函数内部的局部变量没有被释放,使得占用内存时...
  • ...
     前端 浏览(22)  tangzihan ++阅读原文
    每天20个灵魂拷问系列二
    二十一、es5中是如何定义一个函数模块 示例 假定函数模块为Promise.js / 自定义Promise函数模块 / (function (window){ function Promise(executor){ } //向外暴露Promsie函数...
  • ...
     前端 浏览(24)  tangzihan ++阅读原文
    h5新增小功能
    class的操作 在之前我们不使用第三方类库操作class是这样的 test.Node.className='active' 上面代码对于一个class还好如果有多个呢? 我们还得自己编写追加类名的逻辑,或者引入第三方类库如jquery 其实不用那...
  • ...
     前端 浏览(14)  tangzihan ++阅读原文
    每天20个灵魂拷问系列一
    一、怎么让一个不定宽高的盒子 垂直水平居中? 这里给出两种解决办法 第一种使用css方法 父元素 .box{ display: table-cell; text-align: center; vertical-align: middle; width: 300px;...
  • ...
     前端 浏览(42)  tangzihan ++阅读原文
    探讨移动端适配
    在探讨移动端适配前我们先要了解下面几个概念 1. 像素 2. 分辨率 2. 物理像素 3. CSS像素 像素 > 像素(Pel,pixel;pictureelement),为 组成一幅图像的全部亮度和色度的最小图像单元 。电视的图像是由按一定...
  • ...
     前端 浏览(12)  tangzihan ++阅读原文
    CSS3d转换
    3D特点 近大远小 物体后面遮挡不可见 三维坐标系 x轴:水平向右 右边是正值,左边是负值 y轴:垂直向下 下面是正值,上面是负值 z轴:垂直屏幕 往外面是正值,往里面是负值 如下图: 不过在我们css中y轴向上...
  • ...
     前端 浏览(20)  tangzihan ++阅读原文
    外边距合并嵌套块元素塌陷问题
    如下案例 .f{ background-color: red; width:300px; height: 200px; } .s{ background-color: blue; width:150px; height: 100px; margin-top:30px; }...