css
tracyling
这个作者很懒,什么都没留下…
展开
-
display:none与visibility:hidden不同的隐藏
相同点:display:none和visible:hidden都有把网页上某个元素隐藏起来的功能。区别:visibility:hidden--为隐藏的对象保留其物理空间display: none--不为被隐藏的对象保留其物理空间文字看起来不好理解,我喜欢实例,下面是我整理的一个经典实例,分享一下: display:none与visibility:hi转载 2013-07-23 11:11:07 · 712 阅读 · 0 评论 -
轻松实现元素居中
#test1{width:980px;margin: 0 auto;border: 1px solid #ACACAC;overflow: hidden;} #test1 div{height:50px;line-height: 50px;border: 1px solid #ECA6A4;margin-right: 20px;float: left;}原创 2014-01-14 14:55:27 · 975 阅读 · 0 评论 -
CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并采用不同的样式表。 例如,你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中,这样,在不改变文档内容的情况下,不同的设备可以呈现不同的界面外观。阅读这篇文章学习转载 2014-01-13 17:45:43 · 770 阅读 · 0 评论 -
解决html换行出现空格问题
源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格,空格和回车都会被显示为一个3px的空格。如下<input type="text" class="input2"> 要解决这个问题,可以在换行处父级加css: .div1{font-size:0}; 这样换行后就不会有空格出现. 然后再设置 .div1 input{font-siz原创 2013-10-29 17:30:40 · 6566 阅读 · 0 评论 -
css控制表格细边框
table{border-collapse:collapse;}td{background:#F2F2F2;border:solid 1px #CCCCCC;width:100px;height:22px;}原创 2013-10-14 14:18:03 · 550 阅读 · 0 评论 -
IE6 Bug
1. overflow:hidden失效当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。CSS代码#parent{height:50px;overflow:hidden;}#child a{position:relative;}HTML代码div id=原创 2013-08-30 10:50:11 · 573 阅读 · 0 评论 -
Web性能优化方案
第一章 打开网站慢现状分析在公司访问部署在IDC机房的VIP网站时会感觉很慢。是什么原因造成的?为了缩短页面的响应时间,改进我们的用户体验,我们需要知道用户的时间花在等待什么东西上。 可以跟踪一下我们的登录页面,如下图所示 从上图我们可以分析知道,HTML文档只占了总响应时间的20%,其它80%响应时间用来下载JS、CSS、图片等组件。所以WEB前端有很大的优化空间,转载 2013-09-05 18:49:51 · 574 阅读 · 0 评论 -
CSS如何修改tr边框属性
tr是html标签中行的标记,在web开发中,有时候我们为了美观需要修改行的属性。比如tr的边框。如果我们按照如下的形式修改tr的属性就大错特错了. [html] view plaincopyprint?tr{ border:1px solid #DDDDDD; }转载 2013-08-14 16:37:06 · 628 阅读 · 0 评论 -
子元素div高度不确定,父div自适应高度
在最外层div加以下样式height:100%;overflow:hidden;其它方法:Div即父容器不根据内容自适应高度,我们看下面的代码: 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。 我们可以通过三种方法来解原创 2013-08-09 15:11:53 · 9835 阅读 · 0 评论 -
border:none;与border:0;的区别
这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异。性能差异:【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值转载 2013-07-23 11:03:27 · 440 阅读 · 0 评论 -
IE6/7下如何实现inline-block
摘要 ie6,ie7的haslayout属性是个让人头疼的问题。在做导航条的时候,一般会用到ul li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果,但是问题是inline元素的特性:默认无法设置 ie6,ie7的haslayout属性是个让人头疼的问题。在做导航条的时候,一般会用到ul转载 2013-07-28 09:30:56 · 539 阅读 · 0 评论 -
IE6,IE7下设置body{overflow:hidden;}失效Bug
问题重现:There are no scrollbars on this page in sane browsershtml, body, p { margin: 0; padding: 0; } body { overflow: hidden; } p { width: 5000px; height: 5000px; }IE6 IE7下不生效(IE6下横向纵向滚动条都在 IE7下转载 2014-10-13 09:43:02 · 538 阅读 · 0 评论