css 中的若干心得

css布局中定位机制主要是普通的流，也就是说按照HTML文本的顺序在窗口上从上到下、从左到右去显示，遇见块级元素就换行显示。为了更进一步的控制，我可以使用相对定位、绝对定位、固定定位以及浮动。

相对定位（position:relative）是相对于自身而言的，但会在原来的地方留出空白，所以不会影响后序的流；可能出现这个元素覆盖到其他元素上的情况发生。百分数表示的宽度相对于父元素的宽度而言的。

绝对定位(position:absolute)会让该元素从流中去掉，其他元素不会再看见它，可以产生覆盖的效果；其定位是相对于离它最近的的非普通流的父元素（position非static）的左上角，否则一直到原始的盒子可能是body。其百分数表示的宽度是源自于其定位元素的宽度的。通常在父元素中使用position:relative;子元素中使用position:absolute;

固定定位(position:fixed):这种定位是相对于浏览器窗口的，百分数表示的宽度也是相对于浏览器窗口的。该元素会从普通流中移除。

这几种都可以设置z-index来改变各部分的相对屏幕位置。而且都可以在块级元素和内联元素上使用。

float：在元素的父元素盒子里尽量向左或是右浮动，文本可以在周围浮动。而且，最好给一些元素加上宽度，否则会出现元素铺满整个盒子的情况发生。

当一个包含元素内只直接包含有一个浮动元素，那么包含元素会被认为高度为0，可以使用overflow：auto;width:100%来改变这种状况。

我们可以设置任何元素的margin，但是要使用margin:0px auto.使某个元素居中则要将这个元素设为块级元素。

关于隐藏：

可以有diplay:none,这样会从流中去掉，可以将一个盒子的visibility:hidden.这样就不会显示盒子了，但盒子会继续占有那个位置，这个和empty-cells：hide的效果是一样的。<input type="hidden">可以隐藏这个控件。

背景关系：从下自上依次是：box-shadow(outer)、background-color、background-image、box-shadow（inset）、border。

一个网站必须要明确主要受众人群，网站主要功能；建立清晰易用的网站。其次，视觉层次很重要，浏览者未必想去翻看网页，他们需要快速找到内容。高视觉对比度就会更易突出线索。其次将相关内容组织起来更加让浏览者明白相应逻辑。其次，应当保持风格的协调、连贯性。借助相似的风格来建立一种默认的印象。

导航要做到：清晰、简洁、精选、连贯、交互好、告知位置。

css已经拥有了80多项规范，这让其变得复杂，即使是w3c工作组css起草专家也难以说精通各方面；css已经形成了自己的开发者圈子、专业的技术会议、框架、工具链。原本看似简单的属性组合在一起之后变得极为复杂。索性的是各大浏览器如今都按照标准来（标准不只是强制的），这样得以按以下原则来设计代码：DRY、可维护、灵活、轻量级。

巴特西

css 中的若干心得

最新文章

热门文章