• CSS详解

    文章目录


    HTML(结构)+CSS(表现)+JavaScript(交互)

    1. CSS快速入门

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    7. display和float

    display(显示):display属性设置一个元素应如何显示

    block:块元素
inline:行内元素
inline-block:块元素,但可以内联，使元素可放在一行
/*display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。*/

    • 1
    • 2
    • 3
    • 4

    float(浮动):会使元素向左或向右移动,其周围的元素也会重新排列。

    .css
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    处理父级边框塌陷的问题,解决方案

    clear:right; 右侧不允许有浮动元素
clear:left;左侧不允许有浮动元素
clear:both;两侧不允许有浮动元素
clear:none;

    • 1
    • 2
    • 3
    • 4

    1.增加父级元素的高度

    .father{
   border:1px solid red;
   height:800px;
}

    • 1
    • 2
    • 3
    • 4

    2.增加一个空的div标签，清除浮动

    
.clear    {
  clear:both;
  margin:0;
  padding:0;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3.overflow:属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

    1.visible	:默认值。内容不会被修剪，会呈现在元素框之外。
2.hidden:	内容会被修剪，并且其余内容是不可见的。
3.scroll:	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
4.auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5.inherit:规定应该从父元素继承 overflow 属性的值。

    • 1
    • 2
    • 3
    • 4
    • 5

    4.父类添加一个伪类:after

    .father:after{
  content:'';
  display:block;
  clear:both;
}

    • 1
    • 2
    • 3
    • 4
    • 5

    display和float的对比:

    1.display:方向不可以控制
2.float:浮动起来会脱离标准文档流,可能会遇到父级边框塌陷问题

    • 1
    • 2
    8. 列表实现练习
    
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style>
			#outer{
				width: 500px;
				height: 200px;
				background:#e4ddff;
			}
			#inner{
				width: 500px;
				height: 80px;
				background:#f4fffc;
				margin:0px;
			}
			.search{
				margin:0;
			}
			.search input{
				width: 500px;
				height: 30px;
				font-family:楷体;
				text-align:center;
				border:1px solid #919191;
				border-radius:5px;
				margin:0 auto;/*外边距使用:居中*/
				/* margin-left:20px; */
			}
			a{
				text-decoration:none;
				font-family:楷体;
				font-size:16px;
			}
			a:hover{
				/* 鼠标移动到文字上时文字颜色 */
				color:red;
			}
			ul li{
				/* 列表样式 ，此处去掉无序列表的实心圆*/
				list-style:none;
				display:inline-block;
				margin:0px;
			}
		style>
	head>
	<body>
		<div id="outer">
			<div id="inner">
				<p class="search"><input type="search" name="搜索框" placeholder="请输入你需要搜索的内容" />p>
				<div id="list">
					<ul>
						<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>
						<li><a href="">知道a>li>
						<li><a href="">资讯a>li>
						<li><a href="">采购a>li>
						<li><a href="">地图a>li>
					ul>
				div>
			div>
		div>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    结果截图
    在这里插入图片描述

    9. 定位

    1.相对定位 position:relative

    relative:相对位置,相对于原来的位置，进行指定的距离偏移，它仍然在标准文档流中，原来的位置仍然被保留;(注意:float则不会保留)
position:relative;
top:10px;"距离":距离原来位置顶部相差10px;

    • 1
    • 2
    • 3
    
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style>
			body{
				margin:2px;
				padding:0;
			}
			#father{
				border:1px solid red;
				background:#dcdedf;
				margin:0;
				padding:10px;
				width: 500px;
				height: 105px;
			}
			#first{
				background:#aaffff;
				margin:10px;
				position:relative;
				/* top:-10px; */
			}
			#second{
				background:#ffaa7f;
				margin:10px;
			}
			#third{
				background:#aaaa00;
				margin:10px;
			}
		style>
	head>
	<body>
		<div id="father">
			<div id="first">
				第一部分
			div>
			<div id="second">
				第二部分
			div>
		    <div id="third">
				第二部分
		    div>	
		div>
		
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    原始截图:
    在这里插入图片描述

    #first{
	background:#aaffff;
	margin:10px;
	position:relative;
	top:-15px;
}
#third{
	background:#aaaa00;
	margin:10px;
	position:relative;
	right:15px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    设置相对位置结果截图:
    在这里插入图片描述相对定位练习

    
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
			<style>
				#outer{
					border:1px solid #000;
					width: 360px;
					height: 360px;
				}
				#part01{
					width: 70px;
					height: 70px;
					border:1px solid green;
					background:greenyellow;
					color:red;
				}
				#part02{
					width: 70px;
					height: 70px;
					border:1px solid green;
					background:greenyellow;
					color:red;
					position: relative;
					left: 287px;
					top:-72px;
				}
				#part03{
				    width: 70px;
				    height:70px;
				    border:1px solid green;
				    background:greenyellow;
					color:red;
					position: relative;
					left: 145px;
					top:10px;
				}
				#part04{
				    width: 70px;
				    height: 70px;
				    border:1px solid green;
				    background:greenyellow;
					color:red;
					position: relative;
					top:71px;
				}
				#part05{
				    width: 70px;
				    height: 70px;
				    border:1px solid green;
				    background:greenyellow;
					color:red;
					position: relative;
					left: 287px;
					top:-1px;
				}
				a{
					text-align: center;
					font-size: 20px;
					font-family: 楷体;
					text-decoration: none;
					display:block;
					line-height: 70px;
					color: #000;
				}
				a:hover{
					background: skyblue;
				}
			style>
	head>
	<body>
		<div id="outer">
			<div id="part01">
				<a href="#">链接1a>
			div>
			<div id="part02">
				<a href="#">链接2a>
			div>
			<div id="part03">
				<a href="#">链接3a>
			div>
			<div id="part04">
				<a href="#">链接4a>
			div>
			<div id="part05">
				<a href="#">链接5a>
			div>
		div>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91

    结果截图
    在这里插入图片描述
    2.绝对定位 position:absolute

    定位:基于XXX定位
1.在没有父级元素定位的前提下,相对于浏览器定位
2.假设父级元素存在，通常会相对于父级元素进行偏移
3.在父级元素范围内移动
总结:相对于父级浏览器的位置进行指定的偏移;绝对定位使得元素不在标准文档流中,原来的位置不会保留

    • 1
    • 2
    • 3
    • 4
    • 5

    3.z-index及透明度

    opacity:0.5;/* 背景透明度 */

    • 1

    4.固定定位 position：fixed

    
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style>
			#outer{
				margin:0;
				padding:0;
				overflow:hidden;
				font-family:楷体;
				position:relative;/* 父级元素相对定位 */
			}
			ul li{
				list-style:none;
				margin:5px;
				padding:0;
			}
			.tip1{
				background-color: #000000;
				color:#ff5500;
				z-index:999;
				position:absolute;
				top:286px;
				opacity:0.5;/* 背景透明度 */
			}
			.time{
				position:absolute;
			}
			.addr{
				position:absolute;
			}
		style>
	head>
	<body>
		<div id="outer">
			<ul>
				<li><img src="js/5.png" alt="">li>
				<li class="tip1">学前端，CSS、HTML、JavaScript必不可少li>
				<li >时间:2022-12-3li>
				<li >地点:哔哩哔哩网站li>
			ul>
		div>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    结果截图
    在这里插入图片描述固定定位

    
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style>
			body{
				width: 500px;
				height: 1000px;
			}
			div:nth-of-type(1){
				width: 100px;
				height: 100px;
				background: #aa00ff;
				position:absolute;
				right:0;
				bottom:0;
				font-family:楷体;
				text-align:center;
			}
			div:nth-of-type(2){
			    width: 80px;
			    height: 80px;
			    background: #00ffff;
			    position:fixed;/* 固定位置定位 */
			    right:0;
			    bottom:0;
			    font-family:楷体;
			    text-align:center;
			}
		style>
	head>
	<body>
		<div>
			方块1
		div>
		<div>
			方块2
		div>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    结果:下拉浏览器时，绝对位置会发生改变，固定位置不会发生改变
    为下拉前:
    在这里插入图片描述
    下拉浏览器后:
    在这里插入图片描述

  • 相关阅读:
    解析类型参数
    k8s的安装
    Android左滑删除，自定义左滑删除控件
    教程，如何给公众号文章或菜单添加附件？
    对max2900的一些了解
    clang-前端插件-给各种无花括号的“块”加花括号-基于llvm15--clang-plugin-add-brace
    推荐《机动战士高达SEED DESTINY》
    硬链接、软连接浅析
    java计算机毕业设计无人智慧药柜系统设计源码+lw文档+系统+数据库
    线性回归
  • 原文地址：https://blog.csdn.net/weixin_53415378/article/details/128104133