CSS（盒子模型，定位，浮动，扩展）

最新推荐文章于 2024-07-19 18:46:52 发布
最新推荐文章于 2024-07-19 18:46:52 发布
阅读量1.3k 收藏 27
点赞数 25
文章标签： css 前端 盒子模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57463864/article/details/139452438
版权

CSS

盒子模型：

盒子模型(Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
 
标签：div

 
 

外边距：

margin-top: 50px;设置外边距 - 上边距。

margin-left: 50px;设置外边距 - 左边距。

margin-right: 50px;设置外边距 - 右边距。

margin-bottom: 50px;设置外边距 - 下边距。

上下左右的外边距都相同，简化为 margin: 50px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
				width: 200px;
				height: 200px;
				border: orange 1px solid;
				
				/*
				 * 	margin-top: 50px;设置外边距 - 上边距
					margin-left: 50px;设置外边距 - 左边距
					margin-right: 50px;设置外边距 - 右边距
					margin-bottom: 50px;设置外边距 - 下边距
				 */
				
				margin: 50px;
			}			
			
		</style>
	</head>
	<body>
		
		<div>
			今天天气真好
		</div>
		
	</body>
</html>

 
 

内边距：

padding-top: 50px;设置内边距 - 上边距
padding-left: 50px;设置内边距 - 左边距
padding-right: 50px;设置内边距 - 右边距
padding-bottom: 50px; 设置内边距 - 下边距

上下左右的内边距都相同，简化为 padding: 50px;

注意：能不使用内边距就不使用，因为老版本的IE浏览器不支持，而且会把盒子撑变形！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
				width: 200px;
				height: 200px;
				border: orange 1px solid;
				
				/*
				 * 	padding-top: 50px;
					padding-left: 50px;
					padding-right: 50px;
					padding-bottom: 50px; 
				 */
				
				padding: 50px;
			}			
			
		</style>
	</head>
	<body>
		
		<div>
			今天天气真好
		</div>
		
	</body>
</html>

 
 

水平居中：

水平居中：margin: 0 auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
				width: 200px;
				height: 200px;
				border: orange 1px solid;
				
				margin: 0 auto;/*水平居中*/
			}			
			
		</style>
	</head>
	<body>
		
		<div>
			今天天气真好
		</div>
		
	</body>
</html>

 
 

定位：

 

相对定位：

相对定位：保留原有位置，相对于原有位置进行位移。
 
position: relative;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#manager{
				border: orange 1px solid;
				
				margin-top: 200px;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				border: red 1px solid;
			}
			
			#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
                /*相对定位：保留原有位置，相对于原有位置进行位移*/
				position: relative;
                /*距离定位位置上边缘50px*/
				top: 50px;
                /*距离定位位置左边缘50px*/
				left: 50px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
			
		</style>
	</head>
	<body>
		
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>
		
	</body>
</html>

 

 

绝对定位：

绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移。
 
position: absolute;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#manager{
				border: orange 1px solid;
				
				margin-top: 200px;
				
				position: relative;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				border: red 1px solid;
			}
			
			#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
                
                /*绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移*/
				position: absolute;
                /*距离定位位置上边缘50px*/
				top: 50px;
                /*距离定位位置左边缘50px*/
				left: 50px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
			
		</style>
	</head>
	<body>
		
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>
		
	</body>
</html>

 

 

固定定位：

固定定位：将元素固定到页面的某个位置，一直保持不变。
 
position: fixed;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
                /*固定定位：将元素固定到页面的某个位置*/
				position: fixed;
				top: 80%;
				left: 90%;
			}
			
		</style>
	</head>
	<body>
		
		<div>
			<a href="#top">置顶</a>
		</div>
		<a name="top"></a><!--下锚点-->
		
		<a href="#new01">法治</a><!--定位到锚点处-->
		<a href="#new02">国际</a><!--定位到锚点处-->
		<a href="#new03">娱乐</a><!--定位到锚点处-->
		
		<a name="new01"></a><!--下锚点-->

		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<a name="new02"></a><!--下锚点-->
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<a name="new03"></a><!--下锚点-->
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		
		
		
	</body>
</html>

 
 

浮动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#manager{
				border: orange 1px solid;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				border: red 1px solid;
				
				float: left;
			}
			
			#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				float: left;
			}
			
		
		</style>
	</head>
	<body>
		
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
		</div>
		
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#manager{
				border: orange 1px solid;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				border: red 1px solid;
				
				float: left;
			}
			
			#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				float: left;
			}
			
			.clear{
				clear: both;/*清除浮动效果*/
			}
		</style>
	</head>
	<body>
		
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div class="clear"></div>
		</div>
		
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#manager{
				border: orange 1px solid;
			}
			
			#box01{
				width: 50%;
				height: 100px;
				
				float: left;
			}
			
			#box02{
				width: 50%;
				height: 100px;
				
				float: right;
			}
			
			.clear{
				clear: both;/*清除浮动效果*/
			}
		</style>
	</head>
	<body>
		
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div class="clear"></div>
		</div>
		
	</body>
</html>

扩展：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			body{
				background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;
			}
			
			input{
				width: 100px;
				height: 50px;
				color: white;
				font-weight: bolder;
				background-color: orange;
				border-radius: 5px;/*圆角属性*/
				box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
				text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
			}
			
			img{
                /*圆形*/
				border-radius: 50%;
			}
			
		</style>
	</head>
	<body>
		
		<input type="button" value="普通按钮" />
		<br />
		<img src="../img/花.jpg" width="100px" height="100px" />
		
	</body>
</html>
欧阳大帅哥
关注
  • 25
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS盒子模型与浮动定位
CYL_2021的博客
03-24 1011
文章目录一.CSS盒子模型1.1 盒子模型的组成1.2 边框（border）1.3 内边距（padding）1.4 外边距（margin）1.4.1 设置盒子水平居中1.4.2 外边距合并 页面布局要学习三大核心是：盒子模型, 浮动 和 定位. 一.CSS盒子模型 1.1 盒子模型的组成 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：元素内容（content），内边距（padding），边框
CSS 盒子模型、浮动、定位
qq_39903918的博客
03-01 323
这里写目录标题1. 盒子模型1.1 概述1.2.1 语法和属性1.2.2 案例1.2.3 表格细边框1.3 内边距1.3.1 语法和属性1.3.2 案例1.4 外边距1.4.1 语法和属性1.4.2 盒子水平居中1.4.3 清除默认内外边距1.4.4 外边距合并/塌陷1.4.4.1 相邻元素1.4.4.2 嵌套元素1.4.5 宽度和高度1.4.6 使用优先级1.5 扩展-圆角边框1.6 扩展-盒子阴影2. 浮动2.1 标准流2.2 浮动2.3 属性2.4 特征
CSS盒子模型
LiLi的博客
12-22 6410
CSS盒子模型（Box Model） 概念 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin），边框（border），内边距（padding），和实际内容（content） 1 Margin(外边距) - 清除边框外的区域，外边距是透明的 2 Border(边框) - 围绕在内边距和内容外的边框 3 Padding(内边距) - 清除内容周围的区域，内边距是透明的 4 Co
CSS高级操作 -盒子模型-浮动-position定位
weixin_57614141的博客
02-24 606
盒子模型 margin 外边距 border 边框 padding 内边距
CSS盒子模型的应用
08-22
**CSS盒子模型详解** 在网页设计中，CSS（层叠样式表）盒子模型是一个至关重要的概念，它定义了网页元素如何占用空间并与其他元素交互。理解盒子模型对于精确控制页面布局至关重要。本篇文章将深入探讨CSS盒子模型...
CSS教程之CSS盒模型
09-27
在网页设计中，每个HTML元素都可以被看作是一个矩形的盒子，这个概念被称为CSS盒模型。盒模型定义了元素的尺寸如何计算，包括内容区域、内边距（padding）、边框（border）以及外边距（margin）。 1. **盒模型的...
网页设计学习教程 CSS盒模型
09-25
**绝对定位的盒子**：当元素设置为绝对定位且未指定宽度时，宽度由其内容决定，直到达到父元素的宽度（最近的相对定位父元素或浏览器窗口）。 **浮动盒子**：无宽度的浮动元素同样遵循内容宽度原则，直到达到其父...
详解CSS布局中浮动问题的四种解决方案
11-19
不过，随着CSS布局技术的发展，例如Flexbox和Grid布局的出现，这些问题在新的布局模型下已经得到了更好的解决，它们能够更自然地处理元素的排列和对齐，而不需要依赖浮动。但了解并掌握这些传统方法对于理解CSS布局...
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 1359
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
最新！CSSCI（2023-2024）期刊目录公布！
2301_76900678的博客
07-19 271
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1318
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 700
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
Html_Css问答集(11)
白话魔法师
07-16 801
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 740
介绍css和xpath，设置相对定位的基础使用
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 330
屏幕四周出现律动的红色边框，产生报警提示的效果。
如何利用 CSS 动画和过渡效果来增强用户交互体验？
xy520521的博客
07-16 150
动态交互效果：通过结合CSS动画和JavaScript，可以实现动态的交互效果。通过定义关键帧，在不同的时间点改变元素的样式，可以创建各种复杂的动画效果。过渡延迟与持续时间：通过调整CSS过渡的延迟和持续时间，可以实现不同的交互效果。延迟可以用来创建一定的悬停效果，持续时间可以用来控制过渡的速度。渐变过渡：使用CSS过渡属性，比如transition，来实现元素的平滑过渡效果。淡入淡出效果：使用CSS的opacity属性来实现元素的淡入淡出效果。可以通过改变元素的透明度来实现平滑的淡入淡出过渡效果。
编织文字的魔法：探索WebKit的CSS文本效果
最新发布
2401_85341950的博客
07-19 432
WebKit，作为众多浏览器的核心引擎，支持一系列CSS文本效果，使开发者能够创造出引人注目的文本样式。本文将深入探讨WebKit对CSS文本效果的支持，并提供详细的解释和代码示例。请注意，本文提供了一个关于WebKit CSS文本效果的概述，包括代码示例和关键概念的解释。通过本文的介绍，你应该对WebKit的CSS文本效果有了基本的了解。通过本文，我们希望能够帮助开发者更好地利用WebKit的CSS文本效果，创造出更加丰富和吸引人的Web页面。通过媒体查询，可以为不同屏幕尺寸的设备应用不同的文本效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值