随笔分类 -  CSS

摘要:不同点: 1. 触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则和gif动态图差不多,立即播放。 2. 循环。 animation可以设定循环次数。 3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 阅读全文
posted @ 2017-11-24 09:58 Samsara315 阅读(1051) 评论(0) 推荐(1)
摘要:设置元素的垂直对齐方式 常用的值: 1.baseline:默认。元素放置在父元素的基线上。 2.sub:垂直对齐文本的下标。 3.super:垂直对齐文本的上标 4.top:把元素的顶端与行中最高元素的顶端对齐 5.text-top:把元素的顶端与父元素字体的顶端对齐 6.middle:把此元素放置 阅读全文
posted @ 2017-11-24 09:29 Samsara315 阅读(1157) 评论(0) 推荐(0)
摘要:一般在做自适应的网页设计的时候用,用这个属性网页结构才不会被破坏。 常用的值: 1. content-box:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。 2. border-box:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高 阅读全文
posted @ 2017-11-24 09:26 Samsara315 阅读(2573) 评论(0) 推荐(0)
摘要:1.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 2.使用overflow。 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 3.使用after伪元素 阅读全文
posted @ 2017-11-23 14:44 Samsara315 阅读(675) 评论(0) 推荐(0)
摘要:一、水平居中的方法 1.元素为行内元素,设置父元素text-align:center 2.如果元素宽度固定,可以设置左右margin为auto; 3.如果元素为绝对定位,设置父元素position为relative,元素设left:0;right:0;margin:auto; 4.使用flex-bo 阅读全文
posted @ 2017-11-04 22:00 Samsara315 阅读(139) 评论(0) 推荐(0)