css
coder_xsy
这个作者很懒,什么都没留下…
展开
-
行内元素的默认的横向边距与纵向边距
行内元素在渲染是会默认添加右侧和底部边距,如果在多个图片排列时这种情况就比较明显,当我们需要在布局上完全无边距的时候就需要去除这些编剧去除方法就是// 在单元元素上添加下面对应的属性去除边距// 去除横向边距.x-noSpace { font-size: 0;}// 去除纵向边距.y-noSpace { line-height: 0;}...原创 2020-02-03 14:47:34 · 367 阅读 · 0 评论 -
flex布局中图片元素宽度确定但高度无法自适应的问题
今天在使用flex布局中,为了不新增额外的dom元素,直接将img元素放在flex容器的下一层,作为一个flex项目,但是为了横向排列,所以给img元素设置了宽度,但是高度没有随着宽度变化而变化(保持高宽比),情况如下:/*html*/...<div class="flexBox"> <img src="image.jpg" alt="img"/> ...原创 2019-05-12 10:20:41 · 8393 阅读 · 2 评论 -
弹出窗遮罩层点击无效
在遮罩层使用pointer-event:none属性设置(css属性)原创 2019-05-24 16:21:03 · 2090 阅读 · 0 评论 -
使用float属性构建侧滑框
使用float属性构建侧滑框原理:/**统一盒模型*/*{ box-sizing:border-box;}/**本行中自动(随侧边滑动框滑动)改变宽度的内容*/.content{ display:block; overflow:hidden;}/** 通过改变滑动框的宽度来实现滑动的效果 可以使用animate添加一次性的动画*/.slide{ ...原创 2019-04-07 21:15:12 · 548 阅读 · 4 评论 -
文本超出容器后省略号显示
在进行页面设计的时候文本一般是后台给的数据,无法确定它的长度,但是为了使文本的长度过长的时候不会影响容器大小,这个时候我们可能选择的方式是通过设置容器大小然后再设置它的overflow:hidden;但是这样就可能会显示滚动条,影响页面的美观,我们在网上看到的大多数方式都是通过使用省略号的形式,具体的css设置为:/*这里面有一个特别需要注意的地方,使用该效果的元素必须具有可计算的width...原创 2019-03-21 16:13:07 · 409 阅读 · 0 评论 -
宽度自适应布局
前端开发中宽度自适应是不可避免的问题,毕竟为了考虑到不同用户的显示终端的尺寸或者在PC端的时候用户主动改变浏览器窗口大小,所以在布局时就需要考虑到自适应宽度的问题。(如果直接冲UI提供的设计稿开始的话,不同的公司对于UI到具体代码的尺寸转换有不同的计算方式,所以这一步跳过,只考虑代码层面的自适应布局)通过的使用几个前端框架的总结:宽度自适应,底层都是使用的媒体查询,只不过不同框架或者公司会...原创 2019-03-14 17:05:27 · 7137 阅读 · 0 评论 -
canvas 的行内属性width、height与css的width、height属性差别
先贴上mdn上的解释canvas具有两个行内的属性:width与height属性,同时如果使用css定义width与height属性;在解释这两类之间的差别之前先看一下作的测试:css:canvas { display: block; border: 2px solid gray; border-radius: 10px; width:800px; h...原创 2018-12-23 16:59:59 · 2501 阅读 · 0 评论 -
父子元素同时使用rotate的效果叠加
今天在做页面设计的时候使用到了transform:rotate() ;突然有一个想法,如果父元素使用了rotate ,子元素也使用了rotate,效果会发生什么叠加,叠加效果又是什么样的呢???所以做了一个测试:首先通过布局使父子元素的X轴和Y轴重合,然后改变父子元素rotateX的值,观察效果。 /*css*/ .cover-container { ...原创 2018-10-07 21:08:16 · 1611 阅读 · 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 评论 -
移动端大小自适应
在寻找font-boosting问题的答案时浏览到一篇关于自适应不同屏幕的方法:rem这个是移动端是很适用的,因为在移动端,我们不能在屏幕上拖拽改变浏览窗口的大小,所以在我们需要做的就是在加载的时候根据移动端的屏幕大小给屏幕中距离(width height margin padding font-size...)设置提供一个标准,解决办法就是在js的ready中根据屏幕大小设置html中的font...转载 2018-06-13 22:10:09 · 190 阅读 · 0 评论 -
font-boosting问题(移动端设置相同的font-size但是显示不对应)
在移动端页面开发中,使用一个css来设置元素中的font-size,但是对于同一个class设置,在不同元素中效果却不同,而且在调试的时候该表font-size发现也有相应,说明这个class有效果,但是在不同元素中却得到不同的效果,特别当元素中含有的文本元素数量差别较大时。在网上查找资料之后发现这个是一个叫font-boosting的问题,当文本数量太多,计算机认为在屏幕上显示这么多文本会导致用...转载 2018-06-13 21:58:55 · 1757 阅读 · 0 评论 -
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 评论 -
CSS学习笔记(二)
11、浮动11.1使用属性float:right/left/none/inherit使用浮动属性会使该元素的内容不存在与普通流当中的位置,相对与不存在,所以不会包含在块级元素中,如果块级元素要实现包含的效果,需在内部添加一个普通流元素11.2使用clear:both/left/right/none;清除浮动清除浮动需要在块级元素周围的元素添加clear属性,指明了需要清除那一边的影响12元素尺寸h...原创 2018-03-02 11:49:08 · 113 阅读 · 0 评论 -
CSS学习笔记(一)
css声明:颜色表示 :关键词、 #111111、 rgb(50,40,30); 长度表示:px、 em、%...1、css的基本格式选择器{ 声明(属性:属性值; <如果属性值含有多个值时,用“”>)}2、选择器 2.1派生选择器 如 dt code{ color: red; } 表示dt中的code元素中的文本显示红色,其他的co...原创 2018-03-01 14:35:54 · 134 阅读 · 0 评论