前端网页学习 Day48(文档流 浮动布局 流式布局 定位布局)

最新推荐文章于 2023-03-30 11:11:43 发布
最新推荐文章于 2023-03-30 11:11:43 发布
阅读量395 收藏 1
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sql121407/article/details/82872053
版权

前端网页学习(html)

DAY48

今日内容:

文档流

浮动布局

清浮动

流式布局

定位布局(相对定位 绝对定位 固定定位)

文档流

本质:普通流/常规流

文档指的是页面主体

文档流指的是一个连续具有逻辑上下的页面整体

概念:将窗体自上而下分成一行一行,块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素

BFC:Block formatting context

概念:由block-level box 参与布局,同一区域(容器)中,相互影响,且不会对区域外产生影响

<!-- b1与b2 同在一个区域 | bb1与bb2 同在一个区域 -->
<div class="b1">
    <div class="bb1"></div>
    <div class="bb2"></div>
</div>
<div class="b2">
</div>

浮动布局

浮动布局就是为了让块元素能同行显示

问题:实现文本环绕

<div class="eg">
		<div class="article"><img src="图片" alt="">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
	</div>

设置css样式

<style type="text/css">
    .article {
        width: 300px;
        border: 1px solid black;
    }
    .eg img {
        width: 148px;
        /*块级:独占一行*/
        display: block;
        /*浮动后:可以同行显示(只占自身显示区域)*/
        float: left;
    }
    .eg {
        display: none;
    }
</style>

基本语法: float : left | right

<div class="p2">
	<div class="sup">
		<div class="sub">1</div>
		<div class="sub">2</div>
	</div>
</div>

CSS样式

<style type="text/css">
		.sup {
			width: 300px;
			height: 300px;
			background-color: orange;
		}
		.sub {
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50%;
			font: 900 40px/100px 'STSong';
			text-align: center;
		}
		/*BFC横向布局规则为从左至右,且block box同行显示(之间没有间隔)*/
		/*注: 从左至右可以理解横坐标正方向为右*/
		.sub {
			float: left;
		}
		/*BFC横向布局规则为从右至左,且block box同行显示(之间没有间隔)*/
		/*注: 从右至左可以理解横坐标正方向为左*/
		.sub {
			float: right;
		}
		/*.sub:nth-child(2) {
			margin-right: -100px; 
		}*/
		.p2 {
			display: none;
		}
</style>

浮动产生的问题:

父级未设置固定高度,不再撑开父级高度

<div class="p3">
    <div class="sp">
        <div class="sb">1</div>
        <div class="sb">2</div>
    </div>
    <div class="br">12345123451234512345123</div>
</div>

CSS样式

<style type="text/css">
		.sp {
			width: 300px;
			background-color: orange;
		}
		.sb {
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50%;
			font: 900 40px/100px 'STSong';
			text-align: center;
		}
		.sb:nth-child(2) {
			/*margin-top: -80px;*/
			/*文本层次高于背景层次*/
			/*2的背景只能遮挡1的背景,但不能遮挡1的文本*/
			/*background-color: pink;*/
			/*父级的高度最终决定于逻辑最后位置上的子级的盒子底端*/
		}

		.sb {
			float: left;
		}
		/*显示区域重叠,文本区域正常(与显示区域共同讨论就不正常)*/
		.br {
			width: 300px;
			height: 100px;
			background-color: yellowgreen;
		}
		/*恢复正常:父级刚好拥有存放所有子级的高度(合适高度)*/
		.sp {
			height: 100px;
		}
		/*总结(坑):当target标签的内部有浮动的子级,target的兄弟标签布局会出现显示异常*/
</style>

清浮动

清浮动的本质就是让父级获得合适的高度

通常文档流中,子标签在父级标签未设置高度的情况下,会撑开父级的高度

脱离文档流的子标签不会撑开父级高度

不完全脱离文档流,即浮动之后,不清除浮动就不会撑开父级高度

清浮动后,才会重新撑开父级高度

清浮动基本格式

/*清浮动的对象:用于浮动子级的父级 sup*/
/*① 设置自身高度*/
/*.sup {
	height: 100px;
}*/
/*② 设置自身overflow: hidden*/
/*.sup {
	overflow: hidden;
}*/
/*③ 设置兄弟标签的clear: left | right | both*/
/*.s2 {
	float: right;
	height: 50px;
}
.br {
	clear: both;
}*/

/*④ 设置自身:after伪类*/
.sup:after {
	content: "";
	display: block;
	clear: both;
}

流式布局(% vw vh rem em)

目的:让布局脱离固定值的限制,可以根据页面情况的改变相应的发生改变

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>流式布局</title>
	<style type="text/css">
		html, body {
			width: 100%;
			margin: 0;
		}
		.box {
			/*百分比流式*/
			/*参考最近父级*/
			width: 90%;
			/*max-width: 1000px;*/
			/*min-width: 600px;*/

			/*窗口比*/
			/*width: 90vw;*/
			/*max-width: 1000px;*/
			/*min-width: 600px;*/

			height: 300px;
			background-color: orange;
			margin: 0 auto;
		}
		.b {
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50%;
			float: left;
		}
		
		body {
			font-size: 30px;
		}
		/*.sup {
			font-size: 20px;
		}*/
		.txt {
			/*1em = 16px*/
			/*font-size: 16px;*/
			/*font-size: 0.4em;*/
			/*总结:em为最近设置字体大小的父级规定的字体大小*/
			font-size: 1rem;
			/*总结:rem为html字体大小*/
		}
		html {
			font-size: 50px;
		}
	</style>
</head>
<body>
	<div class="box">
	 	<div class="b"></div>
	 	<div class="b"></div>
	 	<div class="b"></div>
	 	<div class="b"></div>
	 	<div class="b"></div>
	 	<div class="b"></div>
	 	<div class="b"></div>
	 	<div class="b"></div>
	 </div> 

	 <div class="sup">
	 	<div class="txt">文本</div>
	 </div>
</body>
</html>

定位布局应用

目的:让目标标签在指定参考系下任意布局

基本语法 :postion: static | relative | absolute | fixed

通过position设置定位是否开启

static: 静态, 未定位(默认值)

relative:相对定位,未脱离文档流

absolute:绝对定位,完全脱离文档流

fixed:固定定位,完全脱离文档流

注:定位开启后,四个定位方位便会开启,且四个方位均参与布局

如果发生冲突,左右取左,上下取上

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>定位布局应用</title>
	<style type="text/css">
		.box {
			width: 150px;
			height: 300px;
			background-color: orange;
			/*定位了*/
			position: fixed;
			/*打开了布局方位*/
			left: 10px;
			top: calc(50vh - 150px);
		}
	</style>
</head>
<body>

	<div class="box"></div>
	br*100 /*tab测试*/ 
    
</body>
</html>

相对定位(relative)

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.b2 {
			background-color: orange;
		}

		/*不做定位操作*/
		/*b1,b2均在文档流中,b1的布局会影响到b2*/
		/*.b1 {
			margin-top: 30px;
			margin-bottom: 30px;
		}*/

		/*固定定位后*/
		.b1 {
			/*1.未脱离文档流*/
			/*BFC规则下margin布局,上盒子依旧会影响下盒子*/
			/*margin-top: 30px;
			margin-bottom: 30px;*/

			/*开启定位*/
			position: relative;
			/*具有定位方位*/
			/*2.方位布局下,上盒子不会影响下盒子*/
			/*left: 30px;
			top: 30px;*/
			/*总结:方位布局只改变盒子显示区域,不改变盒子原有位置*/

			/*margin-top: 30px;*/
			/*3.参考系:相对定位参考系为自身原有位置*/
			/*right: 30px;*/

			/*总结:方位布局就是 显示区域上|下|左|右距离自身原始位置上|下|左|右的间隔*/

			/*4.left=-right top=-bottom,同时存在,左右取左,上下取上*/
			left: -30px;
			right: -100px;
		}
	</style>
</head>
<body>
	<div class="b1"></div>
	<div class="b2"></div>
</body>
</html>

绝对定位(absolute)

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.b2 {
			background-color: orange;
		}
		.b1 {
			/*1.完全脱离文档流*/
			position: absolute;
			/*总结:不在文档流中占位,也永远不会撑开父级高度,永远不会影响兄弟布局,显示层高于文档流层*/
			/*打开定位方位*/
			margin-left: 100px;
			margin-top: 100px;
			/*总结:margin依旧可以影响自身布局,但不会影响父级即兄弟布局*/

			/*2.参考系:?*/
			left: 100px;
			right: -100px;

			/*3.同时存在,左右取左,上下取上*/
		}


	</style>
	<style type="text/css">
		.sup {
			width: 500px;
			height: 500px;
			background-color: orange;
		}
		.sub {
			width: 200px;
			height: 200px;
			background-color: red;
		}

		.sup {
			/*采用了盒模型布局*/
			margin: 0 auto;
			/*需求:sub应该参考sup,sup需要定位:相对|绝对|固定*/
			/*相对定位好处:父级不会脱离文档流,满足所有的盒模型布局*/
			/*position: relative;*/
			/*绝对定位好处:如果自身已经采用绝对定位布局了,那么子级一定参考自身进行定位*/
			position: absolute;
			margin: 100px 100px;
			/*注:如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响*/
			/*注:margi-top|left依旧起作用,只是sup已经脱离文档流,不会获得到body宽度,所以auto没有参考值*/
		}
		.sub {
			/*2.参考坐标系为最近的定位父级*/
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			/*父级: sup(未定位) -> body(未定位) -> html(文档窗口)*/

			/*3.同时存在,左右取左,上下取上*/
		}
	</style>
</head>
<body>
	<!-- <div class="b1"></div>
	<div class="b2"></div> -->
	<div class="sup">
		<div class="sub"></div>
	</div>
</body>
</html>

固定定位(fixed)

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style type="text/css">
		.sup {
			width: 500px;
			height: 500px;
			background-color: orange;
			margin: 0 auto;
		}
		.sub {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.sup {
			position: relative;
			position: absolute;
		}
		.sub {
			position: fixed;
			left: 0;
			/*top: 0;*/
			bottom: 0;
		}
	</style>
</head>
<body>
	<!-- 固定定位 -->
	<!-- 1.完全脱离文档流 -->
	<!-- 2.参考系为文档窗口 -->
	<!-- 3.左右取左,上下取上 -->
	<div class="sup">
		<div class="sub"></div>
	</div>
	br*100 /*tab测试*/
</body>
</html>

以上为本次学习内容

A_GooD_CanceR
关注
关于前端布局---流式布局
CJB2020818的博客
09-13 1195
@[TOC]关于前端布局 前端的布局按其编写过程复杂程度可以分为传统布局与新式布局； 传统布局 所谓的传统布局就是不依赖与框架，主要是程序员根据CSS与HTML样式属性的运用来写的原生布局，比如dispaly、position、float等。 这种布局方式对程序员的基础知识要求较高，要会使用特定的样式属性，以及了解其使用的注意事项或者后期对布局的影响进行调试。但是，传统布局方式最大的好处就是其兼容性很好，对于IE6、IE7浏览器也能很好的兼容。 现代布局 新式布局，是对传统布局中存在的一些遗留疑难的解
前端学习（九）流式布局
whitefish520的博客
08-09 9412
流式布局的概念 流式布局，也就是百分比布局 将盒子的宽度设置成百分比，根据屏幕的实际宽度进行伸缩，不受固定像素的限制，内容向两侧填充 设置max-width，min-width，使得内容在合理的范围内 流式布局的常用技巧 设置视口 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"> 选择默认的样
前端学习 -- Css -- 文档流
A08110123的博客
04-27 127
文档流 文档流处在网页的最底层，它表示的是一个页面中的位置， 我们所创建的元素默认都处在文档流中 元素在文档流中的特点 块元素 块元素在文档流中会独占一行，块元素会自上向下排列。 块元素在文档流中默认宽度是父元素的100%。 块元素在文档流中的高度默认被内容撑开。 内联元素 　　1.内联元素在文档流中只占自身的大小，会默认从左向...
前端之流式布局
qq_58877067的博客
10-01 232
inline-block:用了之后会有间隙，可以把他放到一排，就可以了没有空隙了 vertical-align:必须作用与inline-block类型，改变的是对齐方式，不是垂直居中的，可以加行高实现对齐； z-index:根据其数值的大小对齐，大的居上 关于透明度：opacity:background:rgba(R,G,B,透明度) 当单图片撑开不能对齐的时候，可以设置：vertical-align：middle(中线对齐) flex布局： justify-content: 属性：flex-s
前端之文档流、浮动布局、流式布局、定位布局-39
weixin_33969116的博客
12-27 150
前端之文档流、浮动布局、流式布局、定位布局-39 1.文档流 1.概念:本质为normal flow（普通流、常规流）将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。 ps:本质不存在文档流概念，当一个错误的概念被绝大数人认为是对的，那么它就是对的 2.BFC(block formatting c...
python 12、web前端html，css 4-2_浮动布局、定位布局、其他属性_Day04_PM.mp4
03-13
python 12、web前端html，css 4-2_浮动布局、定位布局、其他属性_Day04_PM.mp4
python 12、web前端html，css 4-1_浮动布局、定位布局、其他属性_Day04_AM.mp4
03-13
python 12、web前端html，css 4-1_浮动布局、定位布局、其他属性_Day04_AM.mp4
前端网页学习 Day49(z-index属性 flex布局 响应式布局 过渡 动画)
sql121407的博客
09-27 1597
前端网页学习(html) DAY49 今日内容: z-index属性 flex布局 响应式布局 过渡 动画 z-index属性 脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意的正整数 &lt;!-- 需求1:d1,d2,d3均为box的一半大小 --&gt; &lt;!-- 需求2:d1左上角,d2居中,d3右下角 --&gt; &lt;!-- 需求3:d2...
前端文档流定义
qq_45797783的博客
07-25 266
文档流： 网页是多层结构的，一层叠着一层 通过css可以设计每一层的样式 浏览器呈现给用户的永远是最顶上一层 文档流是网页的最底下一层，是所有层的基础，所有的元素默认都是在文档流当中排列的 元素有在文档流和不在文档流两种状态 元素在文档流的特点： 1. 块元素： 块元素在页面中会独占一行，自上向下垂直排列 默认宽度是父元素的全部，一般是一整行 默认高度有内容相关 2. 行内元素： 不会独占一行，只与自身大小相关 自左向右排列，一行排不满会向下一行排列，与书写习惯一致 默认高度和默认宽
CSS布局：文档流
沉梦昂志
06-10 659
文档流的特性 文档流中，行内及行内块元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局 空白折叠现象，无论多少个空格、换行、tab，都会折叠为一个空格，想让 span 标签之间没有空隙，必须紧密连接 同一行中，高矮不齐，底边对齐，如 span文本会和图片的最下端对齐 元素中的如果有英文文本会出现不能自动换行的情况，原因是英文文本之间没空格，浏览器会认为这是一个长的单词 脱离文档流，可以理解为元素已经不属于这个文档了，在它的上一层，也
前端---CSS文档流
yangxue123
05-16 1047
CSS的定位机制有3种:   普通流    浮动(float : left / right / none)  和 定位(position : static / relative / absolute) 普通流:正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局...块元素一个接着一个,填满浏览器窗口或其他窗口元素的所有可用宽度...普通流中的对象影响它们周围对象的布局
HTML5+CSS3学习笔记（九）前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
最新发布
Yeee_F
03-30 3670
前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
前端知识点之HTML文档流
Endl_1998的博客
10-05 235
HTML普通流/文档流： 普通流：（nomal flow） 将窗口自上而下分成一行，并在每行中从左到右的依次排放元素，即为普通流/文档流； 内联元素不会独占一行，而每个非浮动块级元素都独占一行，浮动元素按规则浮动在行的一端； 若当时的行容不下，则另起新行在浮动； 浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流； 当一个元素脱离文档流后，在文档流中的其他元素将忽略该...
Web前端学习笔记——文档流
weixin_43121163的博客
02-21 416
什么是文档流？ 文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。 元素在文档流中的特点 1、块元素：①块元素在文档流中会独占一行，块元素会自上向下排列；②块元素在文档流中默认宽度是父元素的100%；③块元素在文档流中的高度默认被内容决定；④当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度和高度以适应内边距。 <...
前端之文档流浮动以及定位
上善若水
09-26 353
一,文档流 (文档流没有实际的意义,只是抽象的一个定义而已),可以理解为,一个连续的具有逻辑上下的页面整体 概念:将窗体自上而下的分成一行一行,块级元素自上而下,行内元素在每行中从左自右的顺序依次排放的元素 BFC:Block formatting context 由block-level box参与布局,同一区域(容器空间)中,相互影响,且不会对区域外产生影响 &lt;!DOCTY...
CSS之布局（文档流）
不动声色的小蜗牛的博客
07-15 247
文档流： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>文档流</title> <style> .box1{ background-color: yellow; } </style> </head> <body> <!-- 文档流（
web前端设计与开发，CSS标准文档流
m0_60305327的博客
07-21 114
面试题 HTML 1，html5有哪些新特性？ 2，html5移除了那些元素？ 3，如何处理HTML5新标签的浏览器兼容问题？ 4，如何区分 HTML 和 HTML5？ CSS 1，CSS 选择符有哪些？ 2，CSS哪些属性可以继承？ 3，优先级算法如何计算？ 4， CSS3新增伪类有那些？ 5，CSS3有哪些新特性？ 6，解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？ 7，BFC（Block Formatting Context） 是什么？应用？ 8，如何实现浏览器内多个标签
浮动与定位：CSS布局的关键
普通流适合基本的文档布局，浮动适用于创建多列布局和文字环绕效果，而定位则用于精确控制元素的位置，特别是在JavaScript特效中。理解并熟练运用这些布局方法是成为一名优秀前端开发者的必备技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值