浅谈网页布局

最新推荐文章于 2022-07-26 17:16:51 发布

森-Js

最新推荐文章于 2022-07-26 17:16:51 发布

阅读量334

点赞数 1

分类专栏： Java【洗髓】网页基础文章标签： HTML 布局

本文链接：https://blog.csdn.net/gjs935219/article/details/100078975

版权

Java【洗髓】同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

网页基础

12 篇文章 0 订阅

订阅专栏

注意：相对定位，并不是相对于父元素，而是相对于自己原有的正常位置

七、绝对位置定位

八、固定位置定位

position: fixed常用于悬浮窗口

一、网页布局

<div>，division，划分、层

<div>是网页布局的主要工具，使用div将网页划分为一块一块的的区域

如：

另外：布局相关的属性

width/height

margin/padding

display

position

z-index

.......

<div>网页布局最常用的标签

二、padding和margin

padding : 填充-子元素与自己的距离

margin : 边距-自己与外部元素的距离

三、box模型

.test1
{
	border: 4px solid blue;
	margin: 8px;
	padding: 16px;
	width: 200px;
	height: 50px;
}

注：

box-sizing : border-box (content+padding+border)

box-sizing : content-box

演示：

.test1
{
	border: 4px solid blue;
	margin: 8px;
	padding: 16px;
	width: 200px;
	height: 50px;
	box-sizing: content-box;
}

另外还需注意浏览器的兼容性

.test1
{
	border: 4px solid blue;
	margin: 8px;
	padding: 16px;
	width: 200px;
	height: 50px;
	
	box-sizing: border-box;  /*标准属性Chrome，IE*/
	-moz-box-sizing: border-box; /*FireFox*/
	-webkit-box-sizing: border-box; /*Safari*/
}

注意：

不同标签的默认box-sizing是不同的

例如：

<button>默认为box-sizing: border-box

<div>默认为box-sizing: content-box

四、行内元素与块元素

比如 <label>不能设置长宽； <div>默认占满一行

设置他们需要display属性

display，用于控制是行内元素、还是块元素

演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Box模型</title>
		<style></style>
	</head>
	<body>
		<label style="border: 1px solid blue; width: 200px;">Java</label>
		<label style="border: 1px solid blue; width: 200px;">C++</label>
		
		<div style="border: 1px solid blue; width: 200px;">久森你好</div>
		<div style="border: 1px solid blue; width: 200px; ">Jiusennihao.cn</div>
	</body>
</html>

效果：

常见的四种设置：

display: inline	行内元素，不可以设置宽度和高度，根据字体长短默认
display: block	块元素，独占一行
display: inline-block	行内块元素，可以设置大小，而且不占一行
display: none	不占用任何空间（隐藏）

效果：

【1】display: inline：

【2】display: block

【3】display: inline-block

【4】display: none

最终代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Box模型</title>
		<style></style>
	</head>
	<body>
		<label style="border: 1px solid blue; width: 200px; display: inline-block;">Java</label>
		<label style="border: 1px solid blue; width: 200px;display:  none;">C++</label>
		
		<div style="border: 1px solid blue; width: 200px;display: block;">久森你好</div>
		<div style="border: 1px solid blue; width: 200px; display:  inline;">Jiusennihao.cn</div>
	</body>
</html>

五、行内元素的对齐

效果：

实现居中+垂直布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页布局基础</title>
		<style>
			.container
			{
				width: 600px;
				height: 300px;
				border: 1px solid blue;
				text-align:  center;
				line-height: 300px;  /*注意设置line-height为行高*/
			}
		</style>
	</head>
	<body>
		
		<div class="container">
			<button style="vertical-align: top;">按钮一</button>
			<button style="vertical-align: middle;">按钮二</button>
			<button style="vertical-align: bottom;">按钮三</button>
		</div>
	</body>
</html>

六、相对位置定位

position属性是实现复杂布局的有效手段

注意：相对定位，并不是相对于父元素，而是相对于自己原有的正常位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页布局基础</title>
		<style>
			.main
			{
				width: 640px;
				height: 400px;
				border: 1px solid mediumblue;
				margin: 100px;
			}
			
			.div1
			{
				width: 100px;
				height: 100px;
				background-color: #B22222AA;  /*半透明颜色*/
			}
			
			.div2
			{
				width: 100px;
				height: 100px;
				background-color: #ADFF2Faa;  /*半透明颜色*/
				
				position: relative;
				left: 50px;
				top: 50px;
			}
			
			.div3
			{
				width: 200px;
				height: 200px;
				background-color: #BA55D3AA;  /*半透明颜色*/
			}
		</style>
	</head>
	<body>
		
		<div class="main">
			<div class="div1">1</div>
			<div class="div2">1</div>
			<div class="div3">1</div>
		</div>
	</body>
</html>

七、绝对位置定位

图：

position: absolute

-要说明相对于谁...向上找父级或父级的父级、第一个有position: absolute/relative属性的...

-通常都给父元素添加relative属性

-脱离Normal Flow，原有位置被后来者挤占

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页布局基础</title>
		<style>
			.main
			{
				width: 640px;
				height: 400px;
				border: 1px solid mediumblue;
				margin: 100px;
				
				position: relative;
			}
			
			.div1
			{
				width: 100px;
				height: 100px;
				background-color: #B22222AA;  /*半透明颜色*/
			}
			
			.div2
			{
				width: 100px;
				height: 400px;
				background-color: #ADFF2Faa;  /*半透明颜色*/
				
				position: absolute;
				left: 50px;
				top: 50px;
			}
			
			.div3
			{
				width: 200px;
				height: 200px;
				background-color: #BA55D3AA;  /*半透明颜色*/
			}
			
			.div4
			{
				width: 100px;
				height: 100px;
				background-color: #0000CDAA;  /*半透明颜色*/
				
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		
		<div class="main">
			<div class="div1">1</div>
			<div class="div2">2</div>
			<div class="div3">3</div>
			<div class="div4">4</div>
		</div>
	</body>
</html>

八、固定位置定位

固定：position: fixed：

相对于浏览器窗口

比如：

浏览网页时的广告或者回到顶部等操作

通常与z-index联用，防止被其他div覆盖

position: fixed常用于悬浮窗口

森-Js

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈网页布局

目录一、网页布局二、padding和margin三、box模型四、行内元素与块元素五、行内元素的对齐六、相对位置定位注意：相对定位，并不是相对于父元素，而是相对于自己原有的正常位置七、绝对位置定位八、固定位置定位position: fixed常用于悬浮窗口一、网页布局<div>，division，划分、层<div>是网页布...
复制链接

扫一扫