第三十八天

文档流

<!DOCTYPE html>

<html>

<head>

.box { 200px;

　　height: 200px;

　　background-color: orange; 　

　　/*默认BFC水平布局方向:从左至右*/ /*margin-left: 50px;*/

/*更改BFC水平布局方向:从右至左*/ float: right; margin-right: -50px; } .b1 { 200px; height: 200px; background: red; margin-left: 10px; } .bb1, .bb2 { 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参与布局,同一区域(容器空间)中,相互影响,且不会对区域外产生影响

<div class="b1"> <div class="bb1"></div> <div class="bb2"></div> </div> <div class="b2"> </div>

浮动布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动布局</title>  <style type="text/css"> .article { 300px; border: 1px solid black; } .eg img { 148px; /*块级:独占一行*/ display: block; /*浮动后:可以同行显示(只占自身显示区域)*/ float: left; } .eg { display: none; } </style>  <style type="text/css"> .sup { 300px; height: 300px; background-color: orange; } .sub { 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>  <style type="text/css"> .sp { 300px; background-color: orange; } .sb { 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 { 300px; height: 100px; background-color: yellowgreen; } /*恢复正常:父级刚好拥有存放所有子级的高度(合适高度)*/ .sp { height: 100px; } /*总结(坑):当target标签的内部有浮动的子级,target的兄弟标签布局会出现显示异常*/ </style> </head> <body>   <div class="p3"> <div class="sp"> <div class="sb">1</div> <div class="sb">2</div> </div> <div class="br">1234512345123451234512345</div> </div>

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

<div class="eg"> <div class="article"><img src="img/icon.jpg" alt="">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div> </div> </body> </html>

清浮动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清浮动</title> <style type="text/css"> .sup { 300px; background-color: orange; } .sub { 100px; height: 100px; background-color: red; border-radius: 50%; font: 900 40px/100px 'STSong'; text-align: center; } .br { 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>

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

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

height: 300px; background-color: orange; margin: 0 auto; } .b { 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>

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

固定定位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>固定定位</title> <style type="text/css"> .sup { 500px; height: 500px; background-color: orange; margin: 0 auto; } .sub { 200px; height: 200px; background-color: red; } .sup { position: relative; position: absolute; } .sub { position: fixed; left: 0; /*top: 0;*/ bottom: 0; } </style> </head> <body>     <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>

相关推荐