JAVAWeb_CSS_Div+CSS布局

最新推荐文章于 2022-07-14 17:07:55 发布

mango_bobo

最新推荐文章于 2022-07-14 17:07:55 发布

阅读量340

点赞数 2

分类专栏： javaweb CSS 文章标签： JAVAWeb_CSS_DIV+CSS布局

本文链接：https://blog.csdn.net/weixin_43801116/article/details/102538251

版权

javaweb 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

Div+CSS布局

一、div和span

1、DIV和span在整个html标记中，无任何意义，存在就是为了应用CSS样式
2、DIv和span的区别：span是内联元素，div是块级元素

二、盒模型

1、margin：盒子外边距
2、padding：盒子内边距
3、border：盒子边框长度
4、width：盒子宽度!
5、height：盒子高度

盒模型实例

代码块

<head>
	<title>盒模型</title>
	<style type="text/css">
	*p{margin:0} /*去掉样式*/
	.dl{
	width:500px;
	height:500px;
	background-color:red;
	margin:100px;
	border:red  dashed 20px;
	padding-left:40px;
	}
	</style>
</head>

三、布局相关的属性

1、position定位方式

	1）正常定位：relative（相对定位）
	2）根据父元素进行定位：absolute（绝对定位）
	3）根据浏览器窗口进行定位：fixed（绝对定位）
	4）无定位：static
	5）继承：inherit

2、定位

	左、右、上、下

代码块2

	<head>
	<title>文档</title>
	<style type="text/css">
	img{piosition:absolute;
	left:100px;
	top:-50px;
	}
	</style>
</head>

3、z-index层覆盖先后顺序（优先级）

代码块

	<head>
	<title>文档</title>
	<style type="text/css">
	.img1{
		piosition:absolute;
		left:100px;
		top:50px;
		border:red solid 2px;
		z-index:2;
	}
	.img2{
		piosition:absolute;
		left:100px;
		top:60px;
		border:green solid 2px;
		z-index:1;
	}
	</style>
</head>
<body>
	<img src="../3.jpg" width="300px" height="400px" classs="img1">
	<img src="../3.jpg" width="300px" height="400px" classs="img2">
	<h1 style=""position:absolute;left:0;top:0;z-index:1;color:red>学习</h1>
	<h1 style=""position:absolute;left:2px;top:0;z-index:2;color:green>学习</h1>
	<h1 style=""position:absolute;left:4px;top:0;z-index:3;color:blue>学习</h1>
	<h1 style=""position:absolute;left:6px;top:0;z-index4;color:yellow>学习</h1>
</body>

4、display显示属性

1）display:none
	层不显示
2)display:block
	块状显示，在元素后面换行，显示下一个块元素
3)display:inline
	内联显示，多个块可以系那是在一行内

代码块4.1

	<head>
	<title>文档</title>
	<style type="text/css">
	.img1{
		piosition:absolute;
		left:100px;
		top:50px;
		border:red solid 2px;
		z-index:2;
		display:none;
	}
	.img2{
		piosition:absolute;
		left:100px;
		top:60px;
		border:green solid 2px;
		z-index:1;
		display:block;
	}
	</style>
</head>
<body>
	<img src="../3.jpg" width="300px" height="400px" classs="img1">
	<img src="../3.jpg" width="300px" height="400px" classs="img2">
	</body>

代码块4.2

<head>
<title>文档</title>
<script language="javascript">//显示
function show(){
	document.getElementById("ingid").style.display="block";
}
function hide(){
	document.getElementById("ingid").style.display="none";
}
</script>
</head>
<body>
	<input type="botton" value="显示" onclick="show()" />
	<input type="botton" value="隐藏" onclick="hide()" />
</body>

5、float浮动属性

1）左浮动：left
2）右浮动：right

代码块

	<head>
	<title>文档</title>
	<style type="text/css">
	.img1{
		piosition:absolute;
		left:100px;
		top:50px;
		border:red solid 2px;
		z-index:2;
		display:none;
		float:right;
	}
	.img2{
		piosition:absolute;
		left:100px;
		top:60px;
		border:green solid 2px;
		z-index:1;
		display:block;
	}
	</style>
</head>
<body>
	<img src="../3.jpg" width="300px" height="400px" classs="img1">
	<img src="../3.jpg" width="300px" height="400px" classs="img2">
</body>

mango_bobo

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JAVAWeb_CSS_Div+CSS布局

Div+CSS布局一、div和span1、DIV和span在整个html标记中，无任何意义，存在就是为了应用CSS样式2、DIv和span的区别：span是内联元素，div是块级元素二、盒模型1、margin：盒子外边距2、padding：盒子内边距3、border：盒子边框长度4、width：盒子宽度!5、height：盒子高度盒模型实例代码块<head>...
复制链接

扫一扫

专栏目录