CSS - 随笔分类 - 浅草马甲

CSS实现经典的三栏布局

摘要：实现效果：左右栏定宽，中间栏自适应 (有时候是固定高度) 1 . 绝对定位布局：position + margin 缺点: 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况 2 . 浮动布局： float + margin 方法类似 position 阅读全文

posted @ 2019-02-16 17:27 浅草马甲阅读(488) 评论(0) 推荐(0)

JS获取盒模型对应的宽高

摘要：## 获取内联样式宽高只能获取内联设置的样式，在style或者.css文件中设置的无法获取 ## currentStyle和getComputedStyle获取所有样式两者只能获取样式，不能设置样式针对获取任意样式，可做兼容性处理方法: 至于 getBoundingClientRect（）是获阅读全文

posted @ 2019-02-14 23:20 浅草马甲阅读(569) 评论(0) 推荐(0)

CSS笔记之Grid网格系统

摘要：Grid布局已经不是新鲜的技术了，但一直都是使用了Flex布局，如今需要了边学习边做些常用的笔记。首先grid和flex一样都不支持IE10以下的浏览器基本布局：一般是所有子元素都横向排列或者都纵向排列，当父容器设置了grid，其子项的 clear, float , vertical-ali 阅读全文

posted @ 2018-07-21 00:54 浅草马甲阅读(587) 评论(0) 推荐(0)

更改file文件上传默认CSS样式

摘要：前言：多数时候我们需要表单上传文件，如图片。但是浏览器默认的input[file]样式很不友好，需要我们自己手动修改. 如图基于bootstrap布局的表单, 但file文件上传样式不敢恭维. 1. 首先在input[file]外层套一个容器（如div） 2. 定义div.avatar样式，和阅读全文

posted @ 2018-07-05 11:38 浅草马甲阅读(2657) 评论(0) 推荐(0)

javascript获取style兼容性问题

摘要：获取css 样式的方法有三种 : style, currentStyle , getComputedStyle style (无兼容性问题) 获取语法： ele.style.attr ；设置语法：ele.style.attr = '值' 大多数情况下，javascript中获取和设置style样式阅读全文

posted @ 2018-07-04 22:30 浅草马甲阅读(221) 评论(0) 推荐(0)

笔记：移动端1像素细线解决思路

摘要：最近一直在vue移动端项目，每次一开始就要解决border：1px的问题，参考了大牛的文章后自己总结下来当作笔记参考 : 张鑫旭：http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ https://www.cnb 阅读全文

posted @ 2018-04-05 17:56 浅草马甲阅读(297) 评论(0) 推荐(0)

笔记： CSS3实现背景渐变过渡

摘要：使用CSS3的人都知道背景background-image是可以线性渐变（linear-gradient）和径向渐变（radial-gradient），但是想要做到过渡动画，单纯的background-image是不够的（1）/* 借助background-position */ （2）/* 借助阅读全文

posted @ 2018-04-03 10:33 浅草马甲阅读(368) 评论(0) 推荐(0)

1.display:flex布局笔记

摘要：/*display:flex布局方式主要运用于垂直居中的效果*/ 一、Flex译为Flexible Box（弹性盒子），任何一个容器都可以指定为Flex布局注:设置为Flex布局之后，子元素的float，clear，vertical-align属性都失效二、基本 1.采用Flex布局的元素，称为阅读全文

posted @ 2017-07-11 12:05 浅草马甲阅读(625) 评论(0) 推荐(0)

Css预处理器---Less(三)

摘要：四、Color函数 1.less提供的颜色运算函数，颜色会被转换成HSL色彩空间,然后再通道级别进行操作,函数如下：五、作用域：变量遵循向上父级查找原则;#header样式中的color会优先使用#page内部的@var 六、注释和Importing (1)注释/*....*/保留注释内容，// 阅读全文

posted @ 2017-07-03 20:08 浅草马甲阅读(255) 评论(0) 推荐(0)

Css预处理器---Less(二)

摘要：三、Less语法（1）变量 (2)混合：定义的样式.bordered可以在其他样式内调用 (3)带参数混合：以下代码中在.border-radius样式传入参数@radius定义border-radius属性，在#myDiv样式中调用该样式：在参数中设定默认值@radius:5px ：@ar 阅读全文

posted @ 2017-07-03 19:40 浅草马甲阅读(220) 评论(0) 推荐(0)

Css预处理器---Less(一)

摘要：一、简介: Less是一种动态样式语言,可以在样式中使用变量，继承，运算，函数二、使用 (1)客户端使用 (2)服务端使用 (3)在node项目中调用less编译器 (4)使用Koala编译器() 阅读全文

posted @ 2017-06-30 20:34 浅草马甲阅读(346) 评论(0) 推荐(0)

随笔分类 - CSS