欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML文档流&CSS中元素的浮动

程序员文章站 2024-01-28 21:40:58
...

日期：2020-10-06

作者：19届WY

标签：HTML文档流，CSS元素的浮动

一、文档流：

  • 文档流处在网页的最里层——它表示的是一个页面中的位置
  • 我们所创建的元素都默认处在文档流中
  • 元素在文档流中的特点
  • 块元素
    1、块元素在文档流中会独占一行，块元素会自上向下排列
    2、块元素在文档流中默认宽度是父元素的100%
    3、块元素在文档流中的高度默认被内容撑开
  • 内联元素
    1、内联元素在文档流中只占自身的大小，会默认从左向右排列
    如果一行中不足以容纳所有的内联元素，则换到下一行
    继续自左向右。
    2、在文档流中，内联元素的宽度和高度默认都被内容撑开
  • 当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小
    而是会自动修改宽度，以适应内边距
<div style="background-color:#bfa;">a</div>
<div style="width:100px;height:100px;background-color:#ff0;"></div>
<span style="background-color: #FFA500;">我是一个span</span>
<span style="background-color: #FFA500;">我是一个span</span>

二、浮动

  • 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，
  • 所以我们可以通过浮动来设置文字环绕图片的效果
.box1{
	width:100px;
	height:100px;
	background-color:yellow;
	/*box1向左浮动*/
	float:left;
}
  • 在文档流中，子元素的宽度默认占父元素的全部
  • 当元素设置浮动以后，会完全脱离文档流
    块元素脱离文档流以后，高度和宽度都被内容撑开
  • 开启span的浮动，
    内联元素脱离文档流以后会变成块元素
.s1{
	float:left;
	width:100px;
	height:100px;
}

三、简单布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*清楚默认样式*/
			*{
				
			}
			/*设置头部div*/
			.header{
				/*设置一个宽度*/
				width:1000px;
				/*设置一个高度*/
				height:200px;
				/*设置一个背景颜色*/
				background-color: #bfa;
				/*设置居中*/
				margin:0 auto;
			}
			/*设置一个content*/
			.content{
				/*设置一个宽度*/
				width:1000px;
				/*设置一个宽度*/
				height:400px;
				/*设置一个背景颜色*/
				background-color:orange;
				/*设置居中*/
				margin:0 auto; 
			}
			/*设置中间content中小div的样式*/
			.left{
				width:200px;
				height:100%;
				background-color: skyblue;
				/*向左浮动*/
				float:left;
				/*设置水平外边距*/
				
			}
			.center{
				width:600px;
				height:100%;
				background-color: purple;
				float:left;
				margin:0 0px;/*影响整个元素占的位置*/
			}
			.right{
				width:200px;
				height:100%;
				background-color: pink;
				float:left;
			}
			.footer{
				/*设置一个宽度*/
				width:1000px;
				/*设置一个宽度*/
				height:100px;
				/*设置一个背景颜色*/
				background-color:grey;
				/*设置居中*/
				margin:10px auto;
			}
		</style>
	</head>
	<body>
		<!-- 头部div -->
		<div class="header"></div>
		
		<!-- 主体内容div -->
		<div class="content">
			<!--左侧div-->
			<div class="left"></div>
			<!--中间div-->
			<div class="center"></div>
			<!--右侧div-->
			<div class="right"></div>
		</div>
		
		<!--  底部信息div-->
		<div class="footer"></div>
		
			
	</body>
</html>

这些盒子都是无缝贴合的
HTML文档流&CSS中元素的浮动

2、给中间盒子加一个外边距
.center{
		width:600px;
		height:100%;
		background-color: purple;
		float:left;
		margin:0 10px;/*影响整个元素占的位置*/

HTML文档流&CSS中元素的浮动
没有考虑好宽度的问题，后面的盒子直接掉下来了

3、考虑宽度的问题
.center{
		width:580px;/*这里改小了20*/
		height:100%;
		background-color: purple;
		float:left;
		margin:0 10px;/*影响整个元素占的位置*/
}

HTML文档流&CSS中元素的浮动
现在间距是正常的

相关标签： # 云麓谷的作业们 css html

上一篇： 尝鲜！我在华为鸿蒙上编写的第一个 Hello World！那些说鸿蒙是PPT的可以闭嘴了!...

下一篇： 前端攻城狮---css3动画属性

推荐阅读