css
静默思想
初次加入,多多包涵
展开
-
css总结
CSS总结什么是BFC?字面量理解就是块级格式化上下文BFC没有定义只有特性特性1:使BFC内部浮动元素不会乱跑特性2:和浮动元素产生边界css隐藏元素的方法?1.opacity:0;2.visibility:hidden;3.display:none;4.position:absolute;...原创 2020-08-07 22:38:02 · 208 阅读 · 0 评论 -
html BFC是什么
阅读数:64引自知乎https://zhuanlan.zhihu.com/p/25321647一、常见定位方案在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整...转载 2018-05-02 14:38:30 · 353 阅读 · 0 评论 -
Transition and Animation
Transition语法 1234567 .example { transition-property: all | none | <custom-ident>; transition-duration: 0s; transition-timing-function: ease | ease-in | ease-out ...原创 2018-07-26 10:38:22 · 309 阅读 · 0 评论 -
了解 CSS 字体度量,行高和 vertical-align
<p class="p p0"><span class="c">Ba</p> <p class="p p1"><span class="c">Ba</p> <p class="p p2"><原创 2018-07-31 11:48:04 · 455 阅读 · 0 评论 -
移动端1px边框实现
/*手机端实现真正的一像素边框*/.border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px { position: relative; }/*线条颜色 黑色*/.border-1px::after, .border-bottom-1px::after, .border-t...原创 2018-08-14 15:55:49 · 614 阅读 · 0 评论 -
神奇的选择器 :focus-within
伪类选择器 :focus-within言归正传,今天要说的就是:focus-within 伪类选择器。它表示一个元素获得焦点,或,该元素的后代元素获得焦点。划重点,它或它的后代获得焦点。这也就意味着,它或它的后代获得焦点,都可以触发 :focus-within。:focus-within 的冒泡性这个属性有点类似 Javascript 的事件冒泡,从可获焦元素开始一直冒泡到根元...原创 2018-08-02 16:32:42 · 300 阅读 · 0 评论 -
居中一个元素?你会想到啥?包括水平居中,垂直居中,还有水平垂直居中。 如果要再要细分,还要分浮动元素、绝对定位的居中。
第一部分:水平居中1、常规元素的水平居中行内元素、不定宽块级元素:text-align注意:将div#inner 换成 span#inner 效果一样。样式:#outer {text-align:center}<div id='outer'> <div id='inner'>水平居中的元素</div></div>...原创 2018-08-03 10:41:59 · 126 阅读 · 0 评论 -
arcTo画边框圆角
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2018-10-15 12:20:36 · 297 阅读 · 0 评论 -
-webkit-user-select: none;导致的移动端input=text 无法输入
解决办法:* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none;}*:not(input,textarea)...原创 2018-11-08 19:23:17 · 1891 阅读 · 0 评论 -
小程序全面屏底部按钮适配
如果你的小程序页面按钮有用fixed定位到底部的话,那你一定会遇到兼容全面屏的坑(与底部横条重叠)。查了下文档,发现能用的就只有一个api:wx.getSystemInfoSync()wx.getSystemInfoSync()封装一个全局的函数代码如下:app.jsonLaunch: function (e) { // 判断设备是否为全面屏 t...原创 2019-05-29 11:50:20 · 4901 阅读 · 0 评论 -
纯css,div隐藏滚动条,保留鼠标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。 这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow:hidden。 而内容div设置 overflow-y: scroll;ov...转载 2018-05-02 15:01:08 · 141 阅读 · 0 评论 -
20 个常用的 CSS 技巧
1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: graysca...转载 2018-05-03 20:42:08 · 122 阅读 · 0 评论 -
这15种CSS居中的方式,你都用过哪几种?
原文出处:http://igeekbar.com/igeekbar/post/1068.htm CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。css居中1水平居中 1.1 内联元素水平居中 利用 text-align: ce...转载 2018-05-05 15:23:33 · 133 阅读 · 0 评论 -
PNG格式小图标的CSS任意颜色赋色技术和filter:drop-shadow实现尖角带阴影的提示面板效果
上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的:原理其实很简单,使用了CSS3滤镜filter中的drop-shadow,drop-shadow滤镜可以给元素或图片非透明区域添加投影。对于背景透明的png小图标而言,如果我们施加一个不带模糊的投影,不就等同于生成了另外一个颜色的小图标了吗?然后,我们把原始图标隐藏在容器外面,投影图标在容器中间,不见给人感觉是赋色效...原创 2018-07-24 14:53:12 · 3388 阅读 · 0 评论 -
遇见未知的 CSS
1.1 CSS中你可能会疑问的几个问题1.1.1 在CSS中为什么要有层叠在CSS中可能会有多个样式表同时影响同一个元素的某个属性,设计这个功能的主要原因有两个,解决模块化和作者、用户、用户代理样式冲突。模块化一个页面中的样式可以拆分成多个样式表,代码如下。@import url(style/base.css);@import url(style/layer.css);但...原创 2018-07-19 12:28:53 · 251 阅读 · 0 评论 -
flex的使用实例
1. flex设置元素垂直居中对齐HTML代码:<div class="demo"> <div class="inner"> <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p> </div></div>CSS代码: .demo{ w原创 2018-07-18 14:21:19 · 512 阅读 · 0 评论 -
canvas第二天
<canvas id="myCanvas" width=1000 height=1000></canvas> var canvas = document.getElementById("myCanvas");var c = canvas.getContext('2d');/***颜色透明度渐变以及图案*/// var offscre...原创 2018-07-13 16:41:29 · 160 阅读 · 0 评论 -
这可能是史上最全的CSS自适应布局总结
标题严格遵守了新广告法,你再不爽,我也没犯法呀!屁话不多说,直入! 所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。 大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局,inline-block布局,弹性盒...原创 2018-07-12 20:40:00 · 229 阅读 · 0 评论 -
canvas第一天
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><原创 2018-07-12 18:57:44 · 123 阅读 · 0 评论 -
用最短的CSS样式,写出好的效果
https://xxxgitone.github.io/2017/03/27/shape/蒙版文字覆盖一层蒙版,并在蒙版上书写文字。需要2层,从低到上为图片层、蒙版层(上面可写字) <div class='box' > <div class='back'></div> <!--正文层--> <div class=...原创 2018-06-29 12:26:09 · 3539 阅读 · 0 评论 -
calc函数 ---css3语法
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一...原创 2018-06-25 17:45:26 · 5604 阅读 · 0 评论 -
纯css画各种图形,包括基本的矩形、圆形、椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等
原文:http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html1、正方形最终效果:CSS代码如下:#square { width: 100px; height: 100px; background: red;} 2、长方形 最终效果:CSS代码如下:#rectan...原创 2018-06-13 16:56:57 · 253 阅读 · 0 评论 -
input输入框
search 类型[javascript] view plain copy<input type="search"/> 在移动端中,需要去掉输入框末尾的叉号,设置以下 css 样式:[css] view plain copyinput[type=search]::-webkit-search-cancel-button{ -webkit-appeara...原创 2018-06-08 10:47:49 · 241 阅读 · 0 评论 -
css小技巧
移动端我们在点击页面中的一些图片的时候会出现阴影。处理方法只要给a标签加上a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none;} padding 的图形绘制 一个元素画出红领巾的“三道杠”.box1 { disp...原创 2018-07-24 16:47:04 · 173 阅读 · 0 评论