![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
骆小胖
这个作者很懒,什么都没留下…
展开
-
页面积累
原创 2017-06-20 18:37:40 · 114 阅读 · 0 评论 -
Grid网格布局
原创 2018-03-10 13:45:55 · 79 阅读 · 0 评论 -
关于width=100%时会出现滚动条的情况
lid green;} 很明显,原因是在borde边框,我给的解决方法有两个(1)设置盒模型box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */ content-box:元素宽高=元素内容 盒模型border-box:元素宽高=内容+内边距+边框(2)width换成auto 原因: 想了解原因,原创 2018-03-11 10:36:21 · 3241 阅读 · 0 评论 -
input样式修改
原创 2018-04-02 23:43:42 · 76 阅读 · 0 评论 -
伪类和伪元素的区别
原创 2018-10-10 16:39:46 · 116 阅读 · 0 评论 -
为什么绝对定位(absolute)的父级元素必须是相对定位
【总结】 如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位。这句话是错的。 正确的是:只要父级元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的)。 绝对定位(Absolute positioning)元素定位的参照物是其包含块,既相对于其包含块进行定位,不一定是其父元素。.原创 2018-10-24 22:33:58 · 6686 阅读 · 1 评论 -
浅谈css3长度单位rem,以及移动端布局技巧
点,也就是html。例:(下面例子中的根节点是html ,它的字体大小是100px,所以根节点下面的元素所设置的rem,都是1rem=100px。)rem的初始值是16px,也就是说在没有设置根节点的font-size的时候,1rem=16px<html> <head> <style> html,body{ font-size: 100px; }原创 2018-12-10 15:40:37 · 138 阅读 · 0 评论 -
CSS优化单选多选按钮样式(1)
原创 2019-01-11 15:30:03 · 856 阅读 · 0 评论 -
纯CSS实现半圆、1/4圆
<div class="area"></div>.area{ width: 100px; height: 50px; background: red; border-radius: 0px 0px 100px 100px;} 2、上半圆 3、左半圆 4、右半圆 (2)1/4圆 实现原理:border四个方向的值的设定---上右下左原创 2019-01-12 15:49:15 · 7890 阅读 · 0 评论 -
浅谈纯CSS实现二级导航(优缺点与局限性)
ck一样,无法实现过渡。 注意(局限性):高度变化若想出现过渡效果,必须由0变到指定高度,如0-200px等才可以。 【主体(1)height由0变为auto<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS</title&原创 2019-01-15 09:26:57 · 534 阅读 · 1 评论 -
CSS优化单选多选按钮样式(2)
css特殊字符表。 这两天学生做项目,将项目里遇到的特效简单讲解下。这里做下备注,课程大纲适当调整。 【主体】 因为特殊字符表在某些低版本浏览器展示容易出现问题,所以这里再介绍一种方案--->伪元素+画长方形+旋转 <!DOCTYPE html><html><head> <meta charset="utf-8"&a原创 2019-01-16 11:35:30 · 763 阅读 · 0 评论 -
弹性盒模型(1)------Flex布局对子元素影响
原创 2019-01-24 16:40:52 · 2451 阅读 · 0 评论 -
弹性盒模型(2)------Flex容器元素
原创 2019-01-24 17:25:01 · 192 阅读 · 0 评论 -
CSS选取第几个标签元素:nth-child、first-child、last-child
原创 2018-03-06 12:59:46 · 742 阅读 · 0 评论 -
CSS 实现元素垂直居中方案
这是一个前端开发里常见的问题,面试也会经常提到:用CSS 实现元素水平垂直居中,都有哪些方案? 【详解】 参考网址:http://blog.csdn.net/weixin_39361971/article/details/79421209http://web.jobbole.com/83384/http://www.360doc.com/content/16/0406/21/15398874_548414234.shtmlhttps://www.cn原创 2018-03-03 16:26:35 · 90 阅读 · 0 评论 -
【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
原创 2018-02-13 21:59:37 · 257 阅读 · 1 评论 -
前端积累------返回上级
原创 2017-06-25 15:37:59 · 120 阅读 · 0 评论 -
CSS3 transform 属性
原创 2018-01-05 15:58:39 · 126 阅读 · 0 评论 -
CSS优化
原创 2018-01-05 22:14:02 · 76 阅读 · 0 评论 -
display:inlin、block、inlin-block的区别
原创 2018-02-04 12:02:53 · 805 阅读 · 0 评论 -
纯CSS的导航栏Tab切换方案
原创 2018-02-13 21:33:52 · 586 阅读 · 0 评论 -
消失的边界线问题
原创 2018-02-13 21:46:14 · 185 阅读 · 0 评论 -
全兼容的多列均匀布局问题
原创 2018-02-13 21:47:13 · 159 阅读 · 0 评论 -
酷炫的 3D 视角
中的交互体验感觉非常棒,运用在移动端制作一些 H5 页面可谓十分博人眼球。并且掌握原理之后制作起来也并不算废力,好好的研究了一番后将一些学习过程共享给大家。下面进入正文:(一些 Gif 图片较大,需要等待一会) 3D 效果示意百闻不如一见,先直观感受一下上述我所说的效果: 最好能点进去看看,这里我使用了带背景色的 div 作为示例,我们的视角处于一个正方体中,正方体的旋转动画让我们有了 3D 的感觉。那么原本的图长什么样呢?我们把距离拉远,一探究竟: 是长这样的:原创 2018-02-13 21:51:18 · 196 阅读 · 0 评论 -
酷炫的3D旋转透视
原创 2018-02-13 21:41:07 · 249 阅读 · 0 评论 -
伪元素的妙用 - 多列均匀布局及title属性效果
原创 2018-02-13 21:53:34 · 109 阅读 · 0 评论 -
box-shadow 与 filter:drop-shadow 详解及奇技淫巧
。 box-shadow 常规用法说到 box-shadow ,首先想到的必然是它能够生成阴影,所以称之为 shaodow ,简单看看它的语法:基础属性语法box-shadow 属性向框添加一个或多个阴影。box-shadow: h-shadow v-shadow blur spread color inset;像这样 box-shadow: 10px 10px 5px #888888; 除此之外,我们要知道,box-shadow 是分外 shadow 和内 shado原创 2018-02-13 21:45:20 · 377 阅读 · 0 评论 -
伪元素的妙用--单标签之美
原创 2018-02-13 21:46:24 · 142 阅读 · 0 评论 -
移动端页面a input去除点击效果 及 pc端切换
1 手机端页面a button input去除点击效果以及闪屏问题 添加:a,button,input { -webkit-tap-highlight-color: rgba(255, 0, 0, 0);}2 使用border创建小三角形span { height: 0px; width: 0px; border-t...原创 2019-04-09 14:11:01 · 507 阅读 · 0 评论