随笔分类 -  前端:CSS

1

css换行
摘要:资料 | 网址 | 彻底搞懂word break、word wrap、white space | https://juejin.im/post/5b8905456fb9a01a105966b4 word break 属性(菜鸟教程) | https://www.runoob.com/cssref/c 阅读全文

posted @ 2020-04-03 19:41 cag2050 阅读(179) 评论(0) 推荐(0) 编辑

offsetTop:获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。
摘要:offsettop 的定位是相对于 offsetParent 元素的 offsetParent的定义:与当前元素最近的经过定位(position不等于static)的父级元素 类似于绝对定位的参照点。 三种情况: position为fixed时,offsetParent为null,offsettop 阅读全文

posted @ 2020-02-07 18:18 cag2050 阅读(916) 评论(0) 推荐(0) 编辑

table的各种用法
摘要:使用 colgroup 和 col 实现响应式表格(table的各种用法):http://coderlt.coding.me/2017/11/20/table colgroup/ 阅读全文

posted @ 2019-08-27 20:31 cag2050 阅读(325) 评论(0) 推荐(0) 编辑

列表中,因高度不同,导致排列错乱
摘要:这是因为在布局中使用了 需要去掉浮动,具体样式如下: 出处:https://blog.csdn.net/k_happy/article/details/88579601 阅读全文

posted @ 2019-07-01 17:38 cag2050 阅读(323) 评论(0) 推荐(0) 编辑

CSS 社区的解决方案,对比
摘要:在众多解决方案中,没有绝对的优劣。还是要结合自己的场景来决定。 我们团队在使用过 scss 和 css modules 后,仍然又重新选择了使用 scss。css modules 虽然有效解决了样式冲突的问题,但是带来的使用成本也很大。尤其是在写动画(keyframe)的时候,语法尤其奇怪,总是出错 阅读全文

posted @ 2019-03-08 11:58 cag2050 阅读(196) 评论(0) 推荐(0) 编辑

:nth-of-type(n) 与 :nth-child(n) 区别
摘要::nth of type(n):选择器匹配同类型中的第n个同级兄弟元素。 :nth child(n):选择器匹配父元素中的第n个子元素。 阅读全文

posted @ 2018-03-21 11:30 cag2050 阅读(140) 评论(0) 推荐(0) 编辑

css中权重与继承
摘要:出处:http://blog.csdn.net/xf616510229/article/details/53613212 阅读全文

posted @ 2018-03-05 21:51 cag2050 阅读(113) 评论(0) 推荐(0) 编辑

Flex Basis与Width的区别
摘要:出处:https://www.jianshu.com/p/17b1b445ecd4 阅读全文

posted @ 2018-03-05 00:45 cag2050 阅读(199) 评论(0) 推荐(0) 编辑

css3中的BFC,IFC,GFC和FFC
摘要:出处:https://www.jianshu.com/p/e75f351e11f8 表格比较: 名称 | 英文全称 | 含义 | | BFC | Block Formatting Contexts | 块级格式化上下文 IFC | Inline Formatting Contexts | 内联格式化 阅读全文

posted @ 2018-02-27 16:33 cag2050 阅读(311) 评论(0) 推荐(0) 编辑

水平居中 和 垂直居中
摘要:水平居中 1. 只能进行水平的居中,且对浮动元素或绝对定位元素无效。 1. 只能对图片,按钮,文字等行内元素(display为inline或inline block等)进行水平居中。 1. 浮动配合相对定位来进行水平居中 浮动居中的原理是:把浮动元素相对定位到父元素宽度50%的地方,但这个时候元素还 阅读全文

posted @ 2018-02-01 00:03 cag2050 阅读(377) 评论(0) 推荐(0) 编辑

伪类(:)和伪元素(::)
摘要:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素 简而言之:伪类总是以一个冒号开头。伪元素通常以两个冒号开头。 在 CSS2 时代,伪元素和伪类均是以一个冒号开头的;在 CSS2.1 之后,为了对伪元素和伪类加以区分,规定伪类继续以一个冒号开头,而伪元素改为以两个冒号开头。 但是为了向 阅读全文

posted @ 2017-08-23 11:45 cag2050 阅读(193) 评论(0) 推荐(0) 编辑

css 知识点
摘要:父div包含两个子div,移到一个div上另一个div一直显示且能点击上面的元素。 解决办法:为父div设置透明border,覆盖过两个子div。 text shadow是给文本添加阴影效果,box shadow是给元素块添加周边阴影效果。 CSS 是用来表现的,HTML 一切非正文的、装饰性的东西 阅读全文

posted @ 2017-08-22 19:33 cag2050 阅读(104) 评论(0) 推荐(0) 编辑

弹性盒子布局(display:flex)知识点
摘要:设为 Flex 布局以后,子元素的float、clear和vertical align属性将失效。 阅读全文

posted @ 2017-08-17 16:20 cag2050 阅读(174) 评论(0) 推荐(0) 编辑

position 属性值:relative 与 absolute 区别
摘要:absolute 能让元素 inline block 化: 例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。 float 可以 inline block 化元素 float 的破坏性:使高度塌陷 absolute 的破坏 阅读全文

posted @ 2017-07-04 10:57 cag2050 阅读(260) 评论(0) 推荐(0) 编辑

position:relative与position:absolute 区别
摘要:relative:相对于它本身原来的位置进行偏移(配合 right left bottom top属性进行偏移) 他偏移会空出来一些空白 其余的html元素不会填充这些空白 absolute:相对于同样设置了position属性的父级元素进行偏移(除了position:static)如果没有这样的h 阅读全文

posted @ 2017-06-28 18:25 cag2050 阅读(219) 评论(0) 推荐(0) 编辑

chrome 小技巧:保持元素的hover状态
摘要:1. 审查元素,选中需要hover的标签 1. 点击“Styles”菜单中的“:hov”,弹出 Force element state 1. 选中相应的 :hover :active :focus :visited 等伪类 图示: 阅读全文

posted @ 2017-06-28 11:48 cag2050 阅读(1267) 评论(0) 推荐(0) 编辑

css 通用兄弟选择器( ~ )
摘要:stylus设置兄弟元素样式: 鼠标浮动在 .video li 元素上时,.video li 兄弟中 .video info 下的 .word 显示。 设置 h1 兄弟元素中,class 为 p1 的元素样式: 阅读全文

posted @ 2017-06-19 14:56 cag2050 阅读(1628) 评论(0) 推荐(0) 编辑

修改 input 框输入光标的样式
摘要:参考链接: http://jsfiddle.net/8k1k0awb/ https://stackoverflow.com/questions/7339333/styling text input caret 阅读全文

posted @ 2017-06-13 10:16 cag2050 阅读(5174) 评论(0) 推荐(1) 编辑

CSS 中的 initial、inherit、unset、revert
摘要:在css中,initial(初始)、inherit(继承)、unset(未设置)、revert(还原)这四个关键字可以应用于所有的CSS属性。 1. initial 初始默认值。 IE不支持 1. inherit 继承直接父元素的对应属性值。 IE7 不支持 1. unset 表示如果该属性默认可继 阅读全文

posted @ 2017-06-08 11:14 cag2050 阅读(380) 评论(0) 推荐(0) 编辑

css 变量
摘要:2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。 声明css变量的时候,变量名前面要加两根连词线( )。 变量名大小写敏感, header color和 Header Color是两个不同变量。 var()函数用于读取变量。 阅读全文

posted @ 2017-05-17 10:42 cag2050 阅读(135) 评论(0) 推荐(0) 编辑

1

导航

点击右上角即可分享
微信分享提示