CSS高级

最新推荐文章于 2024-09-15 10:24:49 发布

疯子在辉

最新推荐文章于 2024-09-15 10:24:49 发布

阅读量80

点赞数 1

分类专栏：笔记文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_53679492/article/details/120070335

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS高级——网页布局

文章目录

CSS高级——网页布局

盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: aquamarine;
				width: 200px;
				height: 200px;
				/* padding: 5px;设置内边距 上下左右都设置 */ 
				/* padding: 10px 5px; padding:上下 左右*/
				padding: 5px 10px 15px 20px;/* 从上开始顺时针走设置内边距 */
				
			}
		</style>
	</head>
	<body>
		<div id="">
			内容区
		</div>
		<!-- 
		 盒子模型：形象的把每个标签的4个部分这一构造称为盒子模型
		 每个标签由四个部分组成： 内容区：放内容的区域
								内边距：内容到边框的距离，不放东西 通过padding设置
								边框
								外边距：标签与标签之间的距离
			标签大小 = 内容区大小+内边距大小+边框大小
			width height：只是设置内容大小 ，不是整个标签的大小，如果标签没有设置内边距大小，那么盒子大小=内容大小
			
		 
		 -->
	</body>
</html>

标签分类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 标签分类：
			1、块级标签：无论内容多少，都会占一行、（可以设置宽高）
						<p></p>默认宽：与父级标签一致
								默认高：0  或者有内容 就是内容的高度
			2、行级标签：只占自身大小，不占一行  如：a标签   即使设置宽高，也是无效的
			3、行级块标签：不占一行，可以设置宽高  如img标签
			注意：一般使用块级标签包含行级标签
					a标签可以包含任何标签
					p标签不可以包含任何的块级标签
					
		 -->
		 <p>诗和雪缴缠</p>
		 <a href="" width="200px">aaa</a>
		 <img src="./img/bg.jpg" width="200px" height="200px">
		 <a href="">
			 <p>仰天大笑出门去</p>
		 </a>
		 
		 <p>
			 <h1>很好</h1>
		 </p>
	</body>
</html>

display

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 display:none;在网页中让标签消失，并不占用网页空间
		 -->
		<p style="display: none;">aaa</p>
		<br/>
		<!--
		 display: inline;将标签修改为行级标签
		 -->
		<p style="display: inline;">aaa</p>
		<!-- 
		 display: block;将标签修改为块级标签
		 -->
		<a href="" style="display: block;">百度</a>百度
		<br/>
		<!-- 
		 display: inline-block;将标签改为行级块标签
		 -->
		<a href="" style="display: inline-block; width: 200px;" >百度</a>
	</body>
</html>

在这里插入图片描述

div_span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 div:是块级标签 它可以包含任何标签，没有任何的默认样式，主要用于网页布局（h1，p标签有默认样式或其他缺陷，所以以后不常使用）
		 -->
		 <div id="" style="background-color: aquamarine; width: 200px;">
		 	我是一个纯净版的块级标签
			<p>哈哈哈</p>
		 </div>
		 <!-- 
		 span:行级标签，没有任何的附加样式，是用来选中网页上的文本，并为文本添加CSS样式
		 以后常用表格、表单、超链接、图片、div、span
		 -->
		 <span style="color: burlywood;">
			 我是一个行级标签标签
		 </span>
	</body>
</html>