Python学习笔记:5.1.3 网页布局

本文是关于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;
			
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值