Web基础之CSS盒模型和CSS布局

时间：2022-11-11 10:43:27
Web基础之CSS盒模型和CSS布局

一、CSS盒模型：

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容(content)、填充(padding)、边框(border)、边界(margin)；

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。


盒模型示意图：
Web基础之CSS盒模型和CSS布局

理解盒模型对我们今后网页布局提供了基础；因为一个网页的布局牵扯到很多元素的排列，怎样排列才能让整个页面美观；而且，我们常用DIV去包裹一些元素，这就是我们常说的DIV+CSS；接下来的CSS实战案列就会见识到DIV+CSS的厉害之处；我们写网页的时候一定要记得这个盒模型；例子见后面；盒模型对理解今后的网页布局真的非常重要；

二、CSS布局：

CSS布局主要用到布局相关的属性，主要属性有position（定位属性）、display（显示属性）、float（浮动属性）、clear（清除属性）、overflow（溢出属性）


1.CSS定位（position）详解

1.1 Static定位

HTML元素定位属性的默认值，即没有定位，元素出现在正常的流中。注意：静态定位的元素不会受到top, bottom, left, right影响。

1.2 Fixed(固定)定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

注意： 

Fixed 定位在 IE7 和IE8下需要描述!DOCTYPE才能支持。

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素可能会和其他元素重叠。

1.3 Relative（相对）定位

相对定位元素的定位是相对其正常位置（如果是流式布局这个元素应该在什么位置）。

窗口滚动会移动。

注意：

使用相对定位移动的元素，它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

1.4 Absolute（绝对） 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

注意：

Absolute定位使元素的位置与文档流无关，因此不占据空间。

Absolute定位的元素可能会和其他元素重叠。

子绝父相

1.5重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。一个元素可以有正数或负数的堆叠顺序。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后在HTML代码中定位的元素将被显示在最前面。

Web基础之CSS盒模型和CSS布局

2.CSS浮动（float）详解

CSS 的 float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

2.1元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。

浮动元素之前的元素将不会受到影响，浮动元素之后的元素将围绕它。

如果图像是右浮动，下面的文本流将环绕在它左边。

2.2彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

2.3清除浮动- 使用clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear属性。

clear 属性指定元素两侧不能出现浮动元素。
3.CSS显示（display和visibility）详解

3.1隐藏元素

display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

3.1.1 visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

3.1.2 display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

3.2 CSS Display -块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

· <h1>

· <p>

· <div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

· <span>

· <a>

 

3.3如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

3.3.1 把块元素显示为内联元素:{display:inline;}

3.3.2 把内联元素显示为块元素：{display:block;}


3.CSS溢出处理（overflow）详解
hidden 隐藏超出层大小的内容
scroll无论内容是否超出层大小都添加滚动条
auto 超出时自动添加滚动条


三、案例源代码以及演示效果

span盒模型 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒模型</title>
		<style type="text/css">
			span{
				border-style: solid;
				border-width: 10px;
				border-color: green;
				padding:0px;
				margin-top:100px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<span>内容</span>
	</body>
</html>


Web基础之CSS盒模型和CSS布局


DIV盒模型 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DIV盒模型</title>
		<style type="text/css">
			#div{
				width: 500px;
				height: 500px;
				background-color:black;
				margin: 0px auto;
			}
			#div1{
				width: 200px;
				height: 200px;
				background-color: yellow;
				border-style: solid;
				border-width: 10px;
				border-color: deepskyblue;
				padding: 5px;
				margin: 10px;
				float: left;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: red;
				border-style: solid;
				border-width: 10px;
				border-color:slateblue;
				padding:5px;
				margin: 10px;
				float: left;
			}
			#div3{
				width: 200px;
				height: 200px;
				background-color:deeppink;
				border-style: solid;
				border-width: 10px;
				border-color: chartreuse;
				padding: 5px;
				margin: 10px;
				float: left;
			}
			#div4{
				width: 200px;
				height: 200px;
				background-color: darkgreen;
				border-style: solid;
				border-width: 10px;
				border-color:gold;
				padding:5px;
				margin: 10px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<div id="div1">
				这是第一个div
			</div>
			<div id="div2">
				这是第二个div
			</div>
			<div id="div3">
				这是第三个div
			</div>
			<div id="div4">
				这是第四个div
			</div>
		</div>
	</body>
</html>

Web基础之CSS盒模型和CSS布局


固定定位演示： 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>布局</title>
		<style type="text/css">
			h4{
				position: absolute;
				top:40px;
				left:50px;
			}
		</style>
	</head>
	<body>
		<p>这是一些文本</p>
		<p>这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p>
		<h4>Fixed布局</h4>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		
	</body>
</html>


Web基础之CSS盒模型和CSS布局


相对定位和绝对定位演示（主要是否随DIV块屏幕滚动） 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DIV-Fixed布局</title>
		<style type="text/css">
			.div1{
				width: 200px;
				height: 400px;
				background-color:royalblue;
				border: solid;
				border-width: 10px;
				border-color: yellow;
				position: fixed;
				top:50px;
				left: 500px;
			}
			.div2{
				width: 200px;
				height: 400px;
				background-color: green;
				border: solid;
				border-width: 10px;
				border-color: yellow;
				position: absolute;
				top:100px;
				left: 200px;
			}
			.div3{
				width: 200px;
				height: 400px;
				background-color: deeppink;
				border: solid;
				border-width: 10px;
				border-color: yellow;
				position: relative;
				top:200px;
				left: 800px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			这是第一个DIV-Fixed
		</div>
		<div class="div2">
			这是第二个DIV-Absolute
		</div>
		<div class="div3">
			这是第三个DIV-Relative
		</div>
		<div style="background-color: red; width: 300px;height: 500px;" >
			这是第四个DIV-static
		</div>
	</body>
</html>
Web基础之CSS盒模型和CSS布局

显示演示（修改成display比较两者的差别） 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示效果</title>
		<style type="text/css">
			/*img{
				visibility: hidden;
			}*/
		</style>
	</head>
	<body>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
		<img src="img/timg.jpg"/>
		<p>这是一些文本</p>
		<p>这是一些文本</p>
	</body>
</html>


四、总结

盒子模型和定位对今后的网页布局是非常重要的，上面也只是提供一些小小的案例参考；光记住是不行的，一定要集合实际的案例加强理解；一定要自己敲代码，并查看演示效果，这样才能彻底明白；盒子模型理解好，并用span和div查看就差不多了；关于定位，我们是理解了很久；下面再给出定位的总结；希望能加强对定位的理解吧；


定位笔记
首先，我们来讨论一下html*有几种定位方式：静态定位（static），相对定位(relative),绝对定位(absolute,fixed).其中fixed又叫固定定位，它是属于绝对定位的一种，但是又有所不同。下面我就来具体讲解一下。

首先,static定位就是我们html中默认的定位方式，就是元素就是从上到下，从左到右。

相对定位（relative），相对定位。元素设置了相对定位后，元素是相对于他原来的位置发生偏移，但是元素并没有脱离标准文档流，也就是他原来的位置还是存在的，其他元素不能移到他的原来位置（相当于虽然他原来位置没有东西了，但是位置还是占着的，其他元素不可以移到该位置上）。

绝对定位（absolute）。绝对定位比较复杂了，首先我们结合绝对定位和固定定位一起来讲解

首先，相同点。
绝对定位不是相对于自己原来位置的偏移。
两者都会脱离标准文档流，这句话是什么意思？其实估计大家都不是很清楚，也就是说他移动后他原来的位置就空了，后面的元素会自动移动上去，其次，他现在的位置也不再标准文档流当中，也就是说他现在的相当于浮动在标准文档流之上。


不同点：
首先分两种情况来讨论
一，设置了偏移量
 举一个例子： postition:absolute ;left:23px;top:12px;或者postition:fixed ;left:23px;top:12px;这样的话设置absolute方式的是相对于距离他最近的祖先元素，且该祖先元素也设置了定位方式。来偏移的。而fixed则是相对于body元素的位子来偏移的。
第二种情况：设置了定位，但是没有设置偏移量时，两者都是相对于父类来说的，他们都会移动到父类的左上角。

第二个不同点：
设置了fixed的定位方式的元素是不会随着滚动条的滚动而发生位置的变化的，而设置abslute的定位方式的会发生未知的变化。
标签：

相关文章