前端之文档流浮动以及定位

一,文档流

(文档流没有实际的意义,只是抽象的一个定义而已),可以理解为,一个连续的具有逻辑上下的页面整体

概念:将窗体自上而下的分成一行一行,块级元素自上而下,行内元素在每行中从左自右的顺序依次排放的元素

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><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>

前端之文档流浮动以及定位相关推荐

05-CSS 权重盒模型标准文档流浮动
一.权重问题 1.1. !important 标记可以通过 k : v !important 来给一个属性提高权重,这个属性的权重是无穷大的. <style>.spac2{color: ...
文档流，浮动，定位的区别和处理
1.文档流 - 所有的元素默认情况下都是在文档流中存在的 - 文档流是网页的最底层 - 元素在文档流中的特点: - 块元素 1.默认宽度 ...
一天搞定CSS：浮动（float）及文档流--10
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
相对、绝对、固定定位，以及其层级关系和脱离文档流的影响
定位:一般父级用相对定位,子级用绝对定位 1.相对定位:position:relative 2.绝对定位:position:absolute 3.固定定位:position:fixed 默认stati ...
VUE 获取PDF文档流直接打印
一.项目需求前端点击按钮直接调起打印对应pdf文档. 二.踩坑刚开始通过api获取后端给的PDF地址,创建一个隐藏的iframe标签src设置为pdf地址:前端通过获取隐藏的iframe标签的id ...
css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
BFC机制与浮动定位脱离文档流
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 --w3c规定的一种独立渲染区域渲染流程基本上四个步骤: 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位.大小, ...
css 图片换行_好程序员web前端学习路线分享CSS浮动-文档流篇
1.纯文本的排列. 文档流就像我们的文本内容一样,所有的文字都会紧挨着,一个个排列下来,如果到了边界,就会换一行排列.当然如果敲回车或者按下空格键一般都会认为是一个词间距,因为英文中每个单词之间是有距 ...
前端基础-CSS如何布局以及文档流，对于新手来说，特别有用
一. 网页布局方式 1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的 ...

前端之文档流浮动以及定位

前端之文档流浮动以及定位相关推荐

最新文章

热门文章