随笔分类 -  css

css counters css计数器
摘要：css计数器用来定义css维护的变量，可以计算元素的个数以添加序号 counter-reset 用来重置计数器值到一个给定的变量，一般设置在父元素上。 counter-increment 用来累加计数器值，一般设置在子元素上。 counter() counter()函数计算元素的计数器值。 coun 阅读全文
posted @ 2018-04-01 12:48 hahazexia 阅读(187) 评论(0) 推荐(0) 编辑
css columns 多栏布局
摘要：MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Columns column-count 元素的列数 column-width 列宽 columns 是column-count和column-width的简写形式 column-gap 阅读全文
posted @ 2018-04-01 12:20 hahazexia 阅读(1535) 评论(0) 推荐(0) 编辑
瀑布流布局
摘要：zhangxinxu博客的写法，传统js写法 其他方法 Multi-columns多列布局 html： css： 瀑布流容器分成5列，列与列之间的间距是0。 使用多列布局的关键在于内容的中断（break），中断有三种，page-break，column-break，region-break。 为了阻 阅读全文
posted @ 2018-03-29 23:43 hahazexia 阅读(210) 评论(0) 推荐(0) 编辑
文本溢出问题
摘要：单行文本溢出 html如下： css如下： 多行文本溢出：webkit扩展属性 html如下： css如下： 多行文本溢出：js判断字数 html如下： js如下： 效果如下： 以上实际效果看这里 阅读全文
posted @ 2018-03-27 11:41 hahazexia 阅读(427) 评论(0) 推荐(0) 编辑
居中问题
摘要：未知高度宽度情况下水平垂直居中 transform和定位 html如下： css如下： 效果看这里 flexbox弹性盒 html如下： css如下： 绝对定位加margin:auto; html如下： css如下： table-cell html如下： css如下： :before伪元素 html 阅读全文
posted @ 2018-03-26 22:21 hahazexia 阅读(189) 评论(0) 推荐(0) 编辑
使用padding使图片等比例缩放
摘要：html如下： css如下： 这其中padding-bottom的百分数值就是原图片的 height/width 的比例，这样设置的原因是padding值如果设置为百分比值，计算的时候会使用当前元素的width为基础来计算。 实际效果： 实际效果请看。 阅读全文
posted @ 2018-03-26 20:09 hahazexia 阅读(892) 评论(0) 推荐(0) 编辑
<length>数据类型
摘要：MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/length <length>是表示距离尺寸的一种css数据格式。它由一个<number> 后紧随一个长度单位（px，em，pt，in，mm，...）组成。和任何 CSS 尺寸一样，数字和单位之 阅读全文
posted @ 2018-03-24 23:18 hahazexia 阅读(822) 评论(0) 推荐(0) 编辑
position: sticky;粘性定位
摘要：MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position position:sticky;是粘性定位，新的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相 阅读全文
posted @ 2018-03-24 10:37 hahazexia 阅读(5013) 评论(1) 推荐(0) 编辑
<color>数据类型
摘要：MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value 一种颜色可以用以下任意的方式来描述： 使用一个关键字 RGB立体坐标（RGB cubic-coordinate）系统，以“#”加十六进制或者rgb()和rgba()函数表 阅读全文
posted @ 2018-03-22 22:59 hahazexia 阅读(1943) 评论(0) 推荐(0) 编辑
flex弹性盒
摘要：MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex flex-basis flex-basis指定了 flex 元素在主轴方向上的初始大小。 flex-basisi效果 flex-grow flex-grow定义弹性盒子项（flex i 阅读全文
posted @ 2018-03-21 19:59 hahazexia 阅读(318) 评论(0) 推荐(0) 编辑

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