一,文档流
(文档流没有实际的意义,只是抽象的一个定义而已),可以理解为,一个连续的具有逻辑上下的页面整体
概念:将窗体自上而下的分成一行一行,块级元素自上而下,行内元素在每行中从左自右的顺序依次排放的元素
BFC:Block formatting context
由block-level box参与布局,同一区域(容器空间)中,相互影响,且不会对区域外产生影响
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档流</title> <style> * { margin:0; } .box { width: 200px; height: 200px; background: green; /*默认BFC水平布局方向:从左至右*/ /*margin-left:50px;*/ /*更改BFC水平布局方向:从右至左*/ float: right; margin:50px; } .b1 { width: 200px; height: 200px; background: red; margin-left: 10px; } /*在水平方向上不存在兄弟坑以及父子坑*/ .bb1, .bb2 { width: 50px; height: 50px; background: cyan; float: left; } /*bb1与bb2之间的margin都是相对与父级b1设置的*/ .bb1 { margin-left: 20px; margin-right: 20px; } .bb2 { margin-left: 20px; } </style> </head> <body> <!-- b1与b2在同一区域|a1与a2在同一区域 --> <div class="b1"> <div class="bb1"></div> <div class="bb2"></div> </div> <div class="b2"></div> <div class="box"></div> </body> </html>
二,浮动布局(脱离文档流)
part1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动布局</title> <style> .article { width: 300px; border: 1px solid black; } .eg img { width: 148px; /*块级:独占一行*/ display: block; /*浮动后:可以同行显示(只占自身显示区域)*/ float: left; } .eg { /*display: none;*/ } </style> </head> <body> <!-- 1,让block box同行显示 --> <div class="eg"> <div class="article"><img src="img/icon.jpg" alt="">文人作文，农人掘锄，本是平平常常的，若照相之际，文人偏要装做粗人，玩什么“荷锄带笠图”；农夫则在柳下捧一本书，装作“深柳读书图”之类，就要令人肉麻。/div> </div> </body> </html>part2:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动布局part2</title> <style> .sup { width: 300px; height: 300px; background-color: orange; } .sub { width: 100px; height: 100px; background-color: red; border-radius: 50%; /*font: 字体粗细 大小/行间距 字体类型*/ font: 700 15px/20px 'STSong'; text-align: center; } /*BFC横向布局规则为从左至右,且block box同行显示(之间没有间隔)*/ /*注: 从左至右可以理解横坐标正方向为右*/ .sub { float: left; } /*BFC横向布局规则为从右至左,且block box同行显示(之间没有间隔)*/ /*注: 从右至左可以理解横坐标正方向为左*/ .sub { /*float: right;*/ } .sub:nth-child(2) { margin-right: 100px; } </style> </head> <body> <div class="p2"> <div class="sup"> <div class="sub">真的猛士，敢于直面惨淡的人生，敢于正视淋漓的鲜血。</div> <div class="sub">时间，就象海棉里的水，只要愿挤，总还是有的。</div> </div> </div> </body> </html>part3
注意;1,父级高度不再由浮动的子级撑开
2,如果父级内部存在浮动的子级,父级的兄弟标签布局就会出现异常(想要恢复正常就设置父级的高度正好与子级的高度相匹配)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动布局part3</title> <style type="text/css"> .sp { width: 300px; background-color: orange; /*height: 500px;*/ } .sb { width: 100px; height: 100px; background-color: red; border-radius: 50%; font: 900 40px/100px 'STSong'; text-align: center; } .sb:nth-child(2) { /*文本层次高于背景层次,所以2只能遮挡1的背景,而不能遮挡1的文本*/ /*但是父级的高度最终决定于逻辑最后位置上的子级盒子的底端*/ /*margin-top: -50px;*//*第二个盒子向上移50px(如果正就向上移,负的就向下移)*/ } .sb { /*两个显示区域重叠,但是文本是正常显示的,但是与显示区域重叠就不正常了*/ float: left; } .br { width: 300px; height: 200px; background-color: yellowgreen; } /*设置父级刚好拥有子级的高度(适合高度)*/ .sp { height: 100px; } </style> </head> <body> <!-- 浮动之后:父级未设置固定高度,不再撑开父级高度 --> <div class="p3"> <div class="sp"> <div class="sb">1</div> <div class="sb">2</div> </div> <div class="br">教育植根于爱</div> </div> </body> </html>
三,清浮动(四种方法)
1,不完全脱离文档流,通常在文档流中,子标签在父级标签未设置高度的情况下,会撑开父级的高度,但是脱离文档流的子标签,不再撑开父级高度
2,浮动后的结果(不完全脱离文档流),不清浮动,不会撑开父级高度,清浮动之后,会重新撑开父级高度
3,清浮动的本质:让父级诚信获得合适的高度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清浮动</title> <style> .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 (规定父级的显示区域,如果超出会自动隐藏),还有:scoll和auto的属性值*/ /*.sup { overflow: hidden; }*/ /*③ 设置兄弟标签的clear: left | right | both*/ /*哪个标签的布局有问题,需要清浮动,则在更改哪个标签的清浮动属性*/ .s2 { float: right; height: 50px; } .br { clear: right; } /*④ 设置自身:after伪类(只能是设置下面的三个值),不能更改字体或者背景的样式,after,只能设置内容伪类,所以下面必须添加content*/ /*.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,百分比%
2,窗口比设置 vw |hw
3,字体控制 em | rem (页面宽度也可以设置成这样,意思是显示多少个字)
目的:让布局脱离固定值的限制,可以根据页面情况改变相应的大小(auto窗口自适应)
注意:一般要设置最小宽度或者最大宽度,这样内容不会自动换行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>流式布局</title> <style type="text/css"> html, body { width: 100%; margin: 0; } .box { /*百分比流式:参考最近父级*/ /*如果宽度的百分比最后的值超过最大值(最小值),就按最大值(最小值)显示*/ width: 90%; min-width: 1000px; max-width: 1000px; /*窗口比*/ /*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; } .txt { /*1em = 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,通过position设置定位是否开启
static:静态,未定位(默认值) relative:相对定位,未脱离文档流 absolute:绝对定位,完全脱离文档流 fixed:固定定位,完全脱离文档流2,定位开启后,四个定位方为便会开启,且四个方为均参与布局
如果发生冲突,左(left)右(right)取左,上(top)下(bottom)取上
(一),相对定位
相对定位的参考系为:自身的原有位置
<!DOCTYPE html> <html lang="en"> <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.未脱离文档流*/ /*BFC规则下margin布局,上盒子依旧会影响下盒子*/ /*margin-top: 30px; margin-bottom: 30px;*/ /*开启定位*/ position: relative; /*具有定位方位2.方位布局下,上盒子不会影响下盒子*/ /*left: 30px;*/ /*top: 30px;*/ /*总结:方位布局只改变盒子显示区域,不改变盒子原有位置*/ /*margin-top: 30px;*/ /*right: 30px;*/ /*总结:方位布局就是 显示区域上|下|左|右距离自身原始位置上|下|左|右的间隔*/ /*4.left=-right top=-bottom,同时存在,左右取左,上下取上*/ left: -30px; right: -200px; } </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 { 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; top: 100px; /*3.同时存在,左右取左,上下取上*/ } </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"> .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; left: 100px; top:100px;*/ /*margin: 100px 100px;*/ /*注:如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响*/ /*注:margi-top|left依旧起作用,只是sup已经脱离文档流,不会获得到body宽度,所以auto没有参考值*/ } .sub { /*2.参考坐标系为最近的定位父级*/ position: absolute; left: 200px; right: 0; top: 100px; /*父级: 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 { 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; right: 0; /*top: 0;*/ bottom: 0; } </style> </head> <body> <div class="sup"> <div class="sub"></div> </div> br*50 </body> </html>