Tag: css3
CSS Flexbox问题：为什么我的flexchildren的宽度受其内容影响？
我box-flex: 1的两个孩子每个都被赋予一个box-flex: 1的风格box-flex: 1 。 我的理解是，它们的宽度应该相互相等 （均占据其父级柔性盒总宽度的50％ ）。 但是，当内容添加到孩子们，他们的宽度改变（取决于内容和填充）！ 为什么会这样呢？ CSS： .hasFlex { display: box; display: -webkit-box; display: -moz-box; -webkit-box-align: start; -moz-box-align: start; box-align: start;} .box0 { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0;} .box1 { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;} .box2 { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2;} .box3 { -webkit-box-flex: 3; -moz-box-flex: 3; […]
CSS非包装浮动div
我需要创build一个包含可变数量的（浮动？）div的单行：容器维度是固定的，并且应该在需要时添加水平滚动条，从不包装。 我尝试了以下，但它不起作用：它换行。 div#sub { background-image:url("../gfx/CorniceSotto.png"); width:760px; height:190px; } div#sub > div#ranking { position:relative; top:42px; left:7px; width:722px; height:125px; overflow-x:auto; overflow-y:hidden; } div#sub > div#ranking > div.player { float:left; width:67px; height:120px; margin-left:5px; background-color:#f3e1bb; } 我已经尝试了一些东西（内联，表格单元等），但都失败了。 可以这样做吗？ 如果是这样，怎么样？
CSS3 Flexbox：显示：框与flexbox与flex
我昨天成为学校使用css3 flexbox声明的网站。 我从来没有使用过。 所以我谷歌了一下。 并发现了很多不同风格的flexbox语句。 有些人写的display: box; ，一些使用display: flexbox; 和其他display: flex; 。 那么有什么不同呢？ 我应该用哪个？
如何在bootstrap中使用垂直alignment
简单的问题：如何使用引导程序在col中垂直alignmentcol？ 这里的例子（我想垂直alignmentchild1a和child1b）： http://bootply.com/73666 HTML <div class="col-lg-12"> <div class="col-lg-6 col-md-6 col-12 child1"> <div class="col-12 child1a">Child content 1a</div> <div class="col-12 child1b">Child content 1b</div> </div> <div class="col-lg-6 col-md-6 col-12 child2"> Child content 2<br> Child content 2<br> Child content 2<br> Child content 2<br> Child content 2<br> </div> </div> UPDATE 一些CSS： .col-lg-12{ top:40px; bottom:0px; border:4px solid green; } .child1a, .child1b{ […]
如何在CSS中绘制一个圆圈？
那么，用纯CSS绘制一个圆圈很容易。 .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } 我如何画一个部门？ 给定X度[0-360]我想画一个X度的部分。 我可以用纯CSS做到这一点吗？ 例如： 谢谢+例子 谢谢乔纳森，我用了第一种方法。 如果这有助于某人获得百分比并绘制一个扇区的JQuery函数的示例。 该部门在百分比圆圈后面，这个例子展示了如何从一个起点开始围绕一个圆弧来实现一个圆弧。 $(function drawSector() { var activeBorder = $("#activeBorder"); var prec = activeBorder.children().children().text(); if (prec > 100) prec = 100; var deg = prec * 3.6; if (deg <= 180) { activeBorder.css('background-image', 'linear-gradient(' […]
如何使主要内容div填充屏幕的高度与CSS
所以我有一个页眉，主体和页脚的网页。 我希望主体填充100％的页面（在页脚和页眉之间填充100％）我的页脚是绝对位置，底部为0.每当我尝试将主体设置为100％高度或更改位置或东西时，它也将溢出标题。 如果将body设置为绝对top: 40 （导致我的标题是40px高），它将只是下降40px，创build一个滚动条。 我创build了一个简单的html文件，因为我实际上不能从实际项目中发布整个页面/ css。 使用示例代码，即使maincontent主体填满了屏幕，它也会下降40px（引起我的头）。 html, body{ margin: 0; padding: 0;} header{ height: 40px; width: 100%; background-color: blue; } #maincontent{ background-color: green; height: 100%; width: 100%; } footer{ height: 40px; width: 100%; background-color: grey; position: absolute; bottom: 0; } 的HTML <html> <head> <title>test</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <header></header> <div id="maincontent"> […]
哪些CSSselect器或规则可以显着影响现实世界中的前端布局/渲染性能？
CSS渲染性能值得担心吗？ 或者我们应该不用担心CSS的效率问题，只关注编写优雅或可维护的CSS呢？ 这个问题的目的是为前端开发人员提供一个有用的资源，在这些资源上CSS的某些部分实际上可能会对设备性能产生重大影响，以及哪些设备/浏览器或引擎可能受到影响。 这不是一个关于如何编写优雅或可维护的CSS的问题，它纯粹是关于性能（尽pipe希望这里写的可以通知更多关于最佳实践的一般性文章）。 现有的证据 Google和Mozilla已经编写了编写高效CSS的指导方针， CSSLint的规则包括： 避免看起来像正则expression式的select器。不要使用复杂的相等运算符来避免性能损失 但他们都没有提供任何证据（我能find）的影响。 关于高效CSS的css-tricks.com文章指出（在概述一系列效率最佳实践之后），我们不应该not .. sacrifice semantics or maintainability for efficient CSS 。 一个完美杀死博客文章build议border-radius和box-shadow渲染比简单的CSS规则慢几个数量级。 这在Opera的引擎中是非常重要的，但在Webkit中是微不足道的。 此外，一个CSS杂志的基准testing发现，CSS3显示规则的渲染时间是微不足道的，并且比使用图像渲染等效效果要快得多。 知道你的手机testing了各种移动浏览器 ，发现他们都渲染CSS3同样微不足道（12毫秒），但它看起来像他们做了在PC上的testing，所以我们不能推断任何有关手持设备如何执行CSS3一般。 互联网上有 很多关于如何编写高效CSS的文章。 然而，我还没有find任何综合的证据，认为严重考虑CSS实际上对网站的渲染时间或活动有重大影响。 背景 退后一步，我要去尝试科学http://brightgreenscotland.org/wp-content/uploads/2010/09/stand-back-Im-going-to-try-science.png 我提出了这个问题的赏金，试图利用SO的社区力量来创造一个有用的研究资源。
select标签的占位符
是否有可能在select标签上占位符？ <select placeholder="select your beverage"> <option>Tea</option> <option>coffee</option> <option>soda</option> </select> 或者可能是一个可能的工作？
如何保持弹性项目由于其文本溢出？
我有一个列表下面的布局。 每个列表项目由两列表示。 第二列应该占用所有可用空间，但是如果第一列占用太多空间，它应该以最小尺寸固定在右边。 第一列应该显示一个省略号。 最后一种情况发生了问题。 当第一列由太多的文本组成，而不是显示一个省略号，它伸出自己的flexbox导致一个水平滚动条出现，而第二列没有固定在右边。 我想要它像这样（模拟）呈现： 我怎样才能做到这一点？ 这是样品小提琴 。 .container { display: -webkit-flex; } div { white-space: nowrap; text-overflow: ellipsis; } .container > div:last-child { -webkit-flex: 1; background: red; } <!– a small first column; the second column is taking up space as expected –> <div class="container"> <div>foo barfoo bar</div> <div>foo bar</div> </div> <!– […]
Twitter的Bootstrap响应背景图像内Div
如何修改#bg图片，以便在所有浏览器中都能够响应，resize和成比例？ HTML： <div class="container"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8 col-sm-6 col-xs-12 well" id="bg"> </div> <div class="col-md-2"></div> </div> </div> CSS： @import url('bootstrap.min.css'); body{ background: url('../img/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin-top: 12%; } #bg{ background:url('../img/con_bg4.png') no-repeat center center; height: 500px; }
