随笔分类 -  CSS

如何让 height:100%; 起作用
摘要：当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？ 按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间 阅读全文
posted @ 2017-11-17 15:22 AllenChou 阅读(381) 评论(0) 推荐(0)
推荐大家使用的CSS书写规范、顺序
摘要：CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- tex 阅读全文
posted @ 2016-09-27 10:25 AllenChou 阅读(301) 评论(0) 推荐(0)
Flexbox
摘要：一，基本知识Flexbox布局官方称之为CSS Flexible Box布局模块,他是CSS3中的一种新的布局模式。Flexbox可以控制未知容器元素的对齐方式，排列方向，排列顺序等，甚至是在未知大小的容器也能这样做。Flex容器的主要特点是能够修改其子元素（Flex item）的宽度或高度，使其在... 阅读全文
posted @ 2015-08-23 19:38 AllenChou 阅读(473) 评论(0) 推荐(0)
CSS 去除浏览器默认 轮廓外框
摘要：在默认情况下，点击 a 标签，input，或者添加click事件的时候，浏览器留下一个轮廓外框（chrome之下为蓝色）~ 然而这些默认的轮廓外框，有时候很影响美观，并不是我们想保留的。 我们应如何消除这些讨厌的 轮廓外框呢？使用outline:none去除轮廓外框如：a{ outline:none... 阅读全文
posted @ 2015-08-13 01:04 AllenChou 阅读(5727) 评论(1) 推荐(0)
多行文本溢出显示省略号(…) text-overflow: ellipsis
摘要：关于text-overflow text-overflow属性规定当文本溢出包含元素时发生的事情。默认值：clip继承性：no版本：CSS3JavaScript 语法：object.style.textOverflow="ellipsis"语法：text-overflow: clip|ellipsi... 阅读全文
posted @ 2015-08-05 22:34 AllenChou 阅读(24012) 评论(5) 推荐(4)
最全CSS3选择器
摘要：一，CSS3 选择器分类二，选择器语法1，基本选择器语法选择器类型功能描述*通配选择器选择文档中所以HTML元素E元素选择器选择指定类型的HTML元素#idID选择器选择指定ID属性值为“id”的任意类型元素.class类选择器选择指定class属性值为“class”的任意类型的任意多个元素sele... 阅读全文
posted @ 2015-08-02 23:19 AllenChou 阅读(25763) 评论(6) 推荐(12)
何时使用 Em 与 Rem
摘要：你可能已经很熟练使用这两个灵活的单位，但你可能不完全了解何时使用rem，何时使用em。 本教程将帮你弄清楚!em和rem都是相对单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值1em或1rem，它可以被浏览器解析成 从16px到160px或其他任意值。padding设置... 阅读全文
posted @ 2015-07-30 00:12 AllenChou 阅读(489) 评论(0) 推荐(0)