1.文档流
1.概念:本质为normal flow（普通流、常规流）将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。
ps:本质不存在文档流概念，当一个错误的概念被绝大数人认为是对的，那么它就是对的
2.BFC(block formatting context)
概念:块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
3.BFC规则:
① 内部的Box会在垂直方向，一个接一个地放置；
② Box自身垂直方向的位置由margin-top决定，属于同一个BFC的两个相邻Box的margin会发生重叠；
③ Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加
<!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水平布局方向:从右至左*/
float: right;
margin-right: -50px;
}
.b1 {
width: 200px;
height: 200px;
background: red;
margin-left: 10px;
}
.bb1, .bb2 {
width: 50px;
height: 50px;
background: cyan;
float: left;
}
/*与父级b1相当于上下重叠*/
.bb1 {
margin-left: 20px;
margin-right: 20px;
}
/*左右叠加*/
.bb2 {
margin-left: 20px;
}
</style>
</head>
<body>
document flow => normal flow
本质:普通流/常规流
流:水流 河流 泥石流 => 自上而下(连续的),连续的
文档:页面主体
文档流:一个连续具有逻辑上下的页面整体
理解:出现在页面中的显示内容,均可以理解为在文档流中(片面的)
概念:将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。
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="box"></div>
</body>
</html>
2.浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<!-- part1 -->
<style type="text/css">
.article {
width: 300px;
border: 1px solid black;
}
.eg img {
width: 148px;
/*块级:独占一行*/
display: block;
/*浮动后:可以同行显示(只占自身显示区域)*/
float: left;
}
.eg {
display: none;
}
</style>
<!-- part2 -->
<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>
<!-- part3 -->
<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>
</head>
<body>
<!-- part3 -->
<!-- 浮动产生的问题(坑):父级未设置固定高度,不再撑开父级高度 -->
<div class="p3">
<div class="sp">
<div class="sb">1</div>
<div class="sb">2</div>
</div>
<div class="br">1234512345123451234512345</div>
</div>
<!-- part2 -->
<!-- 基本语法:float: left | right -->
<div class="p2">
<div class="sup">
<div class="sub">1</div>
<div class="sub">2</div>
</div>
</div>
<!-- part1 -->
<!-- 解决的问题:让block box同行显示 -->
<!-- eg:文本环绕 -->
<div class="eg">
<div class="article">
<img src="img/icon.jpg" alt="">
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>
</div>
</body>
</html>
3.清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清浮动</title>
<style type="text/css">
.sup {
width: 300px;
background-color: orange;
}
.sub {
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;
}*/
/*3. 设置兄弟标签的clear: left | right | both*/
/*.s2 {
float: right;
height: 50px;
}
.br {
clear: both;
}*/
/*4. 设置自身:after伪类*/
.sup:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 不完全脱离文档流 -->
<!-- 通常文档流中,子标签在父级标签未设置高度的情况下,会撑开父级的高度 -->
<!-- 脱离文档流后的子级标签,不再撑开父级高度 -->
<!-- 不完全脱离文档流(浮动后的结果),不清浮动,不会撑开父级高度,清浮动后,会重新撑开父级高度 -->
<!-- 清浮动本质:让父级获得合适的高度 -->
<div class="sup">
<div class="sub s1">1</div>
<div class="sub s2">2</div>
</div>
<div class="br"></div>
</body>
</html>
4.流式布局
<!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 class="b"></div>
<div class="b"></div>
</div>
<div class="sup">
<div class="txt">文本</div>
</div>
</body>
</html>
5.定位布局应用
<!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设置定位是否开启 -->
<!-- static：静态，未定位（默认值） -->
<!-- relative: 相对定位, 未脱离文档流 -->
<!-- absolute: 绝对定位, 完全脱离文档流 -->
<!-- fixed: 固定定位, 完全脱离文档流 -->
<!-- 2.定位开启后,四个定位方位便会开启,且四个方位均参与布局 -->
<!-- 如果发生冲突,左右取左,上下取上 -->
</head>
<body>
<!-- 目的(应用):让目标(要被布局的)标签在指定参考系下任意布局 -->
<div class="box"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
6.相对定位
<!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>
7.绝对定位
<!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,
导致盒模型布局会受影响*/
/*注:margin-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>
