标签: css3
Twitter Bootstrap 3:如何使用媒体查询？
我正在使用Bootstrap 3来构建响应式布局,我想根据屏幕大小调整一些字体大小.如何使用媒体查询来制作这种逻辑？
推荐指数
解决办法
查看次数
如何水平和垂直居中元素
我试图垂直居中我的标签内容,但是当我添加CSS样式时display:inline-flex,水平文本对齐消失.
如何为每个标签创建文本对齐x和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>推荐指数
解决办法
查看次数
如何重置/删除chrome的输入突出显示/焦点边框？
我已经看到镀铬的边框较厚,:focus但在我的情况下,我也使用了border-radius.反正有没有删除？
推荐指数
解决办法
查看次数
我应该在CSS中使用px或rem值单位吗？
我正在设计一个新网站,我希望它与尽可能多的浏览器和浏览器设置兼容.我正在尝试确定我应该使用哪种测量单位来确定字体和元素的大小,但我无法找到确定的答案.
我的问题是:我应该使用px还是rem在我的CSS中使用？
- 到目前为止,我知道使用
px与在浏览器中调整基本字体大小的用户不兼容. - 我忽视了
ems,因为与rems 相比,它们更难以维持,因为它们是级联的. - 有人说
rems与分辨率无关,因此更为理想.但是其他人说大多数现代浏览器无论如何都会平等地缩放所有元素,因此使用px不是问题.
我问这个是因为对于CSS中最理想的距离测量有很多不同的看法,我不确定哪个是最好的.
推荐指数
解决办法
查看次数
如何选择除最后一个孩子之外的所有元素？
如何使用CSS3选择器选择除最后一个孩子之外的所有孩子？
例如,只获得最后一个孩子div:nth-last-child(1).
推荐指数
解决办法
查看次数
CSS文本溢出:省略号; 不工作？
我不知道为什么这个简单的CSS不起作用......
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
margin: 0 5px 0 5px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}<div class="app">
<a href="">Test Test Test Test Test Test</a>
</div>应该在4号"测试"周围切断
推荐指数
解决办法
查看次数
使用CSS3 calc进行较少积极的编译
我正在使用的Less编译器(OrangeBits和dotless 1.3.0.5)正在积极地进行翻译
body { width: calc(100% - 250px - 1.5em); }
成
body { width: calc(-151.5%); }
这显然是不希望的.我想知道是否有办法向Less编译器发出信号,在编译期间基本上忽略该属性.我搜索了Less文档和两个编译器的文档,但我找不到任何东西.
Less或less编译器是否支持此功能？
如果没有,是否有一个CSS扩展器呢？
推荐指数
解决办法
查看次数
使用css3的SVG投影
是否可以使用css3为svg元素设置投影,例如
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
我看到了一些关于使用滤镜效果创建阴影的评论.有一个单独使用css的例子.下面是一个工作代码,其中正确应用了cusor样式,但没有阴影效果.请帮我用最少的代码获得阴影效果.
svg .shadow {
cursor:crosshair;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
} 推荐指数
解决办法
查看次数
弹性框:将最后一行与网格对齐
我有一个简单的flex-box布局,其容器如下:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
现在我希望最后一行中的项目与另一行对齐.justify-content: space-between;应该使用,因为可以调整网格的宽度和高度.
目前它看起来像
在这里,我希望右下角的项目位于"中间列"中.实现这一目标的最简单方法是什么？这是一个显示此行为的小jsfiddle.
.exposegrid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div> …推荐指数
解决办法
查看次数
Flexbox没有给予元素相同的宽度
尝试最多包含5个项目且少至3个的flexbox导航,但它并未在所有元素之间平均分配宽度.
小提琴
我正在建模的教程是http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
上海社会科学院
* {
font-size: 16px;
}
.tabs {
max-width: 1010px;
width: 100%;
height: 5rem;
border-bottom: solid 1px grey;
margin: 0 0 0 6.5rem;
display: table;
table-layout: fixed;
}
.tabs ul {
margin: 0;
display: flex;
flex-direction: row;
}
.tabs ul li {
flex-grow: 1;
list-style: none;
text-align: center;
font-size: 1.313rem;
background: blue;
color: white;
height: inherit;
left: auto;
vertical-align: top;
text-align: left;
padding: 20px 20px 20px 70px;
border-top-left-radius: 20px;
border: solid 1px blue;
cursor: pointer;
} …推荐指数
解决办法
查看次数