Tag: css3

DIV高度设置为屏幕百分比？: 我正在设置父DIV为完整100％屏幕高度的70％。我已经设置了下面的CSS，但它似乎没有做任何事情： body { font-family: 'Noto Sans', sans-serif; margin: 0 auto; height: 100%; width: 100%; } .header { height: 70%; } 出于某种原因，它似乎并没有工作，但标题不是屏幕尺寸的70％。有什么build议？

很难解决和奇怪的css3不透明度过渡问题（…必须是一个错误？）: 我绝对把我所有的头发都拿出来，带着这个非常令人沮丧和奇怪的css问题。我正在使用骨头样板制作一个网站，它一直很棒，直到现在… 它使用stream体网格系统，我最近试图创build一个简单的画廊，我已经成为一个网格（4个图像，每个包装在一个四分之一的列，第一/最后一个类添加到第一个/最后一个图像）。如果将鼠标hover在图像上（出于某种原因，前三种情况尤其明显），您会注意到由于某种疯狂的原因，它们将宽度改变了一个或两个像素。图像设置为最大宽度：100％，我有一种感觉，这是某种程度上的罪魁祸首，因为如果你给图像一个“固定的”宽度（例如.gallery-icon img {max-width：165px;}，它解决了这个问题，但作为一个stream动的网格系统，我不能沿着这条路线走，因为如果调整浏览器的大小，图像保持165px，即使我根据媒体设置了4种不同的宽度，在媒体大小之间，图像将不能正确alignment。如果它不是过渡效果问题（如果我把过渡closures，图像较低的不透明度罚款，但没有animation），它会工作，因为我想它的工作:( 请帮助家伙！这是一个空的演示网站，骨头样板运行，只是在页面上的画廊。让我知道如果你看到摇晃的问题。（我不能在jsfiddle上重新创build它，所以我把它安装在一个旧的域名上，编辑：我刚才注意到，这个问题似乎发生在宽度和高度都比div大的图像。图像1 + 3是这个，他们有错误，而图像2,4似乎是好的？和图像2 + 4有一个比div更小的高度…..但即使我将图像设置为最大高度，问题仍然存在。编辑2：添加了一个快速的video来显示问题（最新的Firefox和Chrome） http://www.youtube.com/watch?v=uL81hLfMvvw

寻求一种优雅的，仅用于CSS的隐藏/显示自动高度内容的方法（包含转换）: 我想要一个只使用CSS转换的方法来有效地（并且有吸引力地）隐藏/显示hover的内容。需要注意的是我希望保持dynamic（自动）高度。看起来，最佳路线是在fixed height:0到height:auto ，但是，这在浏览器中的转换中还不被支持。澄清回应评论 ::这不是一个等待，直到所有生活的浏览器是CSS3兼容的问题，而是解决一个CSS3本身的缺陷（如缺乏height:0 > height:auto ）我已经探索了其他一些方法，可以在下面的小提琴（详细介绍见下文），但没有一个满足我，我会喜欢反馈/其他方法的提示。 http://jsfiddle.net/leifparker/PWbXp/1/ 基本的CSS .content{ -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; overflow:hidden; } 变化＃1 – 最大高度的黑客 .content { max-height:0px; } .activator:hover +.content{ max-height:2000px; } 缺点一个。您需要随意设置一个较高的最大高度，该高度最大高度与广泛的dynamic内容可能会切断信息。湾如果作为（ a ）的预防措施，则采取设置非常高的最大高度，animation的延迟变得难以处理，因为浏览器无形中转换了整个距离。也使得缓解视觉效果变差。变化＃2 – 填充和增长的幻觉 .content { padding:0px; height:0px; opacity:0; } […]

响应式网页devise中的单一样式和多个样式表: 简而言之：在进行响应式网页devise时，您应该使用一个还是多个样式表？详细：在响应式devise中，您倾向于拥有一大块CSS，然后在其达到某个断点时调整布局。您可以通过以下两种方式之一构build您的代码：单个样式表 /* Main CSS */ @media only screen and (min-width: 480px) { /* CSS */ } @media only screen and (min-width: 640px) { /* CSS */ } @media only screen and (min-width: 800px) { /* CSS */ } 多个样式表 <link rel="stylesheet" media="screen" href="main.css"> <link rel="stylesheet" media="only screen and (min-width: […]

在使用@media查询时，手机是否加载非相关查询和图像？: 如果我的CSS基于移动样式，然后使用@media查询逐渐变大的显示器（平板电脑，桌面等），移动设备会使用桌面样式吗？我相信通常情况下，移动设备将加载所有图像，即使它们不适用于它自己的特定介质尺寸。这意味着它会加载所有的图像，并隐藏不符合其基于查询的样式表。我想要做的是使用一个背景为更大的版本的网站： .splash { background: #1a1a1a url('/assets/imageLarge.png') no-repeat; } 另一个是移动版本： .splash { background: #1a1a1a url('/assets/imageSmall.png') no-repeat; } 如果我在任何媒体查询之前应用手机CSS，并使用@media screen and (min-device-width: 481px) {…}查询添加下面的大媒体CSS，移动设备也会加载大图像吗？

在CSS FlexBox布局中自动调整图像大小并保持纵横比？: 我使用了如下所示的CSS弹性框布局：如果屏幕变小，则变成：问题在于图像不能保持原始图像的纵横比。如果屏幕变小，是否可以使用纯CSS和popup框布局来调整图像大小？这是我的html： <div class="content"> <div class="row"> <div class="cell"> <img src="http://i.imgur.com/OUla6mK.jpg"/> </div> <div class="cell"> <img src="http://i.imgur.com/M16WzMd.jpg"/> </div> </div> </div> 我的CSS： .content { background-color: yellow; } .row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; justify-content: center; […]

如何使用：before和：after创build内联样式: 我从http://www.ilikepixels.co.uk/drop/bubbler/生成了一个泡泡聊天在我的页面里面放了一个数字 .bubble { position: relative; width: 20px; height: 15px; padding: 0; background: #FFF; border: 1px solid #000; border-radius: 5px; } .bubble:after { content: ""; position: absolute; top: 4px; left: -4px; border-style: solid; border-width: 3px 4px 3px 0; border-color: transparent #FFF; display: block; width: 0; z-index: 1; } .bubble:before { content: ""; position: absolute; top: […]

只有用CSS才能扩展一个textarea？: 我有一个高度为200px的textarea，但是当我用文本传递200px时，我希望扩展textarea而不是用滚动条保持200px的高度。只有用CSS才能做到这一点？

我怎样才能让我的柔性版式占据100％的垂直空间？: 我怎样才能告诉flexbox布局行消耗浏览器窗口中剩余的垂直空间？我有一个3行的flexbox布局。前两行是固定的高度，但第三个是dynamic的，我希望它增长到浏览器的整个高度。我有第3行中的另一个flexbox创build一组列。为了正确调整这些列中的元素，我需要他们理解浏览器的全部高度 – 例如底色的背景颜色和项目alignment。主要的布局最终会像这样： .vwrapper { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; //height: 1000px; } .vwrapper #row1 { background-color: red; } .vwrapper #row2 { background-color: blue; } .vwrapper #row3 { background-color: green; flex 1 1 auto; display: flex; } .vwrapper #row3 #col1 { background-color: yellow; […]

CSS：我怎样才能设置图像大小相对于父母的高度？: 我想弄清楚如何重新调整图像的大小，使其保持宽高比，但重新resize直到图像的高度与包含div的高度相匹配。我有这些相当大和很长的图像（截图），我想把它们放到一个200像素的宽度，180像素的高度div用于显示，而不需要手动重新调整图像大小。为了使这看起来不错，图像的两侧需要溢出，并与包含div的隐藏。这是我迄今为止： http://jsfiddle.net/f9krj/2/ HTML <a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg"> <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" /> </a> CSS a.image_container { background-color: #999; width: 200px; height: 180px; display: inline-block; overflow: hidden; } a.image_container img { width: 100%; } 正如你所看到的，图像父容器上显示灰色，根本不应该显示。为了使该容器完全充满，宽度需要在两侧平均溢出。这可能吗？是否也可以解释也是太高的图像？