CSS基础知识（3）

最新推荐文章于 2024-09-11 20:31:47 发布

晚风yY

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量64

点赞数

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

本文链接：https://blog.csdn.net/m0_55689351/article/details/114643069

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

3.关于定位的属性设置

position：设置HTML元素的定位方式

static：默认值。无特殊定位，html元素遵循HTML定位规则

HTML默认的定位规则，html元素在HTML文件中按照从左上角向右下角一次排列，遇见块级元素折行。

absolute:绝对定位。脱离HTML默认的定位规则，使用left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

relative：相对定位。不脱离HTML默认的定位规则，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

left【左距】，right【右距】， top【上距】， bottom【下距】

必须定义 position 属性值为 absolute 或者 relative 此取值方可生效

例：

<!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>

3.2 z-index：设置对象的层叠顺序

较大 number 值的对象会覆盖在较小 number 值的对象之上

注意:z-index属性是的有效性与position属性有关。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于定位的层叠设置</title>
		<style>
			#div1{
				width: 400px;
				height:400px;
				background-color: blue;
				position: absolute;
				z-index: 1;
			}
			#div2{
				width: 300px;
				height:300px;
				background-color: chartreuse;
				position: absolute;
				top:50px;
				left:60px;
				z-index:2;
			}
			#div3{
				width: 200px;
				height:200px;
				background-color: red;
				position: absolute;
				top: 100px;
				left: 110px;
				z-index: 3;
			}
			#div4{
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				top: 150px;
				left: 160px;
				z-index: 4;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
	</body>
</html>