前端第五天
目录
- 文档流
- 浮动布局
- 清除浮动
- 流式布局
- 定位布局应用
- 相对定位
- 绝对定位
- 固定定位
一、文档流
1、概念
本质为normal flow（普通流、常规流）将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。
v_hint：本质不存在文档流概念，当一个错误的概念被绝大数人认为是对的，那么它就是对的
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会发生叠加。
4、代码示例
<!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;
}
.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>
二、浮动布局
1、解决的经典案例
<style type="text/css">
.box {
width: 300px;
border: 1px solid black;
}
.box img {
width: 150px;
float: left;
}
</style>
<div class="box">
<img src="bg.gif" alt="">
浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布 局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决 的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典 案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例。
</div>
2、基本语法
float: left | right
3、浮动布局问题
- 在不做清浮动情况下，父级不会获取子级的高度
4、清浮动
- 目的：对父级所在容器中的Block-level Box布局不产生影响
- 原理：在浮动布局情况下，让父级获得合适的高度
① 浮动的父级设置高度
super {
height: npx;
}
② 浮动的父级设置overflow
super {
overflow: hidden;
}
③ 浮动的父级兄弟设置clear
brother {
clear: left | right | both;
}
④ 浮动的父级伪类清浮动
super:after {
content: "";
display: block;
clear: left | right | both;
}
5、代码示例
<!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>
三、清除浮动
了解: 清除浮动其实指的是，清除由于使用浮动而产生的小BUG。
1、代码示例
<!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*/
/*① 设置自身高度*/
/*.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;
}
</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>
四、流式布局
1、解决的经典案例
<style type="text/css">
.wrap {
max-width: 1200px;
min-width: 800px;
width: 90%;
height: 600px;
margin: 0 auto;
background-color: orange;
}
</style>
<div class="wrap"></div>
2、流式布局相关操作
① 百分比设置 %
② 窗口比设置 vw | vh
③ 字体控制 em | rem
3、代码示例
<!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>
五、定位布局应用
1、解决的经典案例
<style type="text/css">
.ad {
width: 150px;
height: 320px;
background-color: orange;
position: fixed;
top: calc(50vh - 160px);
left: 0;
}
</style>
<div class="ad"></div>
br*100
2、定位的语法
position: static | relative | absolute | fixed
布局方位：left | right | top | bottom
3、相当定位（relative）
① 未脱离文档流
② 以自身原有位置作为参考坐标系
4、绝对定位（absolute）
① 脱离文档流
② 以最近定位父级作为参考坐标系
5、固定定位（fixed）
① 脱离文档流
② 以文档窗口作为参考坐标系
6、示例代码
<!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*100 -->
</body>
</html>
六、相对定位
1、代码示例
<!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>
七、绝对定位
1、代码示例
<!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>
八、固定定位
1、代码示例
<!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 -->
</body>
</html>
网友评论