Python学习笔记：5.1.3 网页布局

最新推荐文章于 2023-09-13 20:45:00 发布

WinvenChang

最新推荐文章于 2023-09-13 20:45:00 发布

阅读量417

点赞数

分类专栏： Python全栈工程师学习笔记文章标签： html css 弹性布局盒子模型

本文链接：https://blog.csdn.net/u014257214/article/details/103835733

版权

本文是关于Python全栈工程师Web开发前端基础的笔记，主要涵盖HTML的div和span、float属性、margin和padding、position定位、弹性布局等核心概念。详细解释了这些属性和布局方式在网页设计中的应用。

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

本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记，欢迎学习交流。同时感谢陆老师的精彩传授！

一、课程目标

无语义性div与span标签与语义性结构化标签
float属性
margin与padding属性
position属性
弹性布局

二、详情解读

01.div与span

1.div与span两个标签没有实质的意义，仅用于布局
2.div属于块标签，可以包含其他块标签或者行标签
3.span属于行标签，可以包含其他行标签

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div与span</title>
		<style type="text/css">
			.container {
    
				width: 200px;
				height: 200px;
				border: 1px solid #f00;
				display: inline-block;
			}
			span {
    
				width: 200px;
				height: 200px;
				border: 1px solid #f00;
				// 因为span标签是行标签，如果不设置display:block,则上面的width和height属性无效
				display: block;  
			}
		</style>
	</head>
	<body>
		<div class="container">
			块级标签
		</div>
		<div class="container">
			divbox
		</div>
		<span>
			行级标签，当设置样式display:block时，变为块级标签
		</span>
		<span>
			span
		</span>
	</body>
</html>

运行结果：
在这里插入图片描述

02.float属性：

1.float可以控制元素的浮动位置
2.通过float可以打破原来文档流顺序
3.如果要恢复标准文档流，需要使用clear属性清除浮动

块级元素默认是由上往下排列的，加了float就会像浮动一样，从左往右排列，或者从右往左排列
float是改变文档流，而inline-block是单纯的排列方式
当只设置display为inline-block而不设置vertical-align时，盒子无法水平对齐
当不设置float属性时，div默认是上下排列

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* float是改变文档流，而inline-block是单纯的排列方式 
			   当只设置display为inline-block而不设置vertical-align时，盒子无法水平对齐 
			   当不设置float属性时，div默认是上下排列
			*/
			div {
    
				
				/* float: left; */
				display: inline-block;				
				vertical-align: bottom;
			}
			.box1 {
    
				width: 200px;
				height: 100px;
				border: 1px solid #f0f;
			}
			.box2 {
    
				width: 200px;
				height: 100px;
				border: 1px solid #039AE3;
			}
			.box3 {
    
				width: 200px;
				height: 100px;
				border: 1px solid #F0AD4E;
			}
			/* .box4_1 {
				width: 30%;
				height: 30%;
				background-color: #EF5618;
				display: none;
			}
			.box4_2 {
				width: 30%;
				height: 30%;
				background-color: #EF5618;
				display: none;
			} */
			ul {
    
				width: 500px;
			}
			li{
    
				width: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<!-- <div class="box1">
			box1
		</div>
		<div class="box2">
			盒子2asdfasdfasd
			
		</div>
		<div class="box3">
			box3
		</div>
		<div class="box3">
			box3
		</div> -->
		<ul>
			<li>A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
			<li>E</li>
			<li>F</li>
		</ul>
	</body>
</html>

03.margin和padding属性

1.margin称为外边距，即元素外边框留白距离
2.padding称为内边距，即元素内边框与内部内容的距离，即留白位置
3.由于各浏览器黑夜margin不一致，存在兼容性问题

1.外边距重叠，当两个块级元素上下排列的时候，边距并不是重叠的，而是选择其中比较大的一个边距，左右的时候，边距是叠加计算的
2.设置内边距会影响元素的实际宽高
3.margin, padding简写顺序：top，right，bottom，left
4.margin:auto 水平居中

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
    
				/* 清除浏览器默认margin值	 */
				marign:0;
			}
			/* div{float: left;} */
			.container1 {
    
					width: 200px;
					height: 200px;
					border: 1px solid #00ff00;
					/* margin-top: 10px;
					margin-right: 30px;
					margin-bottom: 20px;
					margin-left: 30px; */
					margin: 10px 30px 20px 30px;
					padding: 30px;
			}
			/* 1.外边距重叠，当两个块级元素上下排列的时候，边距并不是重叠的，
				而是选择其中比较大的一个边距，左右的时候，边距是叠加计算的
				2.设置内边距会影响元素的实际宽高
				3.margin, padding简写顺序：top，right，bottom，left
				4.margin:auto 水平居中				
			 */
			.container2 {
    
				width: 200px;
				height: 200px;
				border: 1px solid #00Fffe;