CSS定位和网站建设模板布局

定义元素尺寸:
 

  • 在可以放置在您的网页设计元素,或创建一个布局,你需要定义元素的尺寸。默认情况下,网页有一个宽度为100%,并在该页面中的元素将开始在该大小以及一个更具体的层面,除非是适用于他们。

  • 换句话说,如果你有一个在您的网页上段,它会占用100%的浏览器的宽度,即使只有1个字。框,使该段将100%宽。见CSS盒模型的更多信息机制的 文档。

可能的方面包括:

  • 高度
  • 宽度
  • 最大高度
  • 最大宽度
  • 最小高度
  • 最小宽度

显示和可见性:

  • 一旦你知道你的元素的尺寸,你可以定义他们怎样在页面上显示。CSS显示属性的定义是什么类型的元素 。你可以变成段列表和块级元素内联元素。

  • 能见度属性是一个比较专业。它定义一个元素是否可以在布局或没见过。请注意,与能见度属性是隐藏的元素仍然会占用空间,内容只是不显示在页面上。

定位元素的方法:

来定位元素,首先确定你打算如何使用CSS 的地位与浮动元素浮动属性元素的位置 。

  • 正常流动岗位,因为他们出现在HTML的元素 。
  • 绝对位置放置在页面上的精确位置的元素,与0,0上的浏览器窗口的 左上角
  • 相对位置放置在正常流动的元素,从该位置开始定位
  • 浮动需要元素的正常流动,并促使他们到文档的左边或右边的两侧

绝对定位和相对定位:

使用位置的元素:

position: absolute;

  • 绝对定位的元素上的浏览器窗口的左上角的相对位置。,所以,如果你的位置一个元素的左:10px上下:10px,它会始终显示在那里,无论什么其他文件。

相对定位的元素放置在文档流,然后应用于职位。所以如果你把一个相对定位的项目左:10px上下:10px的,它会显示略低,它通常会显示左侧。

  • top
  • right
  • bottom
  • left

浮动元素:

浮动的元素,当你需要它的正常流动,并把它父元素的右侧或左。一旦一个元素是浮动的,在正常流动的其他元素将绕流的浮动元素像围绕一块岩石流淌的河流。

float: left;

如果你想关闭的浮动,你可以使用clear属性一次明确具体的浮动方向或两个浮筒。

clear: left;

如何使用布局浮动:

  • 浮动布局的技巧,画出你的布局,然后浮动一切 。上定义的所有元素的宽度,即使它的相对宽度(百分比),让你有事情最终会是一个好主意 。

  • 例 如,如果你有一个容器元素是800px宽,如果你飘起了一个200像素(0保证金,填充和边界)元素的左边,你将有600 px建议值得发挥的空间。如果你再浮动一个550px的宽度(0保证金,填充和边界)元素的权利,这两个元素将显示与它们之间50像素的排水沟边侧。

用z-index层堆叠的元素:

  • 当你定位元素,它们可以重叠的其他元素。使用z - index属性,您可以定义哪些元素顶部或以下。每一个元素开始,指数为0的Z -。较高的z - index(100)越有可能将在最前面。较低的Z指数(-100)就越有可能将在底部。
  • z-index: 90;