CSS基础总结-3

最新推荐文章于 2024-09-05 23:48:57 发布

m0-0m

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量67

点赞数

分类专栏： css基础总结文章标签： css

本文链接：https://blog.csdn.net/m0_49935332/article/details/109617945

版权

css基础总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文总结了CSS3中的布局和定位属性，包括float用于元素浮动，display控制元素的显示与隐藏，以及position属性的static、absolute和relative三种定位方式，同时提到了z-index用于调整元素的层叠顺序。

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

CSS_3

1.关于布局的属性设置
float：html元素是否及如何浮动【none没有 | left{左浮动} | right{右浮动} 】
块级元素:其元素的前后会自动折行。
行内元素:按照由左向右一次排列，除非使用<br>元素强制换行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置元素浮动</title>
		<style>
			span{
				float: right;
			}
		</style>
	</head>
	<body>
		<font size="7">设置元素浮动</font>
		<span>
			<a href="#">登陆</a>
			&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="#">注册</a>
		</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置元素浮动</title>
		<style>
			span{
				float: right;
			}
			ul{
				list-style-type: none;
			}
			ul li{
				float: left;
				padding-left:50px;
			}
			ul li a{
				font-size: 30px;
				text-decoration: none;
				color: darkgrey;
			}
			ul li a:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<font size="7">设置元素浮动</font>
		<ul>
			<li><a href="http://news.baidu.com/" target="_blank">新闻</a></li>
			<li><a href="#">hao123</a></li>
			<li><a href="#">地图</a></li>
			<li><a href="#">视频</a></li>
			<li><a href="#">贴吧</a></li>
			<li><a href="#">学术</a></li>
			<li><a href="#">更多</a></li>
		</ul>
	</body>
</html>

在这里插入图片描述
2.设置html元素的隐藏和显示
display:html元素是否及如何显示。
block：显示
none:隐藏
visibility:是否显示html元素。
visible：显示
hidden:隐藏
display与visibility的区别?
Display隐藏元素之后，元素的物理空间也会消失。
Visibility:隐藏元素之后，元素的物理空间不会消失，会留出空白。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置html元素的隐藏和显示</title>
		<script>
			function test1(){
				document.getElementById("img1").style.display="none";
			}
			function test2(){
				document.getElementById("img1").style.display="block";
			}
			function testvisibility1(){
				document.getElementById("img2").style.visibility="hidden";
			}
			function testvisibility2(){
				document.getElementById("img2").style.visibility="visible";
			}
		</script>
	</head>
	<body>
		<h1>设置html元素的隐藏和显示</h1>
		<h2>display:html元素是否及如何显示</h2>
		<h3>block：显示</h3> 
		<h3>none:隐藏</h3>
		<h1 onmouseover="test1();" onmouseout="test2();">图片的隐藏和显示</h1><br>
		<img id="img1" src="imgs/avatar2.png" /><br>
		<img id="img2" src="imgs/avatar5.png" />
		<h2>visibility:是否显示html元素</h2>
		<h3>visible：显示</h3> 
		<h3>hidden:隐藏</h3>
		<h1 onmouseover="testvisibility1();" onmouseout="testvisibility2();">图片的隐藏和显示</h1><br>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				list-style-type: none;
			}
			ul li{
				float: left;
				padding-left:50px;
			}
			ul li a{
				font-size: 30px;
				text-decoration: none;
				color: darkgrey;
			}
			ul li a:hover{
				color: red;
			}
			div{
				width: 300px;
				height: 200px;
				border: 5px solid black;
				position: absolute;
				top:60px;
				left: 100px;
				display: none;
			}
		</style>
		<script>
			function test1(){
				document.getElementById("div1").style.display="block";
			}
			function test2(){
				document.getElementById("div1").style.display="none";
			}
		</script>
	</head>
	<body>
		<ul>
			<li><a href="http://news.baidu.com/" 
				target="_blank" 
				onmouseover="test1();" 
				onmouseout="test2();">新闻</a></li>
			<li><a href="#">hao123</a></li>
			<li><a href="#">地图</a></li>
			<li><a href="#">视频</a></li>
			<li><a href="#">贴吧</a></li>
			<li><a href="#">学术</a></li>
			<li><a href="#" >更多</a></li>
		</ul>
		<div id="div1"></div>
	</body>
</html>

3.关于定位的属性设置
position：设置HTML元素的定位方式。
static：默认值。无特殊定位，html元素遵循HTML定位规则。
absolute:绝对定位。脱离HTML默认的定位规则，使用left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
relative：相对定位。不脱离HTML默认的定位规则，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。
left【左距】，right【右距】， top【上距】， bottom【下距】
必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。
HTML默认的定位规则，html元素在HTML文件中按照从左上角向右下角一次排列，遇见块级元素折行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位设置</title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				left:10%;
				top:100px;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: blue;
				position: absolute;
				left: 1000px;
				top:70%;
			}
		</style>
	</head>
	<body>
		<h1>position</h1>
		<hr>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>

z-index：设置对象的层叠顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。
注意:z-index属性的有效性与position属性有关。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置元素的层叠</title>
		<style>
			#div1{
				width: 300px;
				height: 200px;
				background-color: red;
				position: absolute;
				left: 100px;
				top: 100px;
				z-index: 1;
			}
			#div2{
				width: 300px;
				height: 200px;
				background-color: blue;
				position: absolute;
				left: 150px;
				top: 160px;
				z-index: 2;
			}
			#div3{
				width: 300px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 220px;
				z-index: 3;
			}
			#div4{
				width: 300px;
				height: 200px;
				background-color: green;
				position: absolute;
				left: 250px;
				top: 280px;
				z-index: 4;
			}
			div p{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<p align="right">div1--[z-index=1]</p>
		</div>
		<div id="div2">
			<p align="right">div2--[z-index=2]</p>
		</div>
		<div id="div3">
			<p align="right">div3--[z-index=3]</p>
		</div>
		<div id="div4">
			<p align="right">div4--[z-index=4]</p>
		</div>
	</body>
</html>

在这里插入图片描述

m0-0m

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础总结-3

CSS_31.关于布局的属性设置float：html元素是否及如何浮动【none没有 | left{左浮动} | right{右浮动} 】块级元素:其元素的前后会自动折行行内元素:按照由左向右一次排列，除非使用元素强制换行。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>设置元素浮动</title> <style> span
复制链接

扫一扫

专栏目录