随笔分类 -  CSS

src为空时，请求的地址是'/'
摘要：在img 对象的src 属性是空字符串("")的时候，浏览器认为这是一个缺省值，值的内容为当前网页的路径。浏览器会用当前路径进行再一次载入，并把其内容作为图像的二进制内 容并试图显示。 对于不同的浏览器测试后，发现对于有无src 或者src 是否为空的情况，还不尽相同，测试结果如下表。 代码 Fir 阅读全文
posted @ 2019-12-17 18:58 小番茄酱 阅读(642) 评论(0) 推荐(0)
CSS如何让页脚固定在页面底部
摘要：（工作中遇到了这个问题，尝试了第一种方法，可行，所以贴在这里） CSS 在进行Web开发实现页面时，可能会遇到这样一种场景：将页脚footer固定在页面的底部，如果页面的主体不能充满屏幕高度，则footer位于 屏幕的底部 ；如果页面的主体超出了屏幕高度，则footer始终位于 页面底部 。 场景的 阅读全文
posted @ 2019-09-27 18:55 小番茄酱 阅读(9416) 评论(0) 推荐(1)
input框，需要隐式显示的时候，不让它自动填充的办法
摘要：input处理： 通过添加readonly＆onfocus =“this.removeAttribute（'readonly'）; 样式处理： 阅读全文
posted @ 2019-07-04 16:48 小番茄酱 阅读(1024) 评论(0) 推荐(0)
关于BFC
摘要：前端精选文摘：BFC 神奇背后的原理 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于 阅读全文
posted @ 2019-06-05 11:05 小番茄酱 阅读(189) 评论(0) 推荐(0)
输入框限制--不能输入中文，切输入的英文要变为大写
摘要：最开始写的方法是： 会出现一个问题，输入中文的时候，输入框也会显示： 参考网上的方法，这里总结一下： 1.首先，在input框加入CSS： style="text-transform: uppercase;" ，会把输入的英文自动转换为大写 2.对input框增加一个onkeyup方法，检查输入的是 阅读全文
posted @ 2018-10-08 15:54 小番茄酱 阅读(1474) 评论(0) 推荐(0)
像素 分辨率 blah blah blah
摘要：http://blog.csdn.net/aiolos1111/article/details/51880223 http://www.jianshu.com/p/a5d194a429b6 http://blog.csdn.net/tongseng/article/details/52788598 阅读全文
posted @ 2017-09-29 11:45 小番茄酱 阅读(156) 评论(0) 推荐(0)
CSS显示指定行数文本、限制文本最大行数
摘要：一、CSS显示指定行数文本 1.单行文本溢出用省略号显示： 2.多行文本溢出用省略号显示： 适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： 更多方法参考：https://hyq9508.github.io/css/2015/06/24/Mutiline 阅读全文
posted @ 2017-08-29 16:37 小番茄酱 阅读(32902) 评论(0) 推荐(1)
区分 word-wrap/word-break/white-space
摘要：word-wrap 属性 设置如何处理元素内的空白（空白：单词之间的空格等） word-wrap: normal (浏览器默认换行规则)只允许在断字点换行 word-wrap: break-word 在长单词或URL地址内部进行换行 word-break 属性 规定自动换行的处理方法 word-br 阅读全文
posted @ 2017-08-29 16:09 小番茄酱 阅读(308) 评论(0) 推荐(0)
使用CSS3 实现input框旁边的清空input内容按钮的显隐
摘要：input框旁边的清空input按钮，我们一般在制作注册以及登录页面的时候会用到。一般的样子是这个样子滴： =》 我们要实现的功能是，在输入的时候，右侧的清空按钮显示出来，然后当删除input中的内容的时候，清空按钮也消失。 以前实现的时候，我用的是“keyup”事件。某一次在做触屏版的时候，不知怎 阅读全文
posted @ 2017-06-20 18:21 小番茄酱 阅读(19272) 评论(1) 推荐(0)
CSS实现div的高度填满剩余空间
摘要：需求： 1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条 2. 绿色部分高度固定，比如50px 3. 紫色部分填充剩余的高度 HTML结构暂且如下： 样式如下： 最重要的部分： 重点是要top和bottom一起使用，这是很反常规的用法，可以强制定义盒模型的区域 转自：http://ww 阅读全文
posted @ 2017-06-20 17:43 小番茄酱 阅读(10640) 评论(0) 推荐(0)
CSS 日常问题总结
摘要：1.关于文本多余部分用省略号代替： http://www.cnblogs.com/hellman/p/5755376.html 2.长方形两边圆角，border-radius单位用em border-radius: 2em; 3.CSSOM视图模式 1. clientLeft和clientTop表示 阅读全文
posted @ 2016-11-10 14:22 小番茄酱 阅读(151) 评论(0) 推荐(0)
十天精通CSS3学习笔记 part4
摘要：CSS3中的变形与动画（下） CSS3 Keyframes介绍 Keyframes 被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 在一个“@keyframes”中的样式规 阅读全文
posted @ 2016-11-03 17:52 小番茄酱 阅读(201) 评论(0) 推荐(0)
十天精通CSS3学习笔记 part3
摘要：第8章 CSS3中的变形与动画（上） 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所 阅读全文
posted @ 2016-09-01 18:36 小番茄酱 阅读(219) 评论(0) 推荐(0)
十天精通CSS3学习笔记 part2
摘要：第6章 征服CSS3选择器（上） 属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这 阅读全文
posted @ 2016-08-30 18:41 小番茄酱 阅读(241) 评论(0) 推荐(0)
十天精通CSS3学习笔记 part1
摘要：http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3？ CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分 阅读全文
posted @ 2016-08-30 12:13 小番茄酱 阅读(462) 评论(0) 推荐(0)
z-index深入理解
摘要：【CSS深入理解之z-index】听课总结 一、z-index基础知识 1.z-index的含义 z-index属性指定了元素及其子元素的【z顺序】，而【z顺序】可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个。 2.属性值 z-index:aut 阅读全文
posted @ 2016-08-26 19:14 小番茄酱 阅读(25930) 评论(1) 推荐(1)
float浮动深入理解
摘要：【CSS深入理解之float浮动】听课总结 1.float的原本作用：为了实现文字环绕 2.float的包裹性和破坏性： 包裹性：收缩、坚挺、隔绝。BFC（Block Formatting Context），块级格式化上下文 破坏性：会让父元素高度塌陷（浮动的破坏性只是单纯的为了实现文字的环绕效果而 阅读全文
posted @ 2016-08-26 12:01 小番茄酱 阅读(624) 评论(0) 推荐(0)