浮动布局 流式布局 定位布局 html代码示例
文档流
document flow=> normal flow
本质：普通流/常规流
流：水流 河流... => 自上而下（连续的，连续的
文档：页面主体
文档流：一个连续具有上下逻辑的页面整体
理解：出现在页面中的显示内容，均可以理解为在文档流中（片面的）
概念：将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素
BFC：Block formatting context
概念：由blck-level box 参与布局，同一区域（容器空间）中，相互影响，且不会对空间区域外产生影响
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>文档流</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:orange;
/* 默认BFC布局方向，从左到右： */
margin-left:50px;
/* 默认BFC、水平布局方向 */
/* 更改BFC水平布局方向：从右至左 */
float: right;
margin-right:-50px;
}
.b1{
width:200px;
height:200px;
background-color:red;
margin-left:10px;
}
.bb1,.bb2{
width:50px;
height:50px;
background:cyan;
float: left;
}
.bb1{
margin-left:20px;
margin-right:20px;
}
.bb2{
margin-left:20px;
}
</style>
</head>
<body>
document flow=> normal flow
<!-- b1 b2 同在一个区域 | bb1 和bb2同在一个区域 -->
<div class="b1">
<div class="bb1"></div>
<div class="bb2"></div>
</div>
<div class="b2">
</div>
</body>
</html>
浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浮动布局</title>
<!-- part1 -->
<style type="text/css">
.article{
width:450px;
border:1px solid #333;
padding:0;
}
.p1 img{
width:200px;
/* 块级：独占一行 */
display:block;
/* 浮动后：可以同行显示（只占自身显示区域） */
float: left;
margin-right:15px;
}
.p1{
display:none;
}
</style>
<!-- part2 -->
<style type="text/css">
.p2{
width:300px;
height:300px;
background-color:orange;
}
.sub{
width:100px;
height:100px;
background-color:red;
}
/* float: left; BFC横向布局规则为从左至右，且block box 同行显示(之间没有间隔) */
/* 注：从左至右可以理解横坐标正方向为右 */
.sub{
float: left;
}
/* float: right; BFC横向布局规则为从右至左，且block box 同行显示(之间没有间隔) */
/* 注：从右至左可以理解横坐标正方向为左 */
.sub{
float: right;
}
.sub:nth-child(2){
margin-right:-100px;
}
/* 隐藏p2 */
.p2{
display:none;
}
</style>
<!-- part3 -->
<style type="text/css">
.sup{
width:300px;
background-color:orange;
}
.sup1{
width:100px;
height:100px;
background-color:red;
border-radius:50%;
}
.sup1:nth-child(2){
/* margin-top:-100px; */
/* 文本层次高于背景层次 */
/* 2的背景只能遮挡1的背景，但不能遮挡1的文本 */
/* background-color:pink;
margin-top:-80px; */
/* 父级的高度最终决定于逻辑最后位置上的子级的盒子底端 */
}
/* 显示区域重叠，文本区域正常(与显示区域共同讨论就不正常) */
.br{
width:300px;
height:100px;
background-color:yellowgreen;
}
/* 恢复正常：父级刚好拥有存放所有子级的高度（合适高度） */
.sup{
height:100px;
}
.sup1{
float:left;
}
/* 总结（坑）：当target标签的内部有浮动的子级，target的兄弟标签布局会出现显示异常 */
</style>
</head>
<body>
<!-- part3 -->
<!-- 浮动产生的问题:父级未设置固定高度，不再撑开父级高度 -->
<div class="p3">
<div class="sup">
<div class="sup1">1</div>
<div class="sup1">2</div>
</div>
<div class="br">1231222222222222223</div>
</div>
<!-- part2 -->
<!-- 基本语法: float：left|right -->
<div class="p2">
<div class="sub">1</div>
<div class="sub">2</div>
</div>
<!-- part1 -->
<!-- 解决的问题:让block box 同行显示 -->
<div class="p1">
<div class="article">
<img src="icon.jpg" alt="">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
</body>
</html>
清浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>清浮动</title>
<style type="text/css">
.sup{
width:300px;
/* height:50px; */
background-color:orange;
}
.sub,.sub1{
width:100px;
height:100px;
background-color:red;
border-radius:50%;
font:900 40px/100px "STSong";
text-align:center;
}
.br{
width:200px;
height:200px;
background-color:pink;
}
.sub{
float: left;
}
/* 清浮动对象：拥有浮动子级的父级 sup */
/* 方式1 */
/* 设置自身高度 */
/* .sup{
height:100px;
} */
/* 方式2 */
/* 设置自身overflow:hidden; */
/* .sup{
overflow:hidden;
} */
/* 设置兄弟标签的clear:left | right | both */
/* .sub1{
float:right;
} */
/* .br{
clear:left;
}
*/
/* 方式三 */
/* 设置自身：after伪类 */
.sup:after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<!-- 不完全脱离文档流 -->
<!-- 通常文档流中，子标签在父级标签未设置高度的情况下，会撑开父级的高度 -->
<!-- 脱离文档流后的子级标签，不在撑开父级高度 -->
<!-- 不完全脱离文档流（浮动后的结果），不清浮动，不会撑开父级的高度。清浮动后，会重新撑开父级高度 -->
<!-- 清浮动本质：让父级获得合适的高度 -->
<div class="sup">
<div class="sub">1</div>
<div class="sub">2</div>
<!-- <div class="sub1">2</div> -->
</div>
<div class="br"></div>
</body>
</html>
流式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>流式布局</title>
<style type="text/css">
.box{
/* 百分比流式 */
/* 参考最近父级 */
/* width:90%; */
/* max-width:900px;
min-width:600px; */
/* 窗口比 */
/* width:90vw;
max-width:900px;
min-width:600px; */
height:600px;
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;
}
.text{
/* 1em=16px 不一定*/
/* font-size:1em; */
/* font-size:16px; */
/* font-size:0.4em; */
/* em为最近设置字体大小的父级规定的字体大小 */
font-size:1rem;
/* rem为html字体大小 */
}
html{
font-size:40px;
}
</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 class="b"></div>
<div class="b"></div>
</div>
<div class="sup">
<div class="text">wenben</div>
</div>
</body>
</html>
定位布局
<!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>
<!-- 基本语法： -->
<!-- 1.通过position设置定位 -->
<!-- position 四个值：
1.static：静态，未定位（默认值）
2.relative：相对定位，未脱离文档流,会撑开父级，效果是定于那个位置
3.absolute：绝对定位，完全脱离文档流，不会撑开父级 效果是相当于定于那个位置
4.fixed：固定定位，完全脱离文档流 -->
<!-- 2.定位开启后，四个定位方位变回开始，且四个方位均参与布局
如果发生冲突 左右取左，上下取上 -->
</head>
<body>
<!-- 定位布局的目的（应用）：让目标（目标要被布局的）标签在指定参考系下任意布局 -->
<div class="box"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
相对定位
<!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>
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绝对定位</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
background-color:red;
}
.b2{
background-color:orange;
}
.b1{
/* 1.完全脱离文档流 */
/* position:absolute; */
/* 总结：不在文档流中占位，也永远不会撑开父级高度，永远不会影响兄弟布局，显示层高于文档流显示层 */
/* 打开定位方位 */
/* margin-left:100px;
margin-top:100px; */
/* 总结：margin依旧可以影响自身布局，但不会影响父级即兄弟布局 */
/* 2.参考系在下面sup sub 例子 */
/* 3.同时存在，左右取左，上下取上 */
/* left:30px; */
/* right:100px; */
}
.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; */
/* 绝对定位好处：如果自身已经采用绝对定位布局了，name子级一定参考自身进行定位
*/
margin:100px auto;
/* margin-top margin-bottom 起作用 margin-left，margin-right 没有起作用，详细解释在下面的注。 */
position:absolute;
/* 注：如果父级只是辅助子级进行绝对定位，name一定优先相对定位，因为绝对定位会产生新的BFC，导致盒模型布局会受影响 */
/* 注：margin-top|left 依旧起作用，只是sup已经脱离文档流，不会或得到body宽度，所以auto没有参考值 */
}
.sub{
/* 2.参考坐标系为最近的定位父级 */
position:absolute;
/* left:0; */
top:0;
/* 父级：sup(未定位)->body(未定位)->html(文档窗口) */
}
</style>
</head>
<body>
<!-- <div class="b1"></div>
<div class="b2"></div> -->
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
固定定位
<!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 />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
