![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
leafpanye
这个作者很懒,什么都没留下…
展开
-
段落末尾对齐
html页面上编写一段话,常规情况下,段落末尾是不会对齐的。若需要末尾对齐,可以使用:<style>div { text-align: justify;}</style>意思是内容两端对齐。原创 2020-06-19 09:58:17 · 1659 阅读 · 0 评论 -
flex布局两端对齐space-between,最后一行如果不满的话则从左对齐
给容器元素增加伪类,宽度为子元素宽度&:after { content: ''; width: 200rpx;}原创 2020-05-15 10:47:19 · 2095 阅读 · 0 评论 -
CSS3中使用calc()计算高度,vh以及vw
viewport:是可视窗口,也就是浏览器;vw Viewport是宽度,1vw 等于viewport宽度的1%;vh Viewport是高度,1vh 等于viewport高的的1%;calc()使用通用的数学运算规则计算元素的高度或者宽度。.scroll-list-wrap height calc(100vh - 50px) overflow-y auto overfl...原创 2019-11-07 11:25:09 · 2086 阅读 · 0 评论 -
移动端2倍图和3倍图的处理方法
/* 如果设备像素大于等于2,则用2倍图 */@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2) { .img { background-image: url(../images/arrow@2x.png); background...原创 2019-11-07 10:42:46 · 2102 阅读 · 0 评论 -
移动端遮罩层有滚动条的情况下覆盖全屏
原本用position:absolute;页面滚动遮罩层不会覆盖下方内容,换成position:fixed;就可以解决问题了。.mask { position: fixed; z-index: 99; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; overflow: aut...原创 2019-10-31 11:44:53 · 633 阅读 · 0 评论 -
微信网页ios端不能滚动
微信页面ios端没有滚动效果,安卓端正常,在最外层元素上添加css样式即可。-webkit-overflow-scrolling: touch; //ios滚动原创 2019-10-21 16:37:13 · 556 阅读 · 0 评论 -
页面设置body高度height:100%不生效解决办法
直接body{ height: 100%; }不生效的话,那就在前面加个html吧,如下:html,body { height: 100% }如果想要知道原理的可以参阅下面这篇文章,写得很好转自:https://blog.csdn.net/javaloveiphone/article/details/51098972...转载 2019-10-17 11:44:55 · 702 阅读 · 0 评论 -
flex布局详解
使用flex进行页面布局非常方便,下面对flex的使用方法进行详细说明。假如页面上有3个色块,我们通过flex操作这3个色块的布局。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex</titl原创 2019-03-10 22:29:30 · 236 阅读 · 0 评论 -
button按钮点击的时候出现边框
button按钮在chrome浏览器下被点击时会出现一个蓝色的边框解决方法:button:focus { outline: 0!important;}原创 2018-10-10 11:10:45 · 3113 阅读 · 0 评论 -
div或者p标签单行和多行超出显示省略号
单行文本溢出显示省略号overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行文本显示省略号display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;这个多行文本省略号在iPhone...转载 2018-10-15 09:35:53 · 440 阅读 · 0 评论 -
em和rem的区别
em和rem都是长度单位。em相对于父元素,rem相对于根元素。em:1、父元素font-size:16px,子元素font-size:1em,则为16px;2、width、height、padding、margin这些属性的em,是相对于该元素的font-size的,而不是父元素,div的font-size:30px,width:2em,则width为60px。rem:...原创 2018-10-12 14:10:45 · 213 阅读 · 0 评论