CSS
zhangyingji
这个作者很懒,什么都没留下…
展开
-
vertical-align无效
situation vertical-align无效 任务 子元素实现相对父元素垂直居中 解决方法 父元素设置 line-height,子元素设置 display: inline/inline-block 父元素设置 display: table,子元素设置 display: table-cell ...原创 2018-05-18 09:19:48 · 1291 阅读 · 0 评论 -
Flex 布局
概要 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。 /* 任意容器 */ .box{ display: flex; } /* 行内元素 */ .box{ display: inline-flex; } 注意,设为 Flex 布局以后...转载 2018-05-18 17:15:39 · 171 阅读 · 0 评论 -
CSS实现表格内容过长时用省略号表示
table { /* 列宽由表格宽度和列宽度设定 */ table-layout: fixed; } td { /* 不换行 */ white-space: nowrap; /* 超出单元格的部分隐藏 */ overflow: hidden; /* 用省略号代替被隐藏的部分 */ text-overflow: ellipsis; }...原创 2018-05-14 22:33:06 · 1237 阅读 · 0 评论 -
解决button无法触发input类型为file的方法
situation 默认input[type=file]太丑,做了个美化的button,对其添加click事件后发现只能选择文件,而点击提交按钮是无法真正上传文件的 task 进行伪装,当点击button时实际上点在input[type=file]上 action 通过CSS,使input[type=file] - 位于按钮上层 - 大小与button相同 - opacit...原创 2018-05-14 23:56:21 · 7196 阅读 · 0 评论 -
常用的水平垂直居中方法总结
下面分内联元素、块级元素总结,flex布局均适用于这两者,故独立出来 内联元素 // 水平 text-align: center; // 垂直:设置两者相等 height: 100px; line-height: 100px; 多行文字:利用table .parent { display: table; } .children { // 使其成为单元格 ...原创 2018-07-23 14:51:59 · 199 阅读 · 0 评论 -
瀑布流布局
思路 固定列数的浮动布局: 1. 根据设备屏幕的宽度和加载图片的宽度来固定列数,之后又获取每一列图片的高度,将要加载的图片放在高度最小的那一列图片下面,循环数组不断的寻找高度最小的那一列图片,将图片放在下面实现基本的布局效果。 2. 创建一个滚动条监听事件(当最后一张图片距顶的高度 < 屏幕的高度+滚动条滚动的距离)时,就触发我们在页面动态的添加图片的事件(用JavasSript在Ht...原创 2018-07-22 20:50:39 · 616 阅读 · 0 评论 -
清除浮动、浏览器前缀
清除浮动 给父元素加高度 clear:both; 但会导致margin失效 隔墙法 <div class=”cl h10”></div> .cl {clear: both;} // 控制间距 .h10 { height:10px} 给父元素增加overflow:hidden;IE6追加_zoom: 1; 浏览器前缀 webkit 以webk...原创 2018-07-22 21:48:29 · 137 阅读 · 0 评论