Tag: css3

媒体查询：如何定位桌面，平板电脑和移动设备？

我一直在做一些关于媒体查询的研究，我还不太了解如何定位一定大小的设备。 我希望能够瞄准桌面，平板电脑和手机。 我知道会有一些差异，但是有一个可以用来定位这些设备的通用系统会很好。 我发现了一些例子： # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) 要么： # Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen and (min-width:769px) 你认为这些“断点”应该用于每个设备？

与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议最受欢迎。

我可以结合：nth-​​child（）或：nth-​​of-type（）与任意select器？

有没有办法select匹配（或不匹配）任意select器的每个第n个孩子？ 例如，我想要select每个奇数的表行，但在行的一个子集内： table.myClass tr.row:nth-child(odd) { … } <table class="myClass"> <tr> <td>Row <tr class="row"> <!– I want this –> <td>Row <tr class="row"> <td>Row <tr class="row"> <!– And this –> <td>Row </table> 但是:nth-child()似乎只计算所有tr元素，不pipe它们是否是“row”类，所以我最终得到了一个“row”元素，而不是我正在寻找的两个元素对于。 同样的事情发生在:nth-of-type() 。 有人能解释为什么吗？

Flexbox：水平和垂直居中

如何使用flexbox水平放置div，并在容器内垂直放置div。 在下面的例子中，我希望每个数字在下面（在行中），这是水平居中。 .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> </div> <div class="row"> <span […]

Chrome / Safari没有填充flex父项的100％高度

我想要一个具有特定高度的垂直菜单。 每个孩子必须填写父母的高度，并有中间排列的文本。 孩子的数量是随机的，所以我必须使用dynamic值。 .container包含随机数的子项（ .item ），它们必须始终填充父项的高度。 为了实现我用flexbox。 为了使文本链接与中间alignment，我使用display: table-cell技术。 但是使用桌面显示需要使用100％的高度。 我的问题是.item-inner { height: 100% }在webkit（Chrome）中不起作用。 有没有解决这个问题？ 还是有一种不同的技术，使所有.item填充父母的高度与文本垂直alignment中间？ 这里的示例jsFiddle，应该在Firefox和Chrome中查看 .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; } .item-inner { height: 100%; width: 100%; display: table; } a { background: orange; display: table-cell; […]

Flex项目是否可以紧紧地alignment上面的项目？

实际上，这是Pinterest的布局。 但是，在线发现的解决scheme是用列包装的，这意味着容器无意中水平生长。 这不是 Pinterest的布局，它不适合dynamic加载的内容。 我想要做的是有一堆固定宽度和不对称高度的图像，水平放置，但在固定宽度容器的极限满足时， Flexbox能做到这一点，还是我不得不诉诸像砌体JS解决scheme？

如何水平和垂直居中元素？

我试图垂直居中我的标签内容，但是当我添加CSS样式display:inline-flex ，水平文本alignment消失。 我怎样才能使我的每个标签的文本alignmentx和y？ * { box-sizing:border-box; } #leftFrame { background-color:green; position:absolute; left:0; right:60%; top:0; bottom:0; } #leftFrame #tabs { background-color:red; position:absolute; top:0; left:0; right:0; height:25%; } #leftFrame #tabs div { border:2px solid black; position:static; float:left; width:50%; height:100%; text-align:center; display: inline-flex; align-items: center; } <div id=leftFrame> <div id=tabs> <div>first</div> <div>second</div> </div> </div>

我如何过渡高度：0; 到高度：auto; 使用CSS？

我正在尝试使用CSS转换向下滑动<ul> 。 <ul>从height: 0;开始height: 0; 。 hover时，高度设置为height:auto; 。 但是，这导致它只是出现， 而不是过渡， 如果我从height: 40px; 到height: auto; ，那么它将滑动到height: 0; ，然后突然跳到正确的高度。 我还能怎么做，而不使用JavaScript？ #child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: height 1s ease; transition: height 1s ease; } #parent0:hover #child0 { height: auto; } #child40 { height: 40px; overflow: hidden; […]

CSS三angular形如何工作？

在CSS技巧中有很多不同的CSS形状- CSS的形状，我特别困惑于一个三angular形： #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> 如何和为什么它的工作？