CSS:层叠样式表（三）【DIV网页布局和定位】

最新推荐文章于 2022-06-06 15:54:37 发布

原创最新推荐文章于 2022-06-06 15:54:37 发布 · 973 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

笔记同时被 2 个专栏收录

7 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文深入探讨了使用CSS进行网页布局，包括流式布局、浮动定位、绝对定位和相对定位，强调了浮动属性、清除属性及溢出属性在布局中的关键作用。同时，还介绍了元素的定位、偏移量以及层叠属性，如z-index在解决元素堆叠问题上的应用。

DIV网页布局和定位

一、DIV+CSS进行网页布局
二、元素的定位：
三、偏移量：
四、层叠属性：

一、DIV+CSS进行网页布局

1、网页布局的目的：

页面结构清晰、有条理、易读

2、如何布局：

   (1)确定"版心"：页面主体内容所在的位置。(通常在页面中水平居中)
   
   (2)分析页面中的模块：头部(header)、导航(nav)、焦点图(banner)、主体内容(content)、页面底部(footer)
   
   (3)控制页面中的模块：通过盒子模型，使用DIV+CSS进行模块的控制

3、页面元素的定位机制：

(1)流式布局：

按照元素的类型和在HTML源文件中出现的顺序进行定位

       A、块(block):从上到下依次排列
	   
	   B、水平布局(inline)：在一行中进行水平布局

(2)浮动(float)：

当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，

            但是会缩短行框，产生文字环绕的效果

(3)绝对定位(position:absolute)：

通过页面坐标(页面左上角)的方式来定位元素。使用绝对定位后元素不会占用普通流空间

(4)相对定位(position:relative):

如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，

                然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动
				
   注意：与定位相关的属性有left、top、right、bottom,这四个属性只有在使用了定位属性(position)后

         才有效;只能同时使用相邻的两个属性，不能同时使用相对的两个属性

4、布局中的常用属性：

(1)浮动属性(float)：

	选择器{
		float: 属性值;
	}

属性值	Value
left	左浮动
right	右浮动
none	不浮动(默认值)

例1：DIV+CSS,一列固定宽度并自动居中

	#layout{
		height: 120px;
		width: 1000px;
		background: red;
		margin: auto;
	      }

例2：一列自适应宽度

	 #d2{
			height: 200px;
			background: greenyellow;
			margin: auto;
	    }

例3：两列自适应宽度

#d1{
			height: 350px;
			width: 120px;
			background: red;
			float: left;
		}

#d2{
			height: 350px;
			width: 70%;
			background: blue;
		}

(2)清除属性(clear):

属性值	Value
none	允许元素两边都有浮动元素
left	不允许元素左边有浮动的元素
right	不允许元素右边有浮动的元素
both	不允许两边有浮动的元素

例如：

   <style type="text/css">
	   .leftText{
		   margin: 3px;
		   height: 180px;
		   width: 170px;
		   border: 1px solid #b1d1ce;
		   background-color: #f3f3f3;
		   float: left;
	   }
	   .footText{
		   height: 185px;
		   border: 1px solid red;
	   }
	   .Clear{
		   clear: both;
	   }
	</style>

<body>
			<div class="leftText">区块1</div>
			<div class="leftText">区块2</div>
			<div class="Clear"></div>
			<div class="footText">区块3</div>
		</body>

如果没有Clear这个DIV，"区块3"会紧接"区块2"并列在同一行;加上Clear这个div,就可以消除浮动div的影响，"区块3"的布局就不受影响。

(3)溢出属性(overflow):

当内容溢出元素边框的时候，内容如何处理

属性值	Value
scroll	提供滚动机制(带有滚动条)
visible	默认值，内容溢出到边框以外
hidden	内容被修剪。溢出的部分看不见
auto	如果内容被修剪，则显示器会显示滚动条以便查看其余的内容

使用DIV+CSS进行布局时要注意的问题：

div、ul、ol、p、li都是块，它们和周围的元素都有边界(margin),在块级标签嵌套的时候,要注意处理这些边界.

内嵌框架：

<iframe src="" frameborder="0"></iframe>

二、元素的定位：

  选择器{

    position:属性值;
   
   }

属性值	Value
static	自动定位(默认的定位方式)
relative	相对于元素在文档流中的位置进行定位
absolute	相对于已经定义好的父元素的位置进行定位
fixed	相对于浏览器窗口进行的定位