CSS - 随笔分类 - 孟繁贵

摘要：1、示例代码 2、效果 3、兼容性所以对于chrome和firefox可以考虑使用。阅读全文

posted @ 2019-09-02 10:30 孟繁贵阅读(818) 评论(0) 推荐(0) 编辑

摘要：文本省略号是非常常见的需求，而省略号展示又通常分为俩种情况折行和不折行。不折行：折行(能主动控制行数,这里设置的超出 4 行显示省略号)：阅读全文

posted @ 2019-09-02 10:23 孟繁贵阅读(20802) 评论(0) 推荐(0) 编辑

摘要：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。下列方式会创建块格式化上下文：根元素或包含根元素的元素浮动元素（元素的 float 不是 none）绝对定位元素阅读全文

posted @ 2019-03-17 20:21 孟繁贵阅读(3085) 评论(0) 推荐(0) 编辑

css布局三栏自动换行

摘要：1、代码实现 2、效果阅读全文

posted @ 2019-03-06 09:18 孟繁贵阅读(698) 评论(0) 推荐(0) 编辑

css 进度条

摘要：效果：阅读全文

posted @ 2019-01-07 18:09 孟繁贵阅读(198) 评论(0) 推荐(0) 编辑

元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect

摘要：1、示例代码（1）html （2）css 2、方法区别（1）dom.style.width 只能获取内敛样式。因此是不准确的。（2）dom.currentStyle.width https://developer.mozilla.org/zh-CN/docs/Web/API/Element/c 阅读全文

posted @ 2019-01-02 14:26 孟繁贵阅读(2222) 评论(1) 推荐(0) 编辑

三栏布局解决方案

摘要：1、高度固定三栏布局解决方案效果： 2、以上6种方法区别浮动：需要清除浮动定位：脱离文档流 flex：移动端 table：操作繁琐、seo不友好 grid：比较新的技术。 3、若高度不是固定的，哪些方法不是适应了? 效果：只有table和flex布局还可以。阅读全文

posted @ 2019-01-02 11:31 孟繁贵阅读(176) 评论(0) 推荐(0) 编辑

CSS3选择器:nth-child和:nth-of-type之间的差异

摘要：转自：http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC% 阅读全文

posted @ 2018-12-14 22:51 孟繁贵阅读(242) 评论(0) 推荐(0) 编辑

滚动条设置超出部分隐藏

摘要：滚动条设置超出部分隐藏你好你好你好你好你好你好你好你好你好你好你好你好你好 ... 阅读全文

posted @ 2018-11-30 17:42 孟繁贵阅读(705) 评论(0) 推荐(0) 编辑

position sticky 定位

摘要：1、兼容性 https://caniuse.com/#search=sticky chrome、ios和firefox兼容性良好。 2、使用场景 sticky：粘性。粘性布局。在屏幕范围内时，元素不受定位影响（即top、left等设置无效）；当元素的位置将要移出偏移范围时，定位又会变成fixed 阅读全文

posted @ 2018-11-08 15:10 孟繁贵阅读(662) 评论(0) 推荐(0) 编辑

flip 翻转效果 css3实现

摘要：1.实现代码 2、效果 3、说明实现技术主要为：transition和transform。其中rotateY的参数为正值时旋转方向为“离开屏幕朝向人的方向” 阅读全文

posted @ 2018-10-22 11:11 孟繁贵阅读(965) 评论(0) 推荐(0) 编辑

三栏自适应常用布局方法

摘要：1、float 2、flex 3、grid 4、table布局（不建议使用）阅读全文

posted @ 2018-10-09 10:37 孟繁贵阅读(559) 评论(0) 推荐(0) 编辑

父元素没有设置定位 position absolute 解析

摘要：1、示例代码效果： 2、结论 absoulte方式在父级没有设置定位方式时是以<html>作为原点定位。阅读全文

posted @ 2018-09-14 10:58 孟繁贵阅读(1082) 评论(0) 推荐(0) 编辑

CSS Flexible 布局兼容性以及解决方案

摘要：1、兼容性 https://caniuse.com/#feat=flexbox IE11以及以下不支持。 2、解决方案 flexibility库 https://github.com/jonathantneal/flexibility 阅读全文