我知道什么是绝对和相对位置,但有些观点仍然没有告诉我.以供参考
CSS:
.rel{
position:relative;
background:red;
}
.abs{
position:absolute;
background:blue;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="rel">rel</div>
<div class="abs">abs</div>
Run Code Online (Sandbox Code Playgroud)
现在的要点是:
相对div自动采用100%宽度,但绝对div仅占内容宽度.为什么?
当我给出100%的高度时,相对div没有效果,但绝对div需要100%的高度.为什么?
当我给出margin-top:30px时它的移位绝对div也是当我给出顶部:30px然后只有相对div移位.为什么?
当我不给top:0 , left:0绝对div时,它高于div高度.为什么?
在构建网页时,我的一位同事使用CSS background-image属性显示任何徽标,而不是使用HTML <img>标记嵌入图像.该同事报告说它是为了减少HTTP请求的数量.他还向我展示了一个图片精灵,并说谷歌用精灵图像显示其徽标.
我不同意他的做法,并向他展示主Google.com页面在<img>标签中加载他们的徽标.
哪个是更好的做法?
编辑: Facebook也在他们的主页上做同样的事情,在img标签中加载徽标,而在他们的个人资料页面上,他们使用CSS精灵显示他们的徽标.
由此我的结论是,也许您应该将主徽标加载到img标记中,而对于其他徽标(例如页脚或子页面),您可能希望使用CSS sprites在后台加载它们.
更新:我经常用img标签加载徽标,也知道为什么我们可能会使用sprite.我的主要问题是:如果页面上有三个或更多徽标,那么加载它们的更好方法是什么?
我background-attachment:fixed的工作正常.但是当我在那个DIV上定义CSS3旋转并向下滚动然后background-attachment:fixed停止工作.
检查这个http://jsfiddle.net/P3jS4/
现在我正在研究chrome18.
当你删除旋转css然后后台附件:修复工作正常.
我在ASP.NET MVC 2应用程序中显示背景图像时遇到问题.目前,在〜/ Views/Shared/Site.master中,我将样式表的链接设置为:
<link href="<%:@Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
Run Code Online (Sandbox Code Playgroud)
我计划显示的图片在我的〜/ Content/Images/Designs.png中
这是我尝试过的
body
{
background-image: url(~/Content/Images/designs.png);
background-repeat: repeat;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
Run Code Online (Sandbox Code Playgroud)
其他尝试包括:
background-image: url(./Content/Images/designs.png);
background-image: url(Content/Images/designs.png);
background-image: url(Images/designs.png);
Run Code Online (Sandbox Code Playgroud)
以上尝试都没有奏效.我能做什么?
我正在一个我们使用视差效果的网站上工作.在那里有一些像三角形的图像,像这样
&图像是透明的,因为它与上面的DIV重叠.我用css尝试了很多东西.但没有得到理想的结果.我用固定的宽度达到了预期的效果.检查此http://jsfiddle.net/eJ7Sf/2/ 但不适用于流体宽度.检查我仍然尝试但没有工作
注意:我知道css3 MASK属性,但它在firefox以前的浏览器中不起作用.我希望能力直到firefox 3.6.13
我想在我的HTML代码中的复选框和单选框的背景上放置一个图像,但它不起作用,但它可以在其他表单属性上工作.
我正在开发一个项目,客户希望导航<div>根据屏幕高度进行对齐,类似于margin-left屏幕宽度减小时百分比的工作方式.
所以,我给了margin-top: 20%导航<div>显示边距,但是当我减小窗口的高度时,它不会根据屏幕高度调整,尽管它在我减小屏幕宽度时起作用.
我的问题不是如何实现这一目标,而是为什么百分比水平而非垂直?
我试图在这个链接code_on_jsfiddle上使用效果.效果是显示硬币旋转时的厚度.代码似乎在jsfiddle上正常工作,但是当我尝试在我的代码库中使用它时,它只是不起作用.请有人建议我使用保存-3d可能不起作用的各种情况,或者可能会出现其他问题.
我试图找出问题所在,我在w3c.org上找到了链接,其中写道:"因此保留3D空间中元素的层次结构要求层次结构中的每个祖先都具有值'preserve-3d'for'变换风格"所以我认为这可能是我的任何祖先div可能没有保留-3d风格,但当我试图模拟这样的情况,其中一个祖先是也没有保留-3D风格甚至比所需的过渡工作链接.使用webkit查看悬停时的转换.请帮忙
我有这个HTML
<div id="wrapper">
<div id="center">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="clearBoth"></div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
和CSS
#wrapper{width:100%}
.cell{float:left}
Run Code Online (Sandbox Code Playgroud)
因此包装器的宽度为100%,单元格的宽度和数量是可变的,这意味着#center的宽度也是可变的.
问题:如何保持#center水平居中对齐?
我在我的应用程序中使用facebook sdk来跟踪广告和安装计数.有没有办法知道新应用程序安装的来源是否是facebook广告.
我阅读了facebook sdk文档,但找不到直接的方法.