相关疑难解决方法(0)
用//注释单行CSS是不好的做法？
我最近开始使用//"评论"单行CSS代码.我明白我实际上并没有评论这条线; 我只是打破它(我应该使用/* ... */),但它具有相同的效果.然后该行终止,;并且以下代码正常工作.
我可以删除它,但我常常不想这样,以防万一我想稍后再把它放回去,或者看看我回来的时候一直在使用它.
例:
li{
float:left;
//list-style-type:none;
text-indent:0px;
}
我可以逃脱这个,还是可能会给我带来麻烦？
推荐指数
解决办法
查看次数
订购特定于供应商的CSS声明
我想我现在写了类似下面的内容一千次:
.foo {
border-radius: 10px; /* W3C */
-moz-border-radius: 10px; /* Mozilla */
-webkit-border-radius: 10px; /* Webkit */
}
但是现在才考虑这些的排序是否重要？我知道这之间-moz-*并-webkit-*不要紧,因为这些至多1将被读取,但它是更好的(以适应未来发展而言,等)先做W3C标准或持续多久？
推荐指数
解决办法
查看次数
我应该如何使用CSS在文本和边框之间添加一些空格
我是编程新手,也是HTML的初学者.我正在乱搞一个无序的列表来制作一个导航页面,我遇到了一个我无法解决的问题.单词周围的每个边框都非常封闭,我不知道如何使边框内的区域更大,这意味着我希望边框离这个单词更远.我知道它看起来很糟糕,但我真的只是专注于让它正常工作而不是让它看起来很好.任何帮助都会很棒,谢谢!
这是我的HTML:
<!doctype=html>
<html>
<head>
<meta charset="utf-8" />
<title> Test Title </title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div class="wrap">
<h1 class="test"> Blah Blah </h1>
<ul>
<li class="navigation"><a class="navitem" href="#"> Blog </a></li>
<li class="navigation"><a class="navitem" href="#"> Facebook </a></li>
<li class="navigation"><a class="navitem" href="#"> Twitter </a></li>
<li class="navigation"><a class="navitem" href="#"> About </a></li>
</ul>
</div>
</body>
</html>
这是我的CSS:
.wrap
{
width: 1000px;
height: 800px;
margin: auto;
background-color: black;
color: white;
font-family: sans-serif;
text-align: center;
}
.navigation
{
display: inline;
list-style: none;
padding-right: 50px; …推荐指数
解决办法
查看次数
Flexbox + calc() - flexbox中可能出现的错误？
目标
我正在开发一个基于flexbox + calc()的网格系统,在SASS中有排水沟.
您可以通过mixins定义网格,如下所示:
.box {
@include column('1/3', $gutter: 20px);
}
编译这将是:
.box {
width: calc(99.999999% * 1/3 - 13.33333px);
}
问题(请进一步阅读更新)
我正试图找到摆脱经典.row容器的方法.
在我看来,这应该是非常简单的flexbox + calc()但我有这个奇怪的错误(或我的计算错误？),有时在创建多行时打破布局.
举个例子:
我想要一个在列之间有20px排水沟的网格.
其余的最好在代码中解释,所以这是一支笔:
http://codepen.io/NilsDannemann/pen/OMBVry?editors=1100
为什么最后一个例子(1/8 - 多行)破裂了？
更新#1
好吧,继续发生什么事:问题不是植根于flexbox space-between属性,而是来自Flexbox的一般行为.
Flexbox始终将排水沟视为可用空间.因此,在最后一个示例中,它将它们组合在一起(7*20px = 140px),并得出结论:在第一行上有足够的空间来容纳另一个项目(calc()= 107.5px之后的宽度).
这是整个事情的下降.
space-between然后按预期工作.
更新#2
我认为唯一可以解决的问题是(正如@Siguza指出的那样)增加利润以填补排水沟.然后使用:nth-child选择器将行的最后一个边距设置为0.
在SASS中,这看起来像这样:
.box {
@include column('1/8', $gutter: 20px);
margin-right: 20px;
&:nth-child(8n) {
margin-right: 0;
}
}
现在它成为SASS挑战:
我如何:nth-child从传递的分数中得到(整数)？
经过一番努力,我解决了这个问题.:-)
这是当前SASS版网格的笔:http://codepen.io/NilsDannemann/pen/OMaOvX？edit …
推荐指数
解决办法
查看次数
为什么在使用 grid-auto-flow 时在 CSS Grid 中添加了额外的列？
我正在学习 CSS Grid 并试图重现一些 flex 行为（我知道两者是互补的，这是一个学习练习）。
下面的 flex 示例允许div堆叠未定义数量的s（未定义，因为它们的数量不会影响 CSS 部分）
#flex {
height: 100px;
display: flex;
flex-direction: row;
}
#flex > div {
background-color: blue;
}<div id="flex">
<div>a</div>
<div>b</div>
<div>c</div>
</div>我尝试将其移植到 CSS Grid 实现中：
/* updated with correct comment delimiters, thanks @vals */
#grid {
height: 100px;
display: grid;
grid-auto-flow: column; /* when something has to be added, be it a column */
grid-auto-columns: fit-content; /* when a new column is added, its size will …推荐指数
解决办法
查看次数
双向正斜杠直接IE使用特定的CSS吗？
我在开发网站时发现了一些非常奇怪的东西.在尝试将div元素显示在屏幕顶部时,我注意到除了旧版本的IE之外,我没有在任何浏览器中实现所需的结果.为了测试一些不同的代码,而不是删除错误的行,我使用'//'来评论它(我真的不确定它是否适用于css)但是发生了什么,兼容的浏览器使用了未注释的代码,而IE使用标记为'//'的代码.这是代码:
#ban-menu-div{
position:fixed;top:0;
//position:relative; //<-- IE keeps the banner with rel pos while the other
display:block; // browsers used fixed
margin:auto;
padding:0px;
width:100%;
text-align:center;
background:black;
}
所以基本上,似乎//可以用来指示较新的浏览器忽略特定的代码行,并指示旧版本的IE使用它？如果这是常见的做法,请告诉我.它肯定会使旧版浏览器的开发变得更加容易
推荐指数
解决办法
查看次数