![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
coder_xsy
这个作者很懒,什么都没留下…
展开
-
CSS3学习笔记(一)
css1、边框1.1边框的样式:border:width style color;1.2边框四个角的半径border-top-left-radius:(top)#px/% (left)#px/%;border-top-right-radius:border-bottom-left-radius:border-bottom-right-radius:或者直接 border-radius:1.3边框阴...原创 2018-03-02 11:52:47 · 171 阅读 · 0 评论 -
font-boosting问题(移动端设置相同的font-size但是显示不对应)
在移动端页面开发中,使用一个css来设置元素中的font-size,但是对于同一个class设置,在不同元素中效果却不同,而且在调试的时候该表font-size发现也有相应,说明这个class有效果,但是在不同元素中却得到不同的效果,特别当元素中含有的文本元素数量差别较大时。在网上查找资料之后发现这个是一个叫font-boosting的问题,当文本数量太多,计算机认为在屏幕上显示这么多文本会导致用...转载 2018-06-13 21:58:55 · 1755 阅读 · 0 评论 -
z-index无效的解决办法
今天在做移动端web页面开发的时候,由于UI方案的设计图需要部分层叠的效果,所以使用z-index,存在这种情况:使用z-index为负数实现了层叠效果,但是由于底层存在事件,但是由于z-idnex为负数,所以该块级元素处于body之下,导致事件无法触发,修改z-index为正,但是存在大小顺序之后可以触发事件,但是没有了层叠效果。查阅资料之后,发现了自己对z-index的了解存在误区。上面是在w...转载 2018-06-10 11:15:05 · 4771 阅读 · 1 评论 -
table元素无法固定列宽,width设置无效
之前在做table的时候,因为不是用来做数据的展示的,所以对于具体的格式没有太高的要求,所以没有去深入了解,这次在做一个数据展示列表的时候使用table,因为假设每一个单元格数据是没有固定长度的,所以为了界面不会因为数据的变化格式发生大变化,所以希望table的每一列都是固定宽度。然后使用js对数据处理。但是在使用css设置时:.item_list {display: inline-b...原创 2018-08-05 09:10:41 · 10151 阅读 · 0 评论 -
父子元素同时使用rotate的效果叠加
今天在做页面设计的时候使用到了transform:rotate() ;突然有一个想法,如果父元素使用了rotate ,子元素也使用了rotate,效果会发生什么叠加,叠加效果又是什么样的呢???所以做了一个测试:首先通过布局使父子元素的X轴和Y轴重合,然后改变父子元素rotateX的值,观察效果。 /*css*/ .cover-container { ...原创 2018-10-07 21:08:16 · 1611 阅读 · 0 评论 -
宽度自适应布局
前端开发中宽度自适应是不可避免的问题,毕竟为了考虑到不同用户的显示终端的尺寸或者在PC端的时候用户主动改变浏览器窗口大小,所以在布局时就需要考虑到自适应宽度的问题。(如果直接冲UI提供的设计稿开始的话,不同的公司对于UI到具体代码的尺寸转换有不同的计算方式,所以这一步跳过,只考虑代码层面的自适应布局)通过的使用几个前端框架的总结:宽度自适应,底层都是使用的媒体查询,只不过不同框架或者公司会...原创 2019-03-14 17:05:27 · 7137 阅读 · 0 评论 -
父元素opacity属性对子元素的影响(子元素设置opacity无效)
问题来源于实践这段时间做了一个项目优化,对于原有的内容进行了重新设计实现,其中一项就是对于label标签添加hover层进行解释说明,最常用的办法及时label的容器设置relative,然后hover层作为它的子元素设置absolute,然后在使用label的hover伪类来控制hover层的显示和隐藏,这其中一个要求及时hover层必定要求能够遮住页面中其他的元素,所以最常用的办法是设置它...原创 2019-08-18 11:05:48 · 5439 阅读 · 2 评论 -
遮罩层事件穿透&完全禁止底部内容滑动(touch/app/wx/www)
问题源自实践在touch和app端如果需要做一个嵌入的html页面,如果需要做弹窗的话一般需要使用一个遮罩层的,然后在遮罩层设计弹出窗的内容,一般弹出窗是active之后,底部的内容是需要完全静止的(数据更新除外哈),在遮罩上进行的操作不能渗透到底部去,这种情况一般体现在遮罩层滑动需要禁止底部内容滑动,这种情况我们一般的处理方法是在弹出事件中设置底部内容的over-flow:hidden,在关...原创 2019-08-18 15:24:38 · 3164 阅读 · 0 评论