CSS布局

一、布局的注意事项

1.内容与显示分离

2.布局方法

  <1>�固定(fixed)布局---顾名思义,无论是使用移动电话和平板电脑等较小的设备查看页面,还是使用桌面浏览器并对窗口进行缩小,它的宽度都不会改变。

  <2>响应式页面也称为流式(fluid或liquid)页面---使用百分数定义宽度,3允许页面随显示环境的改变进行放大或缩小。除了具有流动栏,响应式页面还可以根据屏幕尺寸以特定方式调整其设计。

二、构建页面

(1)恰当地使用article、aside、nav、section、header、footer和div等 元 素 将 页面划分成不同的逻辑区块。

(2)按照一定的顺序放置内容,确保页面在不使用CSS的情况下也是合理的

(3)以一致的方式使用标题元素(h1~h6),从而明确地标识页面上这些区块的信息,并对它们按优先级排序。

(4)使用合适的语义标记剩余的内容,如段落、图和列表。

(5)如果有必要,使用注释来标识页面上不同的区域及其内容。

三、针对全部浏览器为HTML5新元素添加样式

有两种方式可以实现在Internet Explorer 9之前的IE中为新的HTML5元素设置样式。（208）

四、对默认样式进行重置或标准化

每个浏览器都有内置的默认样式表。HTML会遵照该样式表显示,除非你自己编写的CSS覆盖了它们。整体上,不同浏览器提供的默认样式表是相似的,但也存在一定的差异。为此,开发人员在应用他们自己的CSS之前,常常需要抹平这些差异。抹平差异的方法主要有两种(只使用其中一种即可)。

    <1>、使用CSS重置(reset)开始主样式表,如Eric Meyer创建的Meyer重置(http://meyerweb.com/eric/tools/css/reset/)。另外还有其他的一些重置样式表。

    <2>使用Nicolas Gallagher和Jonathan Neal创建的normalize.css开始主样式表。该样式表位于http://necolas.github.com/normalize.css/(最新版本使用Download按钮)。

五、盒模型

        CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型,这里的盒子由内容区域、内容区域周围的空间(内边距,padding)、内边距的外边缘(边框,border)和边框外面将元素与相邻元素隔开的不可见区域(外距,margin)构成。这类似于挂在墙上的带框架的画,其中图画是内容,衬边是内边距,框架是边框,而该画框与相邻画框之间的距离则是外边距。

浏览器中元素的宽度与其width属性值并不一致(除非它没有内边距和边框)。CSS中的宽度指示的是内边距里内容区域的宽度,而元素在浏览器中的显示宽度则是内容宽度、左右内边距和左右边框的总和。显示高度与之类似,只不过计算的是上下内边距和边框值。（如果设置了box-sizing: border-box;,则宽度和高度就包含了除外边距以外的所有要素。）

六、控制元素的显示类型和可见性

    块级元素被设置为      display: block

    对于li元素为       display: list-item

    行内元素被设置为      display: inline

    隐藏元素,并将其从文档流中完全移除        display : none 

    还有一种混合显示方式称为    inline-block,让元素与其他内容出现在同一行,同时具有块级元素的属性

七、控制元素可见性

           visibility属性的主要目的是控制元素是否可见。与display属性不同的是,使用visibility隐藏元素时,元素及其内容应该出现的位置会留下一片空白区域隐藏元素的空白区域仍然会在文档流中占据位置

em {

    visibility: hidden;

}

在元素周围添加内边距

padding的简记法

同border和margin属 性 一 样,padding也可以使用简记法,从而不必使用padding-top、padding-right等属性为每个边都单独设定内边距。

   �padding: 5px;——使用一个值,这个值就会应用于全部四个边。

   �padding: 5px 9px;——使用两个值,则前一个值会应用于上下两边,后一个值会应用于左右两边。

   padding: 5px 9px 11px;——使用三个值,则第一个值会应用于上边,第二个值会应用于左右两边,第三个值会应用于下边

   padding: 5px 9px 11px 0;——使用四个值,它们会按照时钟顺序,依次应用于上、右、下、左四个边

9、设置边框

    1.定义边框风格---输入border-style: type,其中的type可以是none、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(槽线)、ridge(脊线)、inset(凹边)或outset(凸边)。

    2.设置边框宽度---输入border-width:n,这里的n是需要的宽度(含单位,如4px)。

    3.设置边框颜色输入border-color:color,这里的color是颜色名称、十六进制值或RGB、HSL、RGBA、HSLA颜色。

  4、如果需要,输入-top、-right、-bottom或-left将边框效果限制在某一条边上。

9、设置元素周围的外边距

    如果对margin使用一个值,这个值就会应用于全部四个边。如果使用两个值,那么前一个值会应用于上下两边,后一个值会应用于左右两边。如果使用三个值,那么第一个值会应用于上边,第二个值会应用于左右两边,第三个值会应用于下边。如果使用四个值,那么它们会按照时钟顺序,依次应用于上、右、3下、左四个边。

10、使元素浮动

    可以通过float属性使元素浮动在文本或其他元素上。可以使用这种技术让文本环绕在图像或者其他元素周围,也可以使用这种技术创建多栏布局等（浮动元素完全不影响父元素的高度）

    控制元素浮动位置---clear:left,阻止元素浮动在该元素的左边;---right,阻止元素浮动在该元素的右边;---both,阻止元素浮动在该元素的左右两边;---both,阻止元素浮动在该元素的左右两边;

11、对元素进行相对定位

    每个元素在页面的文档流中都有一个自然位置。相对于这个原始位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。

12、对元素进行绝对定位

    对元素进行绝对定位的步骤

    (1)输入position: absolute;。

    (2)根据需要,输入top、right、bottom或left。 再输入:d,这里的d是希望元素相对于其祖先元素偏移的距离(如10px或2em)或相对于其祖先的百分数

13、处理溢出

决定浏览器如何处理溢出的步骤

(1)输入overflow:。

(2)输入－visible,让元素盒子中的所有内容可见,这是默认项; －或者输入hidden,隐藏元素盒子容纳不了的内容; －或者输入scroll,无论元素是否需要,都在元素上添加滚动条;－或者输入auto,让滚动条仅在访问者访问溢出内容时出现。

14、垂直对齐元素

使元素垂直对齐的步骤  (1)输入vertical-align:。(2)输入baseline,使元素的基准线对齐父元素的基准线--middle,使元素位于父元素中央;sub,使元素成为父元素的下标;--super,使元素成为父元素的上标;--text-top,使元素的顶部对齐父元素的顶部;--text-bottom,使元素的底部对齐父元素的底部;--top,使元素的顶部对齐当前行里最高元素的顶部;--bottom,使元素的底部对齐当前行里最低元素的底部;

15、修改鼠标指针