小编san*_*eep的帖子

绝对与相对位置的宽度和高度

我知道什么是绝对和相对位置,但有些观点仍然没有告诉我.以供参考

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

32
推荐指数
1
解决办法
6万
查看次数

在精灵中使用徽标标签是好还是坏?

在构建网页时,我的一位同事使用CSS background-image属性显示任何徽标,而不是使用HTML <img>标记嵌入图像.该同事报告说它是为了减少HTTP请求的数量.他还向我展示了一个图片精灵,并说谷歌用精灵图像显示其徽标.

我不同意他的做法,并向他展示主Google.com页面<img>标签中加载他们的徽标.

哪个是更好的做法?

编辑: Facebook也在他们的主页上做同样的事情,在img标签中加载徽标,而在他们的个人资料页面上,他们使用CSS精灵显示他们的徽标.

由此我的结论是,也许您应该将主徽标加载到img标记中,而对于其他徽标(例如页脚或子页面),您可能希望使用CSS sprites在后台加载它们.

更新:我经常用img标签加载徽标,也知道为什么我们可能会使用sprite.我的主要问题是:如果页面上有三个或更多徽标,那么加载它们的更好方法是什么?

html css css-sprites

24
推荐指数
4
解决办法
5798
查看次数

将gve css3旋转到Chrome中的DIV然后背景附件:修复创建错误

background-attachment:fixed的工作正常.但是当我在那个DIV上定义CSS3旋转并向下滚动然后background-attachment:fixed停止工作.

检查这个http://jsfiddle.net/P3jS4/

现在我正在研究chrome18.

当你删除旋转css然后后台附件:修复工作正常.

http://jsfiddle.net/P3jS4/2

css google-chrome rotation css3 css-transforms

23
推荐指数
1
解决办法
2848
查看次数

CSS Background-Image拒绝在ASP.Net MVC中显示

我在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)

以上尝试都没有奏效.我能做什么?

css asp.net-mvc-2

21
推荐指数
2
解决办法
6万
查看次数

如何用css创建流体梯形图像?

我正在一个我们使用视差效果的网站上工作.在那里有一些像三角形的图像,像这样在此输入图像描述

&图像是透明的,因为它与上面的DIV重叠.我用css尝试了很多东西.但没有得到理想的结果.我用固定的宽度达到了预期的效果.检查此http://jsfiddle.net/eJ7Sf/2/ 但不适用于流体宽度.检查我仍然尝试但没有工作

http://jsfiddle.net/ceGGN/3/

http://jsfiddle.net/eJ7Sf/1/

注意:我知道css3 MASK属性,但它在firefox以前的浏览器中不起作用.我希望能力直到firefox 3.6.13

css css3 css-shapes

17
推荐指数
2
解决办法
1万
查看次数

是否可以将图像放入input type ="复选框"?

我想在我的HTML代码中的复选框和单选框的背景上放置一个图像,但它不起作用,但它可以在其他表单属性上工作.

html css checkbox

13
推荐指数
1
解决办法
5万
查看次数

当窗口高度减小时,margin-top百分比不会改变

我正在开发一个项目,客户希望导航<div>根据屏幕高度进行对齐,类似于margin-left屏幕宽度减小时百分比的工作方式.

所以,我给了margin-top: 20%导航<div>显示边距,但是当我减小窗口的高度时,它不会根据屏幕高度调整,尽管它在我减小屏幕宽度时起作用.

我的问题不是如何实现这一目标,而是为什么百分比水平而非垂直?

这是一个例子:http://jsfiddle.net/sandeep/5VReY/

css margin

11
推荐指数
2
解决办法
2万
查看次数

-webkit-transform-style:preserve-3d无效

我试图在这个链接code_on_jsfiddle上使用效果.效果是显示硬币旋转时的厚度.代码似乎在jsfiddle上正常工作,但是当我尝试在我的代码库中使用它时,它只是不起作用.请有人建议我使用保存-3d可能不起作用的各种情况,或者可能会出现其他问题.

我试图找出问题所在,我在w3c.org上找到了链接,其中写道:"因此保留3D空间中元素的层次结构要求层次结构中的每个祖先都具有值'preserve-3d'for'变换风格"所以我认为这可能是我的任何祖先div可能没有保留-3d风格,但当我试图模拟这样的情况,其中一个祖先是也没有保留-3D风格甚至比所需的过渡工作链接.使用webkit查看悬停时的转换.请帮忙

css webkit css3

10
推荐指数
3
解决办法
1万
查看次数

在100%屏幕中居中对齐可变宽度div

我有这个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水平居中对齐?

css centering

9
推荐指数
1
解决办法
2万
查看次数

如何在我的应用中跟踪有机广告和付费广告的Facebook用户?

我在我的应用程序中使用facebook sdk来跟踪广告和安装计数.有没有办法知道新应用程序安装的来源是否是facebook广告.

我阅读了facebook sdk文档,但找不到直接的方法.

android facebook ads ios

6
推荐指数
1
解决办法
255
查看次数