CSS学习8

最新推荐文章于 2022-11-05 20:34:03 发布

aneyal

最新推荐文章于 2022-11-05 20:34:03 发布

阅读量1.1k

点赞数 2

分类专栏：前端学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/aneyal/article/details/123523896

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

本文介绍了网页布局的基本概念，如版心和常见布局流程，包括一列固定宽度居中、两列左窄右宽及通栏平均分布的布局示例。同时，详细探讨了浮动元素对页面布局的影响以及清除浮动的几种方法，如额外标签法、父级添加overflow属性和使用伪元素。这些技术对于前端开发者理解和创建响应式网页至关重要。

摘要由CSDN通过智能技术生成

版心和布局流程

版心

“版心”是指网页中主体内容所在区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980排序、1000px、1200px等

布局流程

为了提高网页的制作效率，布局时通常需要遵守一定的布局流程：

1 确定页面的版心（可视区）

2 分析页面中的行模块，以及每个行模块的列模块

3 制作HTML结构

4 CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

一列固定宽度且居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一列固定宽度且居中</title>
		<style>
			*{
				/* 初始化，清除内外边距 */
				margin: 0;
				padding: 0;
			}
			.top, .banner, .main, .footer{
				width: 960px;
				/* 文字居中对齐 */
				text-align: center;
				/* 盒子居中对齐 */
				margin: 0 auto;
			}
			.top{
				height: 80px;
				background-color: red;
				}
			.banner{
				height: 100px;
				background-color: orange;
				}
			.main{
				height: 150px;
				background-color: yellow;
				}
			.footer{
				height: 40px;
				background-color: green;
				}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="main">main</div>
		<div class="footer">footer</div>
	</body>
</html>

效果：

两列左窄右宽型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两列左窄右宽型 </title>
		<style>
			*{
				/* 初始化，清除内外边距 */
				margin: 0;
				padding: 0;
			}
			.top, .banner, .main, .footer{
				width: 960px;
				/* 文字居中对齐 */
				text-align: center;
				/* 盒子居中对齐 */
				margin: 0 auto;
				margin-bottom: 10px;
				border: 1px dashed gray;
			}
			.top{
				height: 80px;
				background-color: red;
				}
			.banner{
				height: 70px;
				background-color: orange;
				}
			.left{
				/* 设定浮动 */
				float: left;
				background-color: #00FFFF;
				height:250px ;
				width: 300px;
				margin-right: 10px;
			}
			.right{
				/* 设定浮动 */
				float: right;
				background-color:#87CEEB;
				height:250px ;
				width: 650px;
			}
			.main{
				height: 250px;
				}
			.footer{
				height: 40px;
				background-color: green;
				}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="main">
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>

效果：

通栏平均分布型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通栏平均分布型</title>
		<style>
			*{
				/* 初始化，清除内外边距 */
				margin: 0;
				padding: 0;
			}
			.banner, .main, .top, .footer{
				/* 文字居中对齐 */
				text-align: center;
				/* 盒子居中对齐 */
				margin: 0 auto;
				margin-bottom: 10px;
				border: 1px dashed gray;	
			}
			.banner, .main{
				width: 960px;
			}
			.top{
				height: 80px;
				background-color: red;
				}
			.banner{
				height: 100px;
				background-color: orange;
				}
			.main{
				height: 150px;
				border: none;
				}
			.footer{
				height: 40px;
				background-color: green;
				}
				/* 设定main块中八个小块统一的属性 */
			.main div{
				background-color: #00FFFF;
				width:232px;
				float: left;
				border: 1px dashed gray;
			}
			/* 第一行四个模块统一的属性 */
			.r1{
				height: 50px;
				margin-bottom: 10px;
			}
			/* 第二行四个模块统一的属性 */
			.r2{
				height: 90px;
			}
			/* 每行左边三个模块的右外间距 */
			.d1{
				margin-right: 8px;
			}
		</style>
	</head>
	<body>
		<div class="top">top</div>
		<div class="banner">banner</div>
		<div class="main">
			<div class="d1 r1">1</div>
			<div class="d1 r1">2</div>
			<div class="d1 r1">3</div>
			<div class="r1">4</div>
			<div class="d1 r2">5</div>
			<div class="d1 r2">6</div>
			<div class="d1 r2">7</div>
			<div class='r2'>8</div>
			
		</div>
		<div class="footer">footer</div>
	</body>
</html>

效果：

清除浮动

因为浮动不再占用原文档流的位置，所以它会对后面的元素排版产生影响。为了解决这些问题，此时就需要在该元素中清除浮动。准确来说，是清除浮动后造成的影响。

清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题

清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他的元素。在CSS中，clear属性用来清除浮动：left（清除左侧浮动的影响）、right（清除右侧浮动的影响）、both（同时清除左右两侧浮动的影响）

额外标签法

是W3C推荐的方法。通过在浮动元素的末尾加一个空的标签，例如<dir style="clear:both"></div>

其优点是通俗易懂，书写方便

缺点是会添加很多无意义的标签，结构化较差

父级添加overflow属性方法

通过触发BFC的方式来清除浮动

在父级元素中添加属性overflow:hidden(或auto或scroll）

优点：代码简洁

缺点：内容增多时容易造成不会自动换行，导致内容被隐藏，无法显示需要溢出的元素

使用after伪元素

:after伪元素是空元素的升级版，其好处是不用单独加标签了

添加代码：

.clearfix:after{/*类名为父级元素的类名*/
    content:".";/*内容为小点，尽量加，不要空，不然旧版本浏览器容易有空隙*/
    display:block;/*转换为块级元素*/
    height:0;
    visibility:hidden;/*隐藏盒子*/
    clear:both;/*清除浮动*/
}
.clearfix{
    *zoom:1;/* *代表ie6.7能识别 的特殊符号，带有它，只有ie6.7才执行，zoom是ie6.7清除浮动的方法*/
}

双伪元素清除浮动

.clearfix:after，.clearfix:before{/*类名为父级元素的类名*/
    content:"";
    display:table;/*触发BFC，防止外边距溢出*/
 
}
.clearfix:after{
    clear:both;
 
}
.clearfix{
    *zoom:1;/* *代表ie6.7能识别 的特殊符号，带有它，只有ie6.7才执行，zoom是ie6.7清除浮动的方法*/
}