随笔分类 -  CSS

viewport其实没那么难理解
摘要：在学习移动端布局的时候，你肯定听说过"viewport"这个词，然后去问度娘或谷歌。你会惊奇的发现，这个viewport不简单，居然有那么多兄弟——layout viewport、visual viewport、ideal viewport。这些都是什么鬼，然后就硬着头皮去发现他们的不同，找了很多资 阅读全文
posted @ 2018-10-21 22:21 奔跑的瓜牛 阅读(713) 评论(2) 推荐(1)
酷炫字体背景图的实现——神奇的background-clip: text
摘要：愉快的时光总是飞快，七天小长假已接近尾声，抓住假期的尾巴，再学个新知识点——css的background-clip: text属性...会不会有种陌生的感觉，毕竟在我们的印象里，background-clip只有padding-box、border-box、content-box三个属性，这个tex 阅读全文
posted @ 2018-10-05 16:48 奔跑的瓜牛 阅读(839) 评论(0) 推荐(0)
移动端1px边框
摘要：布局方面，css有那么几个比较热衷的问题。其中，移动端1px边框问题的讨论不亚于垂直居中。那么移动端1px边框问题是如何产生的呢？由于现在的手机几乎都是retina屏，css设置的1px会被渲染成2px的物理像素（针对像素比等于2的屏幕），因此看起来会比较粗。既然知道了问题的产生原因，那么我们就开始 阅读全文
posted @ 2018-07-22 15:56 奔跑的瓜牛 阅读(1124) 评论(4) 推荐(5)
IE8兼容border-radius.
摘要：我们知道，CSS3新增的很多简洁优美的属性，比如border-radius、box-shadow、border-image、gradients、RGBA...因为这些属性的出现，我们可以很方便的就写会很多好看的页面。但是，IE8对于CSS3的属性来说是个坎，IE8及其以下不支持CSS3属性。因此，我 阅读全文
posted @ 2018-01-24 18:04 奔跑的瓜牛 阅读(428) 评论(0) 推荐(0)
CSS实现文字和图片的水平垂直居中
摘要：关于文字和图片的水平垂直居中，在前端界绝对算是一个老生常谈的问题了，尤其是垂直居中，什么千奇百怪的解法都能想的出来。下面我就总结一些比较常用的方法： 一、文本的水平垂直居中： 1、水平居中： 是不是很开心？超级简单的问题，一个text-align：center 就搞定了。过过过... 下面看单行、多 阅读全文
posted @ 2017-06-04 23:32 奔跑的瓜牛 阅读(53685) 评论(4) 推荐(2)
走进BFC
摘要：在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 阅读全文
posted @ 2017-06-02 13:14 奔跑的瓜牛 阅读(473) 评论(0) 推荐(0)
css命名规范
摘要：这些是参考了国外一些文章以及我的个人经验总结出来. 一、CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height 阅读全文
posted @ 2016-11-20 18:51 奔跑的瓜牛 阅读(422) 评论(0) 推荐(1)
CSS 公共样式
摘要：global.css | reset.css（格式化样式） common.css（公共组件样式） layout.css（当前页面样式） 清除全站所有页面的浏览器默认样式，保证在初始样式在所有浏览器下一致。 common.css（公共组件样式） 一般一个网站所有页面头部、底部样式都是一致的，而且很长时 阅读全文
posted @ 2016-11-20 17:13 奔跑的瓜牛 阅读(2406) 评论(0) 推荐(0)