DAY48-前端入门-文档流、浮动布局、清浮动、流式布局、定位布局
一、文档流
1.什么是文档流
文档：页面主体
文档流：又叫普通流/常规流，时一个连续具有逻辑上下的页面主题。
理解：出现在页面中的显示内容，均可以理解为在文档流中。
概念：将窗体自上而下分成一行一行，块级元素从上至下、行内元素从左至右的顺序依次排放元素。
2.BFC
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>
BFC默认水平布局时从左至右
float:left;
更改水平布局从右至左
float: right;
二、浮动布局
浮动布局就是为了让块元素能同行显示
part1
<!-- 解决的问题：让block box同行显示 -->
div class="eg">
<div class="article">
<img src="../day47/icon5.png" alt="">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>
</div>
<style>
.sup{
width: 300px;
height: 300px;
background-color: orange;
}
.sub{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%
}
/*BFC横向布局规则为从左至右，且block box同行显示(之间没有间隔)*/
/*注：从左至右可以理解横坐标正方向为右*/
.sub{
float: left;
}
/*BFC横向布局规则为从右至左，且block box同行显示(之间没有间隔)*/
/*注：从右至左可以理解横坐标正方向为左*/
.sub{
float: right;
}
.p2{
display: none;
}
</style>
part2
浮动的基本语法
<div class="p2">
<div class="sup">
<div class="sub">1</div>
<div class="sub">2</div>
</div>
</div>
<style>
.sup{
width: 300px;
height: 300px;
background-color: orange;
}
.sub{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%
}
/*BFC横向布局规则为从左至右，且block box同行显示(之间没有间隔)*/
/*注：从左至右可以理解横坐标正方向为右*/
.sub{
float: left;
}
/*BFC横向布局规则为从右至左，且block box同行显示(之间没有间隔)*/
/*注：从右至左可以理解横坐标正方向为左*/
.sub{
float: right;
}
.p2{
display: none;
}
</style>
part3
浮动会产生的坑
<div class="p3">
<div class="sp">
<div class="sb"></div>
<div class="sb"></div>
</div>
<div class="br">123313123123123131213</div>
</div>
<style>
.sp{
width: 300px;
background-color: orange;
}
.sb{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%
}
.sb:nth-child(2){
/*文本层次高于背景层次*/
/*2的背景只能遮挡1的背景，但不能遮挡1的文本*/
/*margin-top: -100px;
background-color: pink;*/
/*父级的高度取决于逻辑最后位置上的子级的盒子低端*/
}
.sb{
float: left;
}
/*显示区域重叠,文本区域正常*/
.br{
width: 300px;
height: 100px;
background: yellowgreen;
}
/*恢复正常:父级刚好用于存放所有子级的合适高度*/
.sp{
height: 100px;
}
/*总结:当目标标签的内部有浮动的子级,目标标签的兄弟标签布局会出现显示异常*/
</style>
三、清浮动
通常文档流中,子标签在父级标签未设置高度的情况下,会撑开父级高度，脱离文档流后子级标签,不在撑开父级高度。
不完全脱离文档流(浮动后的结果)：不清浮动,不会撑开父级高度,清浮动后,会撑开父级的高度
清浮动的本质:让父级获得合适的高度
<div class="sup">
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="br">
</div>
<style>
.sup{
width: 300px;
background-color: orange;
}
.sub{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%
}
.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*/
/*.br{
clear: both;
}*/
/*4.设置自身伪类:after*/
.sup:after{
content: '';
display: block;
clear: both;
}
</style>
四、流式布局
目的:让布局脱离固定值限制,可以根据页面情况改变相应发生改变
<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>
<style>
.box{
/*百分比流式*/
/*参考父级*/
/*width: 90%;*/
/*窗口比*/
width: 90vw;
max-width: 1000px;
min-width: 600px;
height: 600px;
background-color: orange;
margin: 0 auto;
}
.b{
width: 100px;
height: 100px;
background:red;
border-radius: 50%;
float: left;
}
body{
font-size: 30px;
}
.txt{
font-size: 0.4em;
/*em为最近设置字体大小的父级规定的字体大小*/
font-size: 1rem;
/*rem为html设置的字体大小*/
}
</style>
五、定位布局
目的:让目标标签在制定参考系下,任意布局
基本语法:
1.通过position设置定位是否开启
static:静态,默认值,为定位
relative:相对定位,未脱离文档流
absolute:绝对定位,完全脱离文档流
fixed:固定定位,完全脱离文档流
2.定位开启后,四个定位方位便会开启,且四个方位均参与布局,如果发生冲突,左右取左,上下取上
<div class="box"></div>
br*100
<style>
.box{
width: 150px;
height: 300px;
background-color: orange;
/*定位*/
position: fixed;
/*打开了布局方位*/
left: 10px;
top: calc(50vh - 150px);
}
</style>
相对布局
<div class="b1"></div>
<div class="b2"></div>
<style>
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;
/*总结:方位布局只改变盒子显示区域,不改变盒子原有位置*/
/*3.参考系:相对定位参考系为自身原有位置*/
right: 30px;
/*总结:方位布局就是显示区域上下左右距离自身原始位置上下左右*/
/*4.left=-right top=-bottom,同时存在,左右取左,上下取上*/
}
</style>
绝对定位
<div class="sup">
<div class="sub"></div>
</div>
<style>
.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;
/*注:如果父级只是辅助子级进行绝对定位,那么一定选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响*/
}
.sub{
/*2.参考系:为最近的定位父级*/
position: absolute;
left: 0px;
top: 0px;
/*父级:sup(为定位) -> body(为定位) -> html(文档窗口)*/
/*总结:*/
/*3.同时存在,左右取左,上下取上*/
}
</style>
固定定位
<!-- 1.完全脱离文档流 -->
<!-- 2.参考系为文档窗口 -->
<!-- 3.左右取左，上下取上 -->
<div class="sup">
<div class="sub"><h1>徐诚琦大傻逼</h1></div>
</div>
<style>
.sup{
width: 500px;
height: 500px;
background-color: orange;
margin: 0 auto;
}
.sub{
width: 200px;
height: 200px;
background-color: red;
}
.sub{
position: fixed;
left: 0;
margin-top: 0;
}
</style>
