Java基础知识——28-CSS部分

幺鸡爱学习

已于 2023-11-10 15:05:21 修改

阅读量64

点赞数

分类专栏： Java基础文章标签： html5 css 学习改行学it 学习方法

于 2023-06-03 13:49:27 首次发布

本文链接：https://blog.csdn.net/qq_43877180/article/details/130979547

版权

Java基础专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、轮廓与浮动

轮廓属性

含义：在标签的外围设置的轮廓边框

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*轮廓属性：在标签的外围设置的轮廓边框*/
			div{
				width: 200px;
				height: 150px;
				background-color: cadetblue;
				/*outline-color: red;*/ /*颜色*/
				/*outline-style: dotted;*/ /*轮廓样式：实线、虚线、点线*/
				/*outline-width: 10px;*/ /*线条宽度*/
				/*轮廓组合*/
				outline: greenyellow dotted 10px;
			}
		</style>
	</head>
	<body>
		<div>我的div容器</div>
	</body>

浮动

含义：将竖着排列的控件，横向进行排列

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*浮动：可以将原本竖着排列的控件，横向进行排列
			 注意：用完了浮动，一定要清除浮动；否则后面控件都脱离了标准文档流设计（控件混乱)*/
			.dd{
				width: 100px;
				height: 100px;
			}
			.one{
				background-color: red;
			/*	float: right;*/  /*框1浮动到右边*/
				float: left;/*框1浮动到左边，后面未浮动的控件会被覆盖*/
				width: 100px;
				height: 110px;
			}
			.two{
				background-color: green;
				float: left;
			}
			.three{
				background-color: blue;
				float: left;/*都是左浮动则横向排*/
			}
			#parent{
				width: 299px;/*父容器宽度不够，不够容纳的浮动控件会掉下来*/
				overflow: hidden;/*清除浮动2*/
			}
			#clear{
				clear: both;/*清除浮动1*/
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div class="one" ></div>
			<div class="two dd"></div>
			<div class="three dd"></div>
			<!--<div id="clear"></div>-->   <!--清除浮动-->1
		</div>
		<h1>一级标题</h1>
	</body>

二、定位

绝对定位absolute：相对于父容器的定位，如果一直没有父容器，则基于body定位，不会保留原有位置

相对定位relative：相对于当前位置的定位，若移动位置，原有位置会保留

固定定位fixed：与绝对定位相似，但是固定定位不会改变位置

绝对定位

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.dd{
				width: 100px;
				height: 100px;
			}
			.one{
				background-color: red;
			}
			.two{
				background-color: green;
				position: absolute;
				left: 30px;
				top: 60px;
			}
			.three{
				background-color: blue;
			}
			#parent{
				outline: black dotted 2px;
				position: relative;/*父容器的相对定位*/
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div class="one dd"></div>
			<div class="two dd"></div>
			<div class="three dd"></div>
		</div>
	</body>

相对定位

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*相对定位：相对于当前位置的定位，如果移动位置，原有位原有位置会保留*/
			.dd{
				width: 100px;
				height: 100px;
			}
			.one{
				background-color: red;
			}
			.two{
				background-color: green;
				position: relative;/*相对定位：相对于上一个框*/
				left: 50px;/*左侧间隔30像素*/
				top: 40px;/*顶部间隔50像素*/
			}
			.three{
				background-color: blue
			}
		</style>
	</head>
	<body>
		<div class="one dd"></div>
		<div class="two dd"></div>
		<div class="three dd"></div>
	</body>

三、盒子模型

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#one{
				width: 100px;
				height: 100px;
				background-color: green;
				padding-left: 60px;/*内边距*/
				/*边框的组合*/
				border: dotted yellow 5px;
				margin-bottom: 30px;/*外边距 底部与第二个控件间隔30像素*/
			}
			#two{
				width: 110px;
				height: 110px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
	</body>

四、扩展模型

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				font-size: 38px;
				width: 240px;
				line-height: 58px;
				background-color: red;
				text-align: center;
				color: white;
				text-shadow: 10px 15px 10px wheat;
				border-radius: 10px;
				box-shadow: 10px 15px 10px gray;
				}/*注意中括号不要放错位置*/
				body{
					/*background-image: url(../img/img/003.png);
					background-repeat: no-repeat;
					background-size: 300px 450px;*/
					
					background-image: url(../img/img/007.png),url(../img/img/005.png);
					background-repeat: no-repeat;
					background-size: 200px 300px;
					background-position: 0px 0px,300px 0px;
				}
			
		</style>
	</head>
	<body>
		<div>嘻嘻嘻</div>
	</body>

幺鸡爱学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Java基础知识——28-CSS部分

绝对定位absolute：相对于父容器的定位，如果一直没有父容器，则基于body定位，不会保留原有位置。相对定位relative：相对于当前位置的定位，若移动位置，原有位置会保留。固定定位fixed：与绝对定位相似，但是固定定位不会改变位置。含义：将竖着排列的控件，横向进行排列。含义：在标签的外围设置的轮廓边框。
复制链接

扫一扫