css
ForMyWebFrontSide
做过后端,管理过项目,管过人。在前端技术迅猛发展的这几年,猛然的发现前端工作才是自己的心头爱。目前是一个热爱并志向能从头设计、并实现优秀项目的,偏设计、视觉系方向的前端人或者独立项目者,也喜欢了解性能、优化方面、安全、部署、测试等一条龙的东西。平时愿意倒腾同一玩意的不同实现,有一定程度的代码洁癖,喜欢高质量,结构优秀的代码。一定程度的喜欢研究原理性的东西。对项目能大包大揽,但更喜欢能各尽所能,发挥最大优势,提高工作效率的分工合作。
展开
-
left、offsetLeft、width、offsetWidth区别
目测:1、offsetLeft包括的自身的margin值。offsetLeft值,比style.left多出一个margin值。2、 style.left和style.width值都需要先定义,而且必须要内联在html里,如果定义在css里,则style.left取到的值为空。而offsetLeft则可以取到,无需事先定义div的位置。3、offsetWidth比style.w原创 2015-11-06 19:59:00 · 506 阅读 · 0 评论 -
上下布局——内容内撑
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> html,body{ padding: 0px; margin: 0px; /*关键性设置*/ height: 100%;原创 2016-07-16 21:16:42 · 459 阅读 · 0 评论 -
javascript 的 style.width 取不到元素的宽度值
以前一直用jquery的.width()方法来获取一个元素的当前的宽度。不管该元素是否设置了宽度,CSS样式是内联、外联or内嵌,都可用此方式获得元素当前的宽度。今天想用原生JS想获取一个元素宽度时,写document.getElementById(“id”).style.width或者document.getElementById(“id”).width都取不到值。。。总结了一下。在以下情况下,j转载 2016-07-16 21:20:00 · 3195 阅读 · 0 评论 -
CSS3的calc()使用
参考:http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html转载 2016-07-16 21:27:32 · 297 阅读 · 0 评论 -
解决换行造成元素间空隙的问题
<style> html, body { padding: 0px; margin: 0px; } .gd { width: 100px; height: 20px; text-align: center; display: inline-block; /*backgr原创 2016-07-29 10:52:36 · 2509 阅读 · 0 评论 -
条件注释判断浏览器版本 lt lte gt gte
每次都记不住: 这次记一个全称在这里: lt: less than; lte: less than or equal; gt: greater-than; gte: greater-than or equal ;写法:原创 2016-10-18 17:44:49 · 1862 阅读 · 0 评论 -
兼容ie8 的 rgba()用法
css3中的rgba顺手又好用,但是需求要兼容IE8。。。。。。。怒。。所以,还得找出这个写法。诺~~如下:<style>.mask{position:fixed;top:0px;background:rgba(0,0,0,0.5);height:100%;width: 100%;}</style>/*兼容写法*/<!--[if lte IE 8]><style>.mask{positio原创 2016-10-18 17:53:59 · 4816 阅读 · 0 评论 -
解决font property font-family does not have generic default
编辑器在提醒你,CSS font-famiy需要配置用来 fallback 的 generic-name。generic-name不是指某一款字体,而是一类风格字体。例如: serif,sans-serif,monospace 等。相关链接:http://www.w3.org/TR/CSS21/fonts.html#generic-font-families加上generic-family就好了,中转载 2016-10-05 12:49:09 · 4034 阅读 · 0 评论 -
为什么在css中设置了font-family:" 微软雅黑"没有用
首先可以用{font-family: 微软雅黑;}如果这样不行还可以用:{ font-family: “Microsoft YaHei” ! important; }使用中最好不用中文,中文的话,英文系统就显示不了了。(前提是英文系统也有这个字体)CSS中设置的字体 考虑到兼容性,我们总会在CSS中队字体进行一些设置,这类设置往往设置在body标签上,无论是人人网,腾讯网,淘宝网,开心,新浪,转载 2016-10-05 12:52:20 · 43785 阅读 · 0 评论 -
box-sizing
重新回顾box-sizing中的两种模式:content-box,和border-box. 用语言来描述他们的区别就是: content-box: 在此种模式下,宽高是内容元素的宽高,内边距和边框的宽高会在此基础上增加。border-box:在此种模式下,指定的是该元素整体的宽高。无论元素的内边距和边框如何变化,元素整天宽高不变。元素内容尺寸会变化,即,内容宽=元素width-border*2原创 2017-06-22 11:32:08 · 649 阅读 · 0 评论 -
关于img标签的src的绝对路径问题
最近做在做图片上传本地预览,就想着,其实直接获取到file.value,取得图片地址,不就能在本地看到图片了嘛,为什么网上还那么麻烦,搞那么多花样来读取图片什么滴。 然而仅仅用绝对路径设置了img的src, 图片是不会显示,浏览器还会报错:Not allowed to load local resource: 所以,做了做测试,查了查资料,分析分析:在本地查看页面,如下,这种访问路径:fi原创 2017-06-14 15:18:13 · 36061 阅读 · 10 评论 -
用代码说明height, clientHeight, offsetHeight, scrollHeight 区别 及 为什么height值有时取不到
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 {原创 2017-11-30 16:34:21 · 1441 阅读 · 0 评论 -
css中外边距叠加问题的代码示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width:原创 2018-04-27 16:13:44 · 382 阅读 · 0 评论 -
获取盒子模型的宽高,获取元素的宽高示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>获取盒子模型的宽高 </title> <style> #dv1 {原创 2018-04-27 16:31:44 · 2149 阅读 · 1 评论 -
上下布局——内容外撑
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> body{ padding: 0px; margin: 0px; } .container{ border:1px soli原创 2016-07-16 21:15:22 · 305 阅读 · 0 评论 -
视口坐标和文档坐标的区别
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div style="height: 1000px;background: red;"></div><div id="dv1" style="width: 100px;height: 50px;原创 2016-07-16 19:20:06 · 878 阅读 · 0 评论 -
字体图标兼容性,兼容IE
http://www.w3cfuns.com/thread-5597432-1-1.html@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了转载 2015-12-09 23:53:29 · 10185 阅读 · 0 评论 -
受css内嵌样式中使用 url 影响,页面出现多次加载问题
页面内嵌样式表中使用url(), 出现页面多次载入问题解决来源:互联网 作者:佚名 时间:11-20 08:44:40 【大 中 小】在最近的一个项目中,为了跟踪用户的登录的次数,我们在页面打开时,将用户登录页面的信息进行记录,可在测试中却发现一个用户访问一次的页面,却被记录了二次,也就是说页面被载入了二次。在最近的一个项目中,为了跟踪用户的登录的次数,我们在页面打开时转载 2015-11-18 16:45:40 · 2408 阅读 · 0 评论 -
IE兼容CSS3圆角
IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法http://www.cnblogs.com/leejersey/p/3187039.html1.下载ie-css3.htc 2.CSSbox { -moz-border-radius: 15px; /* Firefox */ -webkit-border-转载 2015-11-23 23:51:52 · 560 阅读 · 0 评论 -
firefox与IE9不显示icon字体图标
文章目录 1、关于icon font 2、在应用icon font实现一淘首页logo发现的问题。1、关于icon font现在主流浏览器(包括IE6)都支持css3的自定义字体(@font-face),因此可以尝试使用font来替换图片展示网站的各种icon。但是各浏览器对于字体文件格式的支持不尽一致。目前主流浏览器对于icon转载 2015-11-25 16:30:29 · 3084 阅读 · 0 评论 -
用CSS美化你的滚动条
用美化你的滚动条http://www.webhek.com/scrollbar 分享 分享 分享 分享 分享本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色,调整它们的外形,适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CS转载 2015-11-24 23:39:24 · 599 阅读 · 0 评论 -
css解决IE、Firefox兼容的div高度100%的问题
html>html xmlns="http://www.w3.org/1999/xhtml">head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title>css解决IE、Firefox兼容的div高度100%的问题title> style> html,bo转载 2015-11-20 23:54:53 · 2035 阅读 · 0 评论 -
word-wrap、white-space和word break的区别
http://jingyan.baidu.com/article/e75aca855b1500142edac6d0.html1、word-wrap:break-word;内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height、width或display:block或position:absolute。转载 2015-11-27 18:08:37 · 414 阅读 · 0 评论 -
在outlook中设置<img>大小
在outlook中,用style设置img标签大小时,比如你是200px宽高的图, style=”width:200px; height:200px;” 这么定义在outlook就没用。你会发现设置未生效。查资料后发现要这么操作。把style中定义的width和height提取到style 之外,并且不加长度单位。 width=”200” height=”200”。这样就行了。原创 2015-12-30 15:14:12 · 3984 阅读 · 0 评论 -
跨浏览器设计–你必须得了解的浏览器默认样式(User Agent Stylesheet)
http://www.w3cways.com/898.html不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0};不过现在说的可不只是这些。基本上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大小、字体选择、字符样式等。也许一个很漂亮的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即使是转载 2015-12-30 18:54:17 · 371 阅读 · 0 评论 -
CSS 的优先级机制[总结]
样式的优先级多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下: (外部样式)External style sheet 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。示例如下: head>转载 2015-11-30 19:07:41 · 423 阅读 · 0 评论 -
如何仅通过CSS实现多行文本超长自动省略号
如何仅通过CSS实现多行文本超长自动省略号 在CSS中,我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾:overflow: hidden;word-break: normal;text-overflow: ellipsis; text-overflow: ellipsis是实现文本截断后以省略号结尾的关键样式,但问题是如果添加该样转载 2016-03-31 19:43:21 · 884 阅读 · 0 评论 -
css3实现隔行换色
http://www.51xuediannao.com/qd63/index.php/page-3-35-1.htmlcss3隔行换色测试 - 前端路上 http://www.51xuediannao.com/qd63/前端路上是懒人建站的多人博客,提供jquery 教程实例学习代码、html5教程实例和css/css3教程实例学习代码。前端路上的灵魂:学习、发现、分享转载 2016-05-12 17:04:12 · 3965 阅读 · 0 评论 -
左边div固定宽度,右边div宽度自适应
http://www.zhihu.com/question/37208845 body{ padding: 0px; margin: 0px; } .wrap{ width: 100%; height:500px; background:red; }转载 2016-05-17 23:34:11 · 1491 阅读 · 0 评论