随笔分类 -  css

使用text-align:justify，让内容两端对齐，兼容IE及主流浏览器的方法
摘要：如果不喜欢看分析过程，可以跳到最后看最终兼容方案 史前方法： 以前实现两端对齐是这样的： 效果是这样： 然后再慢慢加&emsp 或者&nbsp 来调整。原始、粗暴、效率低。em。。。应该摒弃。。。 现代方式： 自从了解到 text-align:justify 发现，原来还有这种操作。 满怀期待，结果 阅读全文
posted @ 2018-08-24 10:08 站住，别跑 阅读(6278) 评论(4) 推荐(6)
div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。
摘要：先上个图： 布局很简单，左右超过屏幕的部分自行滚动。 1. html 2.css 说明重要点： （1） container设置绝对定位top和bottom都要设置，再设置padding-top就能除开头部返回栏铺满整个屏幕。 （2） 左右两个盒子设置overflow-y:auto和高度100%，这样 阅读全文
posted @ 2018-07-12 16:37 站住，别跑 阅读(5415) 评论(2) 推荐(0)
css实现div中图片高度自适应并与父级div宽度一致
摘要：需求：1.父级div不设置高度 2.图片高度自适应，并且显示为正方形； 以前遇到列表中图片高度必须和父级宽度相同，并且需要为正方形的时候，最开始的方法是定死图片高度，这样会导致不同分辨率下图片会压缩，后来傻傻的用js来控制图片的高度，直到现在才明白几句css就能搞定，并且完全符合要求。。。。。。 例 阅读全文
posted @ 2018-03-23 16:21 站住，别跑 阅读(41843) 评论(2) 推荐(2)
CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
摘要：1.一个div固定，一个div自适应宽度。两种情况，固定在左或者在右。 HTML： 这两种情况的HTML排版顺序都是一样的。 CSS： 右边固定宽度： 左边固定宽度： 增加一个：只需要简单的几个属性就能达到这种效果： html： css： 这一个是利用了float破坏流动性，使得div浮在页面上，后 阅读全文
posted @ 2018-03-02 11:41 站住，别跑 阅读(1583) 评论(0) 推荐(2)
css实现多行多列的布局
摘要：1.两列多行： HTML: CSS: 这用到了nth-child（），兼容ie9及以上的浏览器，中间的空隙就是两个并排div宽度之和，100%减去后剩下的宽度； 既然提到了nth-child（）,那么就要说一下nth-of-type（），也是只兼容ie9及以上的浏览器。它与nth-child的区别是 阅读全文
posted @ 2018-02-28 11:55 站住，别跑 阅读(25771) 评论(0) 推荐(2)
textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标
摘要：1.textarea自适应高度，placeholder使用图标 自适应高度，有很多种办法： 1）jq： 效果图： 2）使用插件：autosize，flexText等。。。插件肯定比一两句话的jq强大的多，或者是：这篇文章 1.1 textarea的placeholder使用图标： 只要在placeh 阅读全文
posted @ 2018-01-25 17:57 站住，别跑 阅读(1488) 评论(0) 推荐(0)
css 实现背景图片不跟着滚动条滚动而滚动
摘要：效果： 只需要在需要背景不跟着动的div里： 加上background-attachment:fixed;就可以了，兼容IE6+ 如果不加这个属性： 网上兼容IE6的方法： 加一句js就行了 阅读全文
posted @ 2017-01-13 17:23 站住，别跑 阅读(7528) 评论(0) 推荐(0)
清除ul li里面的浮动并让ul自适应高度的一个好办法
摘要：有时候会遇到ul li列表里面的东西会用到浮动，这个时候ul的高度就不会被撑开，这怎么办呢？ 1）最笨的方法就是设置ul的高度，但这种方法很死板，高度不能自适应 2）有次我试着在ul里面加一个清除浮动的div，这样能实现效果，但这种做法是错误的，不符合规范，所以绝对不能这样写。 坚决不能这样写哦！ 阅读全文
posted @ 2016-12-02 16:00 站住，别跑 阅读(3626) 评论(0) 推荐(0)
在手机端，两张图片并排显示，图片怎样设置比例
摘要：今天用mui的轮播的时候，想一行里面，显示两个轮播图，一个轮播图里面图片的宽度是500，另外一个宽度是250，高度都一样。 一个轮播图最开始设置60%的width，另一个设置40%，以为这样就能正确显示了。结果出现下面的问题 出现这个的原因是什么呢，原来是图片的比例设置得不对啊。第一个轮播图里的图片 阅读全文
posted @ 2016-10-14 16:10 站住，别跑 阅读(4699) 评论(0) 推荐(0)
Div里超出部分，省略号显示
摘要：1.一行显示并出现省略号 1）三个属性： 2）网上张大神想出来的margin-top负值的办法： CSS: 这种方法应该是兼容所有的浏览器。 还有用js或者插件来解决的方法，感觉有点麻烦。 2.两行显示，第二行出现省略号 当文字强制两行显示，并且在第二行才出现省略号。解决办法： 兼容性不太好，多用于 阅读全文
posted @ 2016-10-13 14:27 站住，别跑 阅读(24604) 评论(0) 推荐(0)
DIV或者DIV里面的图片水平与垂直居中的方法
摘要：水平居中的常用方式： text-align:center ——这可以实现子元素字体，图片的水平居中。 margin:0 auto —— 这是针对块元素的水平居中方法 垂直居中的常用方式： vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-bl 阅读全文
posted @ 2016-10-12 14:33 站住，别跑 阅读(55542) 评论(1) 推荐(1)