CSS学习第四周

最新推荐文章于 2024-09-16 23:33:40 发布

Zhangzanhao

最新推荐文章于 2024-09-16 23:33:40 发布

阅读量223

点赞数

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/Zhangzanhao/article/details/123032223

版权

固定定位

固定定位position:fixed; 它和绝对定位有点相似

一，不管父系是否有定位，子元素加上固定定位后就以浏览器为参考

二，固定定位不会随着屏幕的滑动而消失，只会一直固定在那个位置

三，固定定位会脱标。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
            div {
                position:fixed;
                top:30px;
                left:80px;
            }
        </style>
	</head>
	<body>
		<div></div> 
	</body>
</html>

叠加次序

当三个div都加绝对定位不加边偏距后，就会出现后面的div覆盖前面的div的现象

表面为最后一个div，若想让第一个div在表面，就要用到叠加次序

叠加次序的属性就是z-index 后加数字

只要谁的数字高，谁就接近表面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div:nth-child(1) {
				z-index: 5;
				background-color: aqua;
			}
			div:nth-child(2) {
				z-index: 3;
				background-color: black;
			}
			div:nth-child(3) {
				z-index: 1;
				background-color: burlywood;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

注意

元素只要被加了相对定位，绝对定位，固定定位，浮动的其中一项，都会变成行内块元素

溢出

当内容超出父系的框时，叫溢出。

对于溢出之后应该怎么办，可以用overflow
overflow:visible 默认的，超出显示
overflow:auto 自动超出就会显示滚动条，不超出不显示
overflow:scroll 一直显示滚动条
overflow:hidden 不超出的显示，超出的直接隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 20px;
				height: 10px;
				overflow: hidden;
				border: 2px solid black;
			}
		</style>
	</head>
	<body>
		<div>iocahwcoihoiaoiwicioahcoaoch</div>
		
	</body>
</html>

隐藏

隐藏就是把元素给隐藏掉

像我们关掉网页上的广告，其实是隐藏了他们而已，并没有真正的删除掉他们

隐藏有分隐藏元素及其位置隐藏元素不包括位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				/* display: none;   /* 隐藏元素，连位置也没了 */ */
				background-color: #0000FF;
			}
			div {
				visibility: hidden;   /* 也是隐藏元素，但是位置保留  visible是显示*/
				background-color: #00A4FF;
			}
			
			/* 鼠标经过蓝色区域时，图片就会显示出来  下拉菜单！！*/
			header {
				position: relative;
				margin: auto;
				width: 300px;
				height: 50px;
				background-color: #00A4FF;
			}
			img {
				position: absolute;
				padding: 100px;
				display: none;
			}
			header:hover img {
				display: block;
			}
		</style>
	</head>
	<body>
		<header>
			<img src="../img/1.jpg" alt="">
		</header>
	</body>
</html>

对齐属性

justify-content

调整横轴对齐
       flex-start 默认值，项目位于容器的开头，让子元素从父容器的开头排序
       flex-end 让子元素从父容器的后面开始排序
       center 让子元素从父容器的中间显示
       space-betwween 左右盒子贴近父盒子，中间的平均分布空白间距
       space-around 项目位于各行之前，之间，之后都留有空白的容器内，相当于给项目添加相同的外边距

align-item

竖直对齐
       flex-start 沿着开头往下对齐
       flex-end 底对齐
       center 垂直居中
       stretch 让子元素的高度拉伸至父元素一样前提子元素没高度设定

flex-wrap

控制是否换行
       当一行装不下这么多项目怎么办
       nowrap 默认值规定项目不拆行或不拆列强行显示在一行内，但这一行的元素宽度会被压缩
       wrap 换行
       wrap-reverse 在必要的时候项目拆行，但是以相反的顺序翻转。