随笔分类 -  css基础

上一页 1 2
学习大师-webkit-overflow-scrolling:touch及ios滚动
摘要：目录 1. -webkit-overflow-scrolling:touch是什么？ 2. 解决safari布局抖动的例子 2.1 方案一 2.2 方案二 3. 探究-webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug 3.1 保证使用了该属性的元素上没有设置定 阅读全文
posted @ 2019-11-22 15:31 超哥20 阅读(170) 评论(0) 推荐(0)
js使用案例
摘要：1、判断是否微信浏览器 2、判断是移动端浏览器还是PC浏览器 3、创建一个菜单搜索 4、联想自动补齐功能 5、下啦菜单可进行搜索/过滤操作 6、点击式导航栏下啦菜单 7、全屏幕导航--从上到下动画 8、右侧侧边栏 9、侧边栏动画--页面主体内容黑色透明背景 10、js/css响应式顶部导航样式实例 阅读全文
posted @ 2019-09-24 14:02 超哥20 阅读(572) 评论(0) 推荐(0)
scss简单使用总结
摘要：1、使用全局变量 2、嵌套使用 3、引入别的文件 SASS中引入片断时，可以缺省使用文件扩展名，因此上面代码中直接通过@import 'reset'引入，编译后生成的代码如下： 4、混合 混合也可以这样用 5、继承，继承是SASS中非常重要的一个特性，可以通过@extend指令在选择器之间复用CSS 阅读全文
posted @ 2019-09-20 15:27 超哥20 阅读(371) 评论(0) 推荐(0)
使用:valid和:invalid校验表单
摘要：css: 效果： 阅读全文
posted @ 2019-09-09 09:46 超哥20 阅读(605) 评论(0) 推荐(0)
解决flex布局的space-evenly兼容性问题
摘要：直接上代码： space-evenly的作用是将每个元素的间隔相等, 但是兼容性较差,尤其是IOS,这种trick很好的解决了兼容性问题 原理很好理解,假设有5个元素, space-evenly是将每个剩余空间平均分割,这样就有6个相同宽度的间隔空间,间隔空间数量 = n + 1;space-bet 阅读全文
posted @ 2019-09-04 11:25 超哥20 阅读(1273) 评论(0) 推荐(0)
css编写一个三角形
摘要：每次需要自己写三角形，都是百度，现在自己总结一个，以后可以看自己的。 具体可以根据实际需求进行调整 阅读全文
posted @ 2019-08-09 09:58 超哥20 阅读(303) 评论(0) 推荐(0)
css知识点总结
摘要：1、shape-outside的神奇 不要以为是方的实际占位内容是个圆圈。 2、display:flow-root;消除浮动影响 内容部分也可以设置display:flow-root;看一下效果 3、flex布局下的margin:auto神奇用法 每个模块会自动均分 4、并不是给元素设置displa 阅读全文
posted @ 2019-08-09 09:38 超哥20 阅读(141) 评论(0) 推荐(0)
css换行几种方式
摘要：1. 强制不换行 2. 自动换行 3. 强制英文单词断行 阅读全文
posted @ 2019-07-27 16:45 超哥20 阅读(74500) 评论(0) 推荐(1)
css多行溢出显示省略号
摘要：.box{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } 阅读全文
posted @ 2019-07-23 10:49 超哥20 阅读(251) 评论(0) 推荐(0)
研究-webkit-overflow-scrolling:touch及ios滚动
摘要：1. -webkit-overflow-scrolling:touch是什么？ MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果 阅读全文
posted @ 2019-07-19 10:03 超哥20 阅读(591) 评论(0) 推荐(0)
css/js页面平滑滚动
摘要：凡是需要滚动的地方都加一句scroll-behavior:smooth就好了！ 例如：在PC浏览器中，网页默认滚动是在<html>标签上的，移动端大多数在<body>标签上，于是，可以加上这么一句： JS scrollIntoView与平滑滚动 我们随便打开一个又连接的页面，把首个连接滚动到屏幕外， 阅读全文
posted @ 2019-07-16 14:14 超哥20 阅读(843) 评论(0) 推荐(0)
css光标下划线跟随效果
摘要：直接上代码： 阅读全文
posted @ 2019-07-16 09:38 超哥20 阅读(317) 评论(0) 推荐(0)
css文字两端对齐，而且居中
摘要：正常我们做文字居中都是text-align:center;直接搞定，可是这样的话就会出现下面的问题 那么，如何让他又居中又对齐呢 感觉美观了一些 阅读全文
posted @ 2019-07-12 10:39 超哥20 阅读(3999) 评论(0) 推荐(0)
解决ios上滑动不流畅及滚动条隐藏无效问题
摘要：元素上设置overflow-x:scroll时，在ios上滑动不流畅，可以使用以下方法 阅读全文
posted @ 2019-07-04 11:03 超哥20 阅读(1766) 评论(0) 推荐(0)
placeholder的样式设置
摘要：在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果，这时就可以用以下代码来对placeholder进行样式设置了。 ::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ ::-webkit-input-placeholde 阅读全文
posted @ 2019-05-17 09:21 超哥20 阅读(19652) 评论(0) 推荐(0)
link rel=alternate网站换肤功能
摘要：此方法借助HTML rel属性的alternate属性值实现。 上面4个<link>元素，共出现了3中不同性质的CSS样式文件加载： 没有title属性，rel属性值仅仅是stylesheet的<link>无论如何都会加载并渲染，如reset.css； 有title属性，rel属性值仅仅是style 阅读全文
posted @ 2019-04-09 16:08 超哥20 阅读(539) 评论(0) 推荐(0)
flex布局
摘要：首先了解Flex布局是什么？ Flex是Flexible Box的缩写，意思是"弹性布局"，用来为盒状模型提供灵活性。 任何一个容器都可以指定为Flex布局 行内元素也可以使用Flex布局 webkit内核的浏览器，必须加上-webkit-前缀 注意：设为Flex布局后，子元素的float、clea 阅读全文
posted @ 2019-03-06 00:18 超哥20 阅读(190) 评论(0) 推荐(0)
css函数
摘要：css函数主要有： attr()、calc()、linear-gradient()、radial-gradient()、repeating-linear-gradient() attr()实例： calc()实例： linear-gradient()实例： radial-gradient()实例： 阅读全文
posted @ 2019-02-25 22:41 超哥20 阅读(331) 评论(0) 推荐(0)
css溢出滚动条及去除滚动条的方法
摘要：这样写滚动的时候会有滚动条出现，若想去除默认滚动条，可以加上下面这么一句 阅读全文
posted @ 2019-01-18 12:06 超哥20 阅读(6912) 评论(1) 推荐(0)

上一页 1 2