css
文章平均质量分 65
Jqlender
这个作者很懒,什么都没留下…
展开
-
浏览器兼容问题总结
1.不同浏览器的标签默认的margin和padding不同解决:*{margin:0;padding:0}2.IE6不支持圆角解决:用图片代替3.在IE下img外边加了a链接后产生难看的蓝色边框解决:img{border:0}4.IE6下给块属性标签float后,又添加的指定margin-left的时候,IE6出现双倍边距解决:给浮动元素加display:inlin...原创 2018-08-26 11:42:23 · 662 阅读 · 0 评论 -
css选择器 p>a,p~a,p+a区别
p>a:子选择器,表示p元素下的第一级子元素ap~a:兄弟选择器,p之后出现的所有兄弟a,a不必紧跟p后边p+a:相邻兄弟选择器,紧跟其后的第一个兄弟元素...原创 2019-07-15 12:36:59 · 1247 阅读 · 0 评论 -
【vue】ios中从详情页中返回到列表页出现空白的问题
移动端开发 vue项目中,ios机器上点击返回列表页的时候,会出现空白现象,触屏一下或者拉动一下,数据才会显示出来,针对此问题,尝试了很多次,最终解决方法如下:给#app加以下样式:overflow-y: auto;-webkit-overflow-scrolling: touch;...原创 2019-07-08 15:47:54 · 950 阅读 · 0 评论 -
iPhone7p与iPhoneX布局出现右边白边问题
原因:是由于border-radius与overflow:hidden一起使用引起的解决方法:border-radius与overflow:hidden不能一起使用就不会出现白边原创 2019-05-20 21:26:08 · 2682 阅读 · 0 评论 -
在移动端禁用长按选中文本功能
{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}input {-webkit-touch-callout: auto;-webkit-us...原创 2019-04-25 19:35:57 · 1130 阅读 · 0 评论 -
如何解决两个相邻的span中间空隙
产生间隙原因: 换行或空格会占据一定的位置。1.span直接在一行,没有空格<style> span{background: red;}</style><span>1</span><span>2</span>这种方案是最直接的解决方案,但却也是最不靠谱的方案,存在很多不可控因素。很多场景会让你崩溃:前后端协同...原创 2018-12-17 15:38:08 · 3698 阅读 · 1 评论 -
css布局左右2边固定,中间自适应
1.position+margin原理说明:通过绝对定位将两个侧栏固定,同样通过外边距给两个侧栏腾出空间,中间列自适应。&lt;style&gt; .left, .right { position: absolute; top: 0; width: 200px; height:40px; backgroun...原创 2018-12-17 14:56:27 · 324 阅读 · 0 评论 -
div+css盒子居中
1.利用margin优点:兼容性好缺点:必须知道内容盒子的高度才可以,有了这点限制;div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-top的数值:(100-40)/2=30 &amp;lt;style type=&quot;text/css&quot;&amp;gt; .div1{ width: ...原创 2018-12-15 12:06:06 · 934 阅读 · 0 评论 -
css伪类与伪元素区别
伪类伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。...原创 2018-12-13 17:21:47 · 268 阅读 · 1 评论 -
HTML5 body设置全屏背景图片
之前这样加背景图测出来有的手机浏览器上全屏背景图宽度超过屏幕宽度,比如mate9上&lt;div class='box'&gt;&lt;/div&gt;html,body{ width:100%; height:100%}.box{ width: 100%; height: 100%; background: url(a.jpg) no-repea...原创 2018-10-20 15:16:37 · 28542 阅读 · 1 评论 -
不定高度的弹框 垂直水平居中
子元素宽度一般会有,比如给80%;高度不固定 一、定位与margin 子元素设置position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;二、flex布局 父元素设置display:flex;justify-content:center;align-items:center三、css3的transfrom 子元素...原创 2018-09-05 10:25:51 · 1734 阅读 · 0 评论 -
top与bottom、left与right的优先级
同时使用top和bottom,效果如何呢?如果给一个设置高度的元素设置绝对定位的元素中top和bottom,top优先,而且bottom加 !important也“敌不过”top。 可以理解成:浏览器解释代码的时候发现top和bottom同时存在,就放弃解释bottom,那么bottom的属性值也就不会被解释,就是说!important没上场与其作战)。同理,left和right,是left...原创 2018-08-31 17:11:48 · 4874 阅读 · 0 评论 -
webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容
当前我们在写css样式的时候总是要处理浏览器兼容问题,那就是加前缀问题,可是我们在开发的时候比如: 直接写个:.className{ display: flex;}想变成下面这种的.className{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: f...原创 2018-08-23 18:10:36 · 6113 阅读 · 0 评论 -
flex布局3等分
<style> .wrap{ display: flex; width: 500px; height: 200px; } .item{ border: 1px solid #000; flex: 1; }...原创 2019-07-22 13:16:19 · 8077 阅读 · 0 评论