HTML5 CSS 三种布局方式：流式布局、浮动布局、定位布局；内外边距的使用注意要点

最新推荐文章于 2024-05-14 18:25:49 发布

sima-kking

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量1.4k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43353088/article/details/109124830

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、三种布局方式

1…流式布局按照从上到下的运行方式进行布局

2.浮动布局 float left right
a.元素浮动后，会脱离文档流
b.元素在遇到另外一个元素边框时，会停止
c.文字不能被浮动元素所覆盖，而是会呈现一种包围效果
d.行内元素浮动后可被设置宽高
3.定位布局

代码实现如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 100px;
			}
		
			.box0{
				background-color: black;
				/*浮动*/
				float:left;
			}
			.box01{
				width: 300px;
				background-color:yellow;
				float:left;
			}
			.box02{
				width:300px;
				height: 300px;
				background-color: blue;
				/*float: right;*/
			}
			/*a{
				width: 200px;
				height: 200px;
				background-color: aqua;
				
				float: left;
			}*/
		</style>
	</head>
	<body>
		
		<!--3个div大小一样，颜色不一样
			布局方式:
			1.流式布局  按照从上到下的运行方式进行布局
			2.浮动布局  float left right
				a.元素浮动后，会脱离文档流
				b.元素在遇到另外一个元素边框时，会停止
				c.文字不能被浮动元素所覆盖，而是会呈现一种包围效果
				d.行内元素浮动后可被设置宽高
			3.定位布局
		-->
		<div class="box0"></div>
		<div class="box01"></div>
		<div class="box02"></div>
		<a href="http://www.baidu.com">行内元素</a>
	
	</body>
</html>

内外边距

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box01{
				width: 300px;
				height: 300px;
				background-color: black;
				
				/*边框*/
				border: 5px solid blue;
				
				/*内边距: padding-left/top/right/bottom */
				padding-left: 100px;
				padding-top: 100px;
				
				/*外边距:margin-left/top/right/bottom*/
				margin-left: 100px;
				
			}
			.box02{
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
			
			.box03{
				width: 300px;
				height: 300px;
				background-color: black;
				
				/*边框*/
				border: 5px solid blue;
				
				/*内边距: padding-left/top/right/bottom
						padding: 
							100px值：在四个方向添加内边距
							100px 50px:上下， 左右
							100px 50px 150px:上 ，左右 ，下
							100px 50px 150px 100px:上，右，下，左（顺时针）
				 *  */
				padding:100px 50px 150px 100px;
				 
				/*外边距:margin-left/top/right/bottom*/
				margin-left: 100px;
				
			}
		</style>
	</head>
	<body>
		<div class="box01">
			<div class="box02"></div>
		</div>
		
		<div class="box03">
			<div class="box02"></div>
		</div>
	</body>
</html>

注意要点：
1.内边距将元素变大：
a.在对应方向上的宽高减去内边距
b.使用 box-sizing: border-box;
元素占据页面空间=元素宽高+外边距（当内边距大于元素宽度，失去作用）

2.margin 与padding的使用方式一致
margin-top 在给子元素设置向上的外边距时，经常会出现子元素拖动父元素一起向下移动。
解决办法:
a.将margin-top–>padding-top使用
b.给父标签设置边框

3.边距相融
两边距同时向一个方向产生距离时，会产生边距相融，谁的大听谁的

4.块元素居中
水平居中
margin: auto;
垂直居中，通过计算像素
margin-top: 100px;

如果本文对你有用，欢迎点赞！

sima-kking

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
HTML5 CSS 三种布局方式：流式布局、浮动布局、定位布局；内外边距的使用注意要点

一、三种布局方式1…流式布局按照从上到下的运行方式进行布局2.浮动布局 float left right&empsa.元素浮动后，会脱离文档流b.元素在遇到另外一个元素边框时，会停止c.文字不能被浮动元素所覆盖，而是会呈现一种包围效果d.行内元素浮动后可被设置宽高三级目录三级目录...
复制链接

扫一扫