CSS快速入门 div+css布局

最新推荐文章于 2024-07-23 10:00:17 发布

m0_60786924

最新推荐文章于 2024-07-23 10:00:17 发布

阅读量656

点赞数 1

分类专栏： CSS HTML 文章标签： html 前端 css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_60786924/article/details/124059735

版权

HTML 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

目录

一、盒模型的介绍

每个html元素都可以看做是一个盒子，盒子具有宽度（width）和高度（height）。

盒子组成：padding（内填充）、border（边框）、margin（外边距）、content（内容）

【案例】盒子模型div

二、与布局有关的CSS属性

1. position：属性：用于定义一个元素是否：absolute（绝对），relative（相对），static（静态），或者 fixed（固定）

1.1 absolute:绝对定位，距top和left的距离，一般与js结合使用，比如页面漂浮的广告。 1.2 relative：相对定位，指的是相对自己默认的位置。 1.3 static：默认 1.4 fixed：固定 2. z-index属性：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素

3.text-align：横向排列：left right center

4.line-height:指定行高，垂直居中

5.display: 设置元素是否是：行内元素（inline）、块状元素（block）、行内块状元素（inline-block）或者none隐藏标签作用

6.overflow：设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此选项都会为层添加滚动条。而值使用auto值时，只在内容超出层的范围时才会显示滚动条。

三、设置浮动（float）和清除浮动（clear）

专用来摆放标签的位置用的，而不是绝对位置和相对位置。absolute和relative是用来实现漂浮用的用display：inline 可以，但是不兼容

3.1 float：设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮left，右漂浮right值。 3.2 clear：清除 left both 加div clear

四、布局案例

一、盒模型的介绍

每个html元素都可以看做是一个盒子，盒子具有宽度（width）和高度（height）。

盒子组成：padding（内填充）、border（边框）、margin（外边距）、content（内容）

【案例】盒子模型div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#oDiv{
				background-color: yellow;
				width: 200px;
				height: 200px;
				/* 盒模型的属性 */
				/* 边框 */
				border: 10px solid blue;
				/* 外边距 */
				margin-left: 20px;
				margin-top: 50px;
				/* 内填充 */
				padding-left: 30px;
			}
			.oBox{
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 
			在网页中，所有的标签都可以称为一个盒模型
			就是一个容器，可以进行设置宽和高
			
			div----最常用的盒模型
			存储数据以及美化数据。
			
			盒模型的组成：边框+外边距+内填充+内容
		 -->
		 
		 <div id="oDiv">
			 好好学习 天天向上
		 </div>
		
		
		<div class="oBox">
			
		</div>
	</body>
</html>

二、与布局有关的CSS属性

1. position：属性：用于定义一个元素是否：absolute（绝对），relative（相对），static（静态），或者 fixed（固定）

                   1.1 absolute:绝对定位，距top和left的距离，一般与js结合使用，比如页面漂浮的广告。
                   1.2 relative：相对定位，指的是相对自己默认的位置。
                   1.3 static：默认
                   1.4 fixed：固定
2. z-index属性：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.oo{
				width: 100px;
				height: 100px;
				background-color: red;
				/* absolute 绝对定位  脱离整个文档 漂浮起来*/
				position: absolute;
				/* 借助top+left一起使用 */
				left: 200px;
				top: 100px;
			}
			.oBox{
				width: 400px;
				height: 400px;
				background-color: #FFA500;
				position: absolute;
				top: 300px;
				left: 200px;
			}
			.oBox>.osb{
				width: 100px;
				height: 100px;
				background-color: purple;	
				/* 相对定位，相对于该容器的父容器而言 */
				position: relative;
				top: 10px;
				left: 50px;
			}
			.oooo{
				width: 100px;
				height: 100px;
				background-color: saddlebrown;
				position: fixed;
				right: 0px;
				bottom: 0px;
			}
			
			/* z-idex */
			#z1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				z-index: 3;
			}
			#z2{
				background-color: blue;
				width: 50px;
				height: 50px;
				position: absolute;
				top: 90px;
				left: 90px;
				z-index: 2;
			}
			
		</style>
	</head>
	<body>
		
		<!-- position:定位 -->
		
		
		
		
		<div class="oo">
			okokokok
			
		</div>
		
		<div class="oBox">
			<div class="osb">
				
			</div>
		</div>
		
		<div class="oooo"></div>
		
		
		<!-- z-index属性   控制层的显示 -->
		
		
		<div id="z1"></div>
		<div id="z2"></div>
		<script type="text/javascript">
			for(var i = 0;i<100;i++){
				document.write(i+"<br>");
			}
		</script>
		
	</body>
</html>

3.text-align：横向排列：left right center

4.line-height:指定行高，垂直居中

5.display: 设置元素是否是：行内元素（inline）、块状元素（block）、行内块状元素（inline-block）或者none隐藏标签作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				/* width: 400px;
				height: 200px;
				border: 1px solid red; */
			}
			p{
				width: 50px;
				height: 30px;
				border: 1px solid red;
			}
			img{
				width: 300px;
				height: 20px;
			}
			
			#aa{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				/* 将a标签转成块状元素 */
				/* display: block; *//* 块状 */
				/* display: inline; *//* 行内 */
				/* display: inline-block; *//* 行内-块状*/
				
				/* 控制隐藏与显示 */
				/* display: none; */
				/* display: block; */
			}
			#oDiv{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				/* overflow */
				/* 隐藏溢出的内容 */
				/* overflow: hidden; */
				/* 滚动效果 */
				/* overflow: scroll; */
				/* 自动：内容过少不会出现滚动条，内容过多就会出现 */
				overflow: auto;
			}
			
		</style>
	</head>
	<body>
		<!-- HTML标签可以分为三类标签
			行内标签：不能设置宽和高，多个行内标签编写后不会自动跨行，只有网页整行填充完毕后才进行跨行
			块状标签：可以设置宽和高度，而且会沾满整行。
			行内-块状标签:既可以设置宽和高也在一行内显示
				img
		 
		 -->
		<a href="">asd</a>
		<p>123</p>
		<p>456</p>
		
		<img src="img/1.jpg" alt="">
		<img src="img/1.jpg" alt="">
		
		
		<hr>
		<!-- display属性：可以控制标签的显示与隐藏  还可以转换行内，块状，行内-块状的特点 -->
		
		<a href="#" id="aa">百度一下</a>
		<br>
		<p>呵呵</p>
		
		<hr>
		
		<div id="oDiv">
			akjsfhlksajdsajflsa
			akjsfhlksajdsajflsa
			akjsfhlksajdsajflsa
			akjsfhlksajdsajflsa
		</div>
	</body>
</html>

6.overflow：设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此选项都会为层添加滚动条。而值使用auto值时，只在内容超出层的范围时才会显示滚动条。

三、设置浮动（float）和清除浮动（clear）

专用来摆放标签的位置用的，而不是绝对位置和相对位置。absolute和relative是用来实现漂浮用的
用display：inline 可以，但是不兼容

          3.1 float：设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮left，右漂浮right值
。
          3.2 clear：清除 left both
                   加div clear

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.oBox1{
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			.oBox2{
				width: 100px;
				height: 100px;
				background-color: green;
				float: left;
			}
		</style>
	</head>
	<body>
		<!-- float 浮动 -->
		<div class="oBox1">1</div>
		<div class="oBox2">2</div>
	</body>
</html>

四、布局案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#container{
				background-color: pink;
				width: 960px;
				height: 600px;
				/* 利用margin居中 */
				margin: 0 auto;
			}
			#container>.top{
				width: 960px;
				height: 100px;
				background-color: #FF0000;
			}
			#container>.main{
				width: 960px;
				height: 400px;
				background-color: orange;
			}
			#container>.foot{
				width: 960px;
				height: 100px;
				background-color: gainsboro;
			}
			#container>.main>.main_left{
				width: 300px;
				height: 400px;
				background-color: #8B4513;
				float: left;
			}
			#container>.main>.main_right{
				margin-left: 20px;
				width: 640px;
				height: 400px;
				background-color: skyblue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="top"></div>
			<div class="main">
				<div class="main_left"></div>
				<div class="main_right"></div>
				
			</div>
			<div class="foot"></div>
		</div>
	</body>
</html>

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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