网页布局方式

最新推荐文章于 2024-06-11 19:26:21 发布

Miracle_ze

最新推荐文章于 2024-06-11 19:26:21 发布

阅读量444

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/Miracle_ze/article/details/117885235

版权

本文详细介绍了CSS布局的各种方式，包括盒子布局、CSS元素的分类及display属性，浮动布局与清除浮动，定位布局的static、relative、absolute和fixed，以及溢出处理和缩放。此外，还深入探讨了弹性盒子模型，讲解了flex-direction、flex-wrap、justify-content、align-items和align-content等属性的应用。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、盒子布局

盒子布局结构如图：
在这里插入图片描述
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子布局</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.box
	{
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: red;
	}
	</style>
</head>
<body>
	<div class="box">
		这是一个div
	</div>
</body>
</html>

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

通过上例简单了解盒子布局上图，你可以通过增改style里的设置改变形状。

二、css元素的分类

1.display 属性

在运用块级元素与内联元素之前要了解display属性
display 属性是用于控制布局的最重要的 CSS 属性

display 属性:
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
详细见网站：display属性

1.1 Display: none;

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。

默认情况下，<script> 元素使用 display: none;。

1.2 覆盖默认的 Display 值

每个元素都有一个默认 display 值。但是，您可以覆盖它。

将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。

2.css元素中的块级元素与内联元素

块级元素（display:block）

div p hn 等属于块级元素
可以设置宽和高，独占一行

块级元素的一些例子：

<div> <hn> <p> <form> <header> <footer> <section>

内联元素(display:inline)

设置宽和高的时候是不起作用的，不影响换行
span a

行内元素的一些例子：

<span> <a> <img>

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块级元素，内联元素</title>
	<style type="text/css">
	*{
     
		margin: 0;
		padding: 0;
	}
	.box
	{
     
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: red;
		/* display: inline; 转化为内联元素*/
	}
	.box1
	{
     
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: green;
		/* display: inline; 转化为内联元素*/
		padding: 50px;
		/* 以高宽100px形成的基础上，四周各加50px */
	}
	.box2
	{
     
		/* width: 0px;
		height:0px;
		宽高为0可以隐藏元素 */

/* display: none; 可以隐藏元素*/
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: blue;
		/* display: inline; 转化为内联元素*/
	}
	a{
     
		width: 100px;
		height: 100px;
		/* display: block; 转化为块级元素 */
	}
	</style>
</head>
<!-- 块级元素 独占一行 -->
<!-- 内联元素设置高宽无效 -->
<body>

	<div class="box">
		这是一个div
	</div>
	<div class="box1">
		这是一个div
	</div>

	<div class="box2" >
		这是一个div
	</div>
	<a href="#">第一个标签</a>
	<a href="#">第一个标签</a>
	<a href="#">第一个标签</a>
	<!-- 这三个不独占一行，他们不会换行 -->

</body>
</html>

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

大家也通过改变代码padding可以体现盒子布局！

3.块级元素和内联元素之间相互转换

通过display的取值

注意：
display:none-------- 隐藏元素
隐藏元素也可以通过width:0 height:0

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块级元素，内联元素</title>
	<style type="text/css">
	*{
     
		margin: 0;
		padding: 0;
	}
	.box
	{
     
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: red;
		display: inline; 
	}
	.box1
	{
     
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: green;
		display: inline; 

	}
	.box2
	{
     
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: blue;
		 display: inline; 
	}
	a{
     
		width: 100px;
		height: 100px;
		display: block; 
	}
	</style>
</head>
<!-- 块级元素 独占一行 -->
<!-- 内联元素设置高宽无效 -->
<body>

	<div class="box">
		这是一个div
	</div>
	<div class="box1">
		这是一个div
	</div>

	<div class="box2" >
		这是一个div
	</div>

最低0.47元/天解锁文章

Miracle_ze

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
网页布局方式

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档布局方式一、盒子布局二、css元素的分类1.css元素中的块级元素与内联元素2.读入数据总结一、盒子布局盒子布局结构如图：代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子布局</title> <style type="text/css
复制链接

扫一扫