我想知道你在编写css时有什么意见,何时/为什么编码固定或液体样式表？

我同意固定尺寸样式表更容易/更快地编码,因为液体需要更多时间才能使所有元素很好地适应他们的父母.

那么,你什么时候选择固定液体(反之亦然)？为什么？

更新2我认为现在最好的做法是为任何屏幕尺寸设计一个具有响应和自适应功能的网站. Liquid CSS可能没有您想到的陷阱,例如长行文本(而不是文本块的位置即时调整) – 响应式设计的示例 – 浏览器端代码页面适应任何屏幕尺寸：

> http://surrey.ac.uk/
> http://bostonglobe.com/
> http://thoughtfulweb.co.uk/

自适应设计：托管站点的服务器检测请求页面的浏览器类型并提供适当的页面布局,例如移动.这有一个缺陷,因为用户代理标识符并不总是精确的 – 例如例如,许多浏览器在其id中包含mozilla字符串,因此依赖此数据可能并不总是最好.

以前的答案

液体布局(水平缩小或拉伸以适合窗口水平宽度的布局)

>优点：内容重新格式化,以充分利用
窗口宽度.这意味着选择最多的两难选择
流行的固定宽度不需要940px,960px或978px.这个
对于不同的小屏幕手持设备特别有用
略.考虑所有可能的屏幕,你必须做更少的工作
大小.
>缺点：由于网站缩小或拉伸到的原因
水平放置,你无法像固定一样控制布局
宽度.美观和网站看起来多么好看
控制.你可能会发现我的观点是不得不做更少的工作来支持所有的屏幕宽度毕竟是不正确的 – 因为在这里你正在考虑屏幕非常小的情况,你的菜单导航都是笨拙的,丑陋的或者太远了一个大屏幕

固定布局(固定的布局,不会更改以适应可用的水平宽度).

>优点：一旦你确定了最受欢迎的宽度,例如940px,960px等您不需要在不同的屏幕宽度下测试网站.布局整洁,东西不会四处移动,美观,外观看起来多么美好
>缺点：如果您的固定宽度较大,一些屏幕较小的用户,手持设备可能需要水平滚动才能查看您的网站.除非您也支持这些用户可以使用的移动版本

浏览一下主要网站 – 他们使用的是什么.对我来说似乎固定宽度更受欢迎,包括stackoverflow.com

也就是说,看看这个流体网站：http://derekallard.com/

在这里,开发人员通过使用在窗口中调整的站点宽度相互滑动的图形层来使用流体布局.

更新：没有错误或正确的答案.两者都有优点.从电视,电影和报纸到网络的媒体人可能倾向于支持固定宽度,因为他们熟悉具有该功能的媒体.

在这个 question中,有人遇到布局问题,因为他们在非浮动div中有两个浮动div.我建议将float：left添加到它们的外部div,这样可以解决问题.其他人建议添加溢出：隐藏,这让我惊讶,也起作用.

这似乎根本不像溢出的目的：隐藏.显然溢出：隐藏导致元素以某种方式不同地查看他们的孩子.我真正想要了解的是这有什么区别.直观地说,它应该只使元素小于原本的元素,从不更大,我不明白它为什么会影响布局层次结构.

任何人都可以解释为什么这将是正确/必要的行为,或者这只是一个浏览器怪癖？他们的另一个方面是我失踪的溢出物吗？两种解决方案都比另一种更好吗？

编辑：我发现设置溢出：auto也是如此,所以它似乎不是溢出的重要值,只是它设置了.我还是不明白为什么.

除了可见之外的任何内容的溢出都会创建一个新的块格式化上下文,从而导致浮动被包含.这是标准行为.

Floats,absolutely positioned
elements,inline-blocks,table-cells,
table-captions,and elements with
‘overflow’ other than ‘visible’
(except when that value has been
propagated to the viewport) establish
new block formatting contexts.

In a block formatting context,Boxes
are laid out one after the other,
vertically,beginning at the top of a
containing block. The vertical
distance between two sibling Boxes is
determined by the ‘margin’ properties.
Vertical margins between adjacent
block Boxes in a block formatting
context collapse.

In a block formatting context,each Box’s left outer edge touches the left edge of the containing block (for right-to-left formatting,right edges touch). This is true even in the presence of floats (although a Box’s line Boxes may shrink due to the floats),unless the Box establishes a new block formatting context (in which case the Box itself may become narrower due to the floats).

我一直在尝试使用 scssphp,一个PHP SCSS编译器,特别是它的压缩格式化程序.

这会输出类似的东西(注意额外的空格和闭合的大括号前的分号)

.navbar{margin-bottom  :0px !important;margin-top    :4px;}

所以我想实现这个小修改来削减结果代码的几个部分.

我知道这没什么意义,因为我最多可以节省一些百分比;我正在删除低熵信息,这意味着一旦我gz压缩它,节省的费用就会更少;然后必须保持修改.但它似乎很容易,而且足够无害,而且……有点像lulz那样做了.

4225    public function format($block) {
4226        ob_start();
4227        this->block($block);
4228        $out = ob_get_clean();
4229---     return $out;                        // OLD
4229+++     return $this->postprocess($out);    // NEW
4230    }

后处理函数在父格式化程序上是虚拟的,上面是：

4232    protected function postprocess($text) {
4233        return $text;
4234    }

…在scss_formatter_compressed中我执行一些替换：

+++ from line 4343:

protected function postprocess($text) {
    $xlat = array(
        '#\\s+(:\\d)#'          => '\\1','#;}#'                  => '}','#\\s+(!important)#'    => '\\1',);
    return preg_replace(
        array_keys($xlat),array_values($xlat),$text);
}

现在的输出是：

.navbar{margin-bottom:0px!important;margin-top:2px}

……对于简单的SCSS,它可以工作.我在一个庞大而复杂的SCSS层次结构上测试了它,并且一些元素破坏了.

我感觉它涉及！important条款.我做了一个不太广泛的研究,并在YUI压缩机站点找到了this,一方面他们得出结论

@tml @namanyayg Could you provide any examples where stripping a space
before ‘!important’ leads to a broken styling?

We got the similar request in
07002 but without a test case it’s
not possible to verify if you made a mistake or if there is a very
specific case where the space has to be there.

According to our tests it is OK to get rid of it. What’s more such
code has been used in production for couple years Now without any
issues.

另一方面,OP有一些问题,它们似乎与以前的空间有关！重要.

现在,如果它是CSS标准问题,我想修复我对scssPHP的看法;如果这是一个SCSS的问题,我当然希望修复我的SCSS文件.考虑到相关文件夹的庞大规模和复杂性,我想在深入研究其未经深入的深度之前先问这里.

不需要空间.根据 CSS syntax,

4. While the 07001 is anything other than an 07002,append it to the declaration’s value and 07003.
5. If the last two non-07004s in the declaration’s value are a 07005 with the value “!” followed by an
   07006 with a value that is an 07007
   match for “important”,remove them from the declaration’s value and
   set the declaration’s important flag to true.

我怎么能有这样的布局？

我见过一些不太适合我的解决方案.我见过的例子和评论表明这是不可能的. (图中间缺少溢出自动).

值得一提的是：这是我当前的小提琴(我决定试用一张桌子,hrmmmm).

http://jsfiddle.net/valamas/m8R43/6/

额外：
评论中提到的Printscreen.在添加标题后向下拖动页面时发生.见：http://dabblet.com/gist/3753308

如果您不太关心源订单：
http://dabblet.com/gist/3748868

它使用一些黑客来让页脚在较低的视口高度显示在屏幕上：

body {
    border-bottom: 100px solid; /* height of footer */
    Box-sizing: border-Box;
    }

这里解释了’border-Box’属性：http://www.paulirish.com/2012/box-sizing-border-box-ftw/
基本上,它的作用是,它使元素包含其中的边框和填充.因此,这里给予身体的底部边框将保留在视口内,而不是sans-border-Box.这使得它有点像可以由页脚容纳的负空间.我使用’border’是因为你可能想修补填充物.
至于页脚,它是固定的,所以它相对于视口,而不是你用绝对定位得到的布局.因此它位于身体的底部边界的顶部(其共享其高度值).

中心区块是流动的,因为我给它’overflow：hidden’属性,它清除浮动(http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/).它也可以在没有溢出的情况下工作,但它可能会导致问题.由于您希望能够在列内的内容大于内容高度时滚动,因此我在中心列中添加了一个容器,并将其溢出：auto.