CSS定位与div布局排版

一、<div>标记
<div>简单而言是一个区块容器标记,即<div>与</div>之间相当于一个容器,可以容纳段落、标题、表格、图片、乃至章节、摘要和备注等各种XHTML元素。因些,可以把<div>与</div>中的内容视为一个独立的对象,用于CSS的控制。声明时只需要对<div>进行相应的控制,其中的各种标记元素都会因些而改变
<div>标记与<span>标记
<div>与<span>的区别在于,<div>是一个块级元素,它包围的元素会自动换行。而<span>仅仅是一个行内元素,在它的前后不会换行。<span>有没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,就可以使用<span>元素。
此外,<span>标记可以包含于<div>标记之中,成为它的子元素,而反过来则不成立,即<span>标记不能包含<div>标记
通常情况下,对于页面中大的区块使用<div>标记,而<span>标记仅仅用于需要单独设置样式风格的小元素,例如一个单词、一幅图片和一个超链接等。
二、元素的定位:float
float定位是CSS排版中非常重要的手段,在前面章节中已经有所提及。
属性float的值很简单,可以设置为left、right、或者默认值none。当设置了元素向左或者向右浮动时,元素会向其父元素的左侧或右侧靠紧。
清除float的影响
clear:left    清除float对左侧的影响
clear:right  清除float对右侧的影响
clear:both   清除float对两侧的影响
在进行整个网页排版时,最下端的“脚注”部分通常就需要设置clear属性,从而消除正文部分各种排版方法对它的影响
三、元素的定位:position定位
position定位与float一样,也是CSS排版中非常重要的概念。position从字面意思上看就是指定块的位置,即块相对于其父块的位置和相对于它自身应该在的位置。
position属性一共有4个值,分别为static、absolute、relative、fixed(IE不支持)。其中static为默认值,它表示块保持在原本应该在的位置上,即该值没有任何移动的效果。
absolute 绝对定位
Position:absolute;        绝对定位
Left:20px;        块的左边框离页面左边界20px
Top:40px;        块的上边框离页面上边界40px
当子块的position属性值设置为absolute时,子块已不再从属于父块,其左边框相对于页面<body>左边的距离为20px,这个距离已经不是相对父块的左边框的距离了。子块的上边框相对页面<body>上边的距离为40px,这个距离也不是相对于父块的上边的距离了。
top  right   bottom   left这四个CSS属性,它们都是配合position属性使用的,表示的是块的各个边界离页面边框(当position设置为absolute时)的距离,或各个边界离原来位置(position设置为relative)的距离。只有当position属性设置为absolute或者relative时才能生效,如果将上例中的position设置为static,
top  right   bottom   left这四个CSS属性不但可以设置为绝对的像素,还可以设置为百分数。则子块不会有任何变化。
一般在设计时只设置left和right这两个属性中的一个,以及top和bottom这两个属性中的一个,而对于块的高度和宽度还是分别通过height和width属性来设置。
CSS默认后加入到页面中的元素会覆盖之前的元素,在而中一层层往上写
relative相对定位
当将position设置为relative时,块的位置是相对于它原来的位置进行调整的,而不是父块
元素定位:Z-index空间位置
Z-index属性用于调整定位时重叠块的上下位置,与它的名称一样,想像页面为x-y轴,垂直于页面的方向为z轴,z-index值大的页面位于其值小的上方。
Z-index属性的值为整数,可以是正数也可以是负数。当块被置了position属性时,该值便可设置各块之间的重叠高低关系。默认的z-index值为0,当两个块的z-index值一样时,将保持原有的高低覆盖关系。
 
 

你可能感兴趣的:(css,职场,div,休闲)