标签：浮动 知识点 行内 定位 元素 流中 课程 南江 排版
网页的布局方式
浏览器是如何对网页中的元素进行排版的。
1、标准流（文档流/普通流）排版方式
1.1、浏览器默认的排版方式就是标准流的排版方式。
1.2、在CSS中将元素分为三类，分别是块级元素、行内元素、行内块级元素。
1.3、在标准流中有两种排版方式：一种是垂直排版（块级元素），一种是水平排版（行内元素，行内块级元素）
2、浮动流排版方式
2.1、浮动流是一种“半脱离标准流”的排版方式。
2.2、浮动流只有一种排版方式，就是水平排版方式，它只能设置某个元素在其父元素中左对齐或者右对齐。
注意点：
1、浮动流中没有居中对齐，没有center取值。
2、在浮动流中使用margin：0，auto；水平居中对齐是无效的。
特点：
1、在浮动流中是不区分块级和行内以及行内块级元素的，都可以水平排版。
2、在浮动流中，无论是块级元素、行内元素，块级行内元素都可以设置宽高。
3、综上所述，浮动流中的元素和标准流中的块级行内元素很像。
3、定位流排版方式
浮动元素的脱标
1、什么是浮动元素脱标？
脱标：脱离标准流。
当某一个元素浮动之后，那么这个元素看上去就像被从标准流之后删除了一样，这个就是浮动元素的脱标。
2、浮动元素脱标之后有什么影响？
如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的元素就会盖住后面的一个元素。
浮动元素排序规则
1、相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面。
2、不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
3、浮动元素浮动之后的位置，由浮动元素之前在标准流之后的位置来确定。
浮动元素的贴靠现象
当父元素宽度足够宽的时候，浮动的元素会并列的进行显示，如果不够宽，就往前面贴靠。
1、如果父元素的宽度能够显示所有浮动元素，那么浮动的元素会并排显示。
2、如果父元素的宽度不能显示所有浮动元素，那么会从最后一个元素开始往前贴靠。
3、如果贴靠了前面所有浮动元素之后都不能显示，最终会贴靠到父元素的左边或者右边。
浮动元素的字围现象
做网页的时候我们应该从从上至下，从外至内进行页面的设计和实现。
一般在垂直方向上使用标准流布局，水平方向上使用浮动流布局。
1、在企业开发中什么时候使用标准流什么时候使用浮动流？
垂直方向使用标准流，水平方向使用浮动流。
2、拿到一个很复杂的界面如何入手？
2.1、从上至下布局。
2.2、从外向内布局。
2.3、水平方向可以先划分为一左一右再对左边或者右边进行进一步布局。
浮动元素的高度问题
1、在标准流中，内容的高度可以撑起父元素的高度。
2、在浮动流中，浮动的元素不能撑起父元素的高度。
清除浮动方式一
1、给起那么一个父元素设置高度。
注意点：
在企业开发中，能不写高度，我们就不写高度，所以这种方式用的很少。
清除浮动方式二
在不设置高度的情况下，又能够保证第二个盒子中的浮动元素不会去找第一个盒子中的浮动元素。
给后面的盒子添加clear属性。
clear属性取值：
none：默认取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
left：不要找前面的左浮动元素。
right：不要找前面的由浮动元素。
both：不用找前面的左浮动和右浮动元素。
在企业开发中用的最多的是both，既不找左边也不找右边，不用关心前面是左浮动还是右浮动。
注意点：当我们给某个元素添加clear属性之后，那么这个元素的margin属性就会失效。
清除浮动方式三
隔墙法
1、外墙法
在两个盒子中间添加一个额外的块级元素。
给额外添加的块级元素设置clear：both；属性。
注意点：外墙法可以让第二个盒子使用margin-top属性，不可以让第一个盒子使用margin-bottom属性。
2、内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素。
给额外添加的块级元素设置clear：both；属性。
注意点：内墙法可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性。
在企业开发中不常用隔墙法来清除浮动。
伪元素选择器
什么是伪元素选择器？
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素。
定位流
相对定位
1、相对定位就是相对于自己以前在标准流中的位置来移动。
2、相对定位不会脱离标准流，还是会在标准流中占据原来的位置。
3、相对定位中同一个方向上的定位属性只能使用一个。
4、由于相对定位是不脱离标准流的，所以在相对定位中的区分块级元素、行内元素、行内块级元素的。
5、由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin、padding等属性会影响到标准流的布局。
相对定位应用场景：
1、用于对元素进行微调
2、配合后面学习的绝对定位来使用
绝对定位
什么是绝对定位？
绝对定位就是默认情况下相对于body来进行定位。
1、绝对定位的元素是脱离标准流的。
2、绝对定位元素是不区分块级元素、行内元素、行内块级元素的。
默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body元素作为参考点。
3、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。
3.1、只要是这个绝对定位元素的祖先元素都可以。
3.2、指的定位流是指绝对定位、相对定位、固定定位。
3.3、定位流中只有静态定位不行。
4、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。
注意点：
1、如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点。
2、一个绝对定位的元素会忽略祖先元素的padding设置。
子绝父相
相对定位的弊端：
相对定位不会脱离标准流，会继续在标准流中占用一份空间。
绝对定位弊端：
默认情况下绝对定位的元素会以body作为参考点，会随着浏览器的宽高的变化而变化。
子绝父相
子元素用绝对定位，父元素用相对定位。
绝对定位-水平居中
固定定位
静态定位
标签：浮动,知识点,行内,定位,元素,流中,课程,南江,排版 来源： https://blog.csdn.net/weixin_45012866/article/details/110689402
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。