我很难理解字体缩放.

我目前有这个网站的身体font-size100%.但是100%的是什么？这似乎计算在16px.

我的印象是,100%会以某种方式引用浏览器窗口的大小,但显然不是因为它总是16px,无论窗口是否调整为移动宽度或完整的宽屏桌面.

如何使我的网站上的文本与其容器相关？我尝试过使用,em但这也没有扩展.

我的理由是,事情就像我的菜单中就当调整压扁,所以我需要减少PX px的font-size相对其它元素的容器的宽度之中.(例如,在大型桌面上的菜单中,22px可以完美运行.向下移动到平板电脑宽度,16px更合适.)

我知道我可以添加断点,但我真的希望文本可以扩展为具有额外的断点,否则我将最终为每100px宽度减少数百个断点来控制文本.

我正在努力清理锚点的工作方式.我有一个固定在页面的顶部的头,所以当你在页面的其他地方链接到一个锚,页面跳转所以其锚固在页面的顶部,留下固定头后面的内容(我希望那讲得通).我需要一种方法来将锚点从头部的高度偏移25px.我更喜欢HTML或CSS,但Javascript也可以接受.

我需要在窗口的中心放置一个div(with position:absolute;)元素.但我这样做有问题,因为宽度未知.

我试过这个.但需要根据宽度的响应进行调整.

.center {
  left: 50%;
  bottom:5px;
}

有任何想法吗？

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

我希望能够滚动整个页面,但不显示滚动条.

在谷歌浏览器中它是:

::-webkit-scrollbar {
    display: none;
}

但是Mozilla Firefox和Internet Explorer似乎并没有那样工作.

我也在CSS中尝试过这个:

overflow: hidden;

这确实隐藏了滚动条,但我不能滚动了.

有什么办法可以删除滚动条,同时还能滚动整个页面吗？请使用CSS或HTML.

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

尽管像<div>s 这样的元素通常会增长以适应其内容,但使用该float属性可能会给 CSS新手带来惊人的问题:如果浮动元素具有非浮动父元素,则父元素将崩溃.

例如:

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

此示例中的父div 不会展开以包含其浮动的子项 - 它似乎具有height: 0.

你怎么解决这个问题？

我想在这里创建一个详尽的解决方案列表.如果您了解跨浏览器兼容性问题,请指出它们.

解决方案1

浮动父母.

<div style="float: left;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

优点:语义代码.
缺点:您可能并不总是希望父级浮动.即使你这样做,你是否漂浮了父母的父母,等等？你必须浮动每个祖先元素吗？

解决方案2

给父母一个明确的高度.

<div style="height: 300px;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>

优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小,布局将中断.

解决方案3

在父元素中添加"spacer"元素,如下所示:

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
  <div …

我有一个简单的页面,有一些iframe部分(显示RSS链接).如何将主页面中的相同CSS格式应用于iframe中显示的页面？

最近我查看了一些网站的代码,发现每个人<div> 都有一个班级clearfix.

经过快速谷歌搜索,我了解到它有时适用于IE6,但实际上是什么是一个clearfix？

与没有clearfix的布局相比,您能提供一些带有clearfix的布局示例吗？

你如何使用CSS content属性添加html实体？

使用这样的东西只是打印 到屏幕而不是不间断的空间:

.breadcrumbs a:before {
    content: ' ';
}