CSS
关注
分享
扫一扫
erciyuan_nuonuo
这个作者很懒，什么都没留下…
展开
-
CSS选择器 first-child 、first-of-type 和 nth-of-type()
块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中，必须声明 <!DOCTYPE>。first-child:选择器用于选取属于其父元素的首个子元素的指定选择器first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素nth-of-type(x):选择器匹配属于其父原创 2016-12-11 21:43:26 · 3259 阅读 · 0 评论 -
HTML 文本超出宽度后实现自动截取
截断方式可以通过js逻辑实现，也可以通过CSS样式实现，使用js逻辑实现难免会使代码变的复杂，而且不容易复用，推荐使用CSS实现文本截断，而且可以在不同的HTML片段中使用。 CSS截断显示内容主要通过white-space，overflow，text-overflow三个属性实现。HTML:<div class="hello substr"> hello world!<div>CSS:原创 2016-12-09 20:56:53 · 9631 阅读 · 1 评论 -
css 水平居中 margin:0 auto
在css中有很多种水平居中方法:position 定位 text-align:center margin：0 auto使用margin:0 auto 必须设置宽度，如果不设置则默认和父元素宽度一致，不会有居中效果原创 2016-12-21 21:34:46 · 722 阅读 · 0 评论 -
css元素隐藏display:none和visibility:hidden
display: none DOM中存在display: none的元素，但是浏览器不显示不占据空间，无法点击，动态改变此属性会引起回流与重绘不会被子类继承，但是所有的子类都不会显示的，子类的任何手段都无效visibility: hidden占据空间，无法点击只引起重绘子类可以通过visibility: visible显示原创 2016-12-25 21:16:33 · 694 阅读 · 0 评论 -
css表格中设置两行中间的空白间距
css设置两行中间的空白间距： border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。border-collapse: separate; border-spacing: 0px 10px;原创 2017-05-10 21:23:15 · 12040 阅读 · 0 评论 -
flex 最后一行左对齐
最近项目布局上要求item两端对齐，而且最后一行在列不满的情况下要求左对齐，使用flex的justify-content: space-between;实现时发现最后一行不能左对齐，而是两端对齐方式，下图不是项目上想要的效果（不使用flex也可以实现，本文仅讨论使用flex实现）在网上查了很多资料， 1.添加几个空item（对我来说最有效的，适用于大多数场景） 根据布局列数添加，比如每行最大三列原创 2017-05-12 21:18:51 · 24480 阅读 · 6 评论 -
css input[type=file] 样式美化 (radio checkbox类似)
在做input文本上传时，由于html原生的上传按钮比较丑，需要对其进行美化主要想到以下几种方法，欢迎大家补充1. 通过position和opacity实现input的透明度设置为0，设置为绝对定位，size足够大input外面套一层a或者div（此处以a举例），a设置为相对定位，为了避免在非a区域点击打开选择文件,a需要设置overflow: hidden<html><head> <st原创 2017-05-24 21:05:00 · 1290 阅读 · 0 评论