CSS（浮动和定位）

时间：2022-12-11 20:30:05

一、浮动

1、网页的布局方式

（1）标准流（文档流）排版

  • 块级元素垂直排版；
  • 行内和行内块级是水平排版；

（2）浮动流排版

  • 是一种 半脱离标准流 的排版方式；
  • 浮动流只有水平排版，设置相对于父级元素的左对齐或者右对齐，没有 center，不可以使用 margin：0 auto；
  • 浮动流不区分块级和行内元素，更类似于行内块级元素的特点，即可水平排版又可以设置宽高；

（3）定位流排版

2、浮动（float）

（1）浮动元素脱标

  • 定义：浮动的元素脱离标准流，像是从标准流里被删除了一样；
  • 影响：会造成元素的覆盖问题；

（2）浮动元素排序规则

  • 相同方向，先浮动的在前；
  • 不同方向，左浮找左，右浮找右；
  • 元素浮动后的位置与浮动前的位置相关：浮动前在第几行浮动后就在第几行，这里的浮动前的位置是在前面的元素都浮动之后的位置；
  • 浮动是有顺序的浮动；

（3）浮动贴靠和字围现象

  • 贴靠：父元素的宽度不够，浮动元素会逐级往上贴靠，都不够放的话，会一直贴到最上级的父元素；
  • 字围：浮动元素不会覆盖文字，文字会自动围绕在浮动元素的周围；

（4）浮动在网页排版的应用

  • 网页的排版：垂直方向标准流，水平方向浮动流；
  • 网页的排版练习

 

二、清除浮动

--浮动前

CSS（浮动和定位）CSS（浮动和定位）​

--浮动后

CSS（浮动和定位）CSS（浮动和定位）​

1、清除方式一

（1）浮动元素的高度问题

  • 标准流中内容可以撑起父元素的高度；
  • 浮动流中内容无法撑起父元素的高度；

（2）方式一：给前面的盒子设置高度（少）

2、清除方式二

（1）给后面的盒子设置 clear 属性；

（2）clear 的属性值：

  • none 默认：左浮找左，右浮找右；
  • left：不找前面的左浮；
  • right：不找前面的右浮；
  • both：不找前面的浮动；基本都用这个；

（3）clear 导致的 margin-top 失效

  • margin-top 如果是相对于父元素的，则必须要为父元素设置边框才有效；
  • 前一个盒子的元素都浮动之后，前面的元素就可以看作没了，此时设置的 mt 是相对与 body 的，而不是前一个盒子的，而 body 又没有边框，所以 mt 无效；

3、清除方式三：隔墙法（少）

（1）外墙

  • 实质就是在两个盒子的中间加一个块级元素，然后给这个块级元素设置 clear both；
  • 带来的问题：后面盒子的 mt 可以用，而前面盒子的 mb 不能用；
  • 解决：通常 mt 和 mb 都不用，直接给中间的块级元素设置高度；

（2）内墙

  • 实质是在前面一个盒子的最后一个子元素的后面添加一个块级元素，然后 clear both；
  • 这种方法 mt、mb和给添加的块级设置 height 都是可行的；
  • 内墙可以撑起前一个盒子的高度，而外墙不可以；

4、清除方式四

（1）伪元素选择器：在指定的元素之前或者之后添加一个元素

div::before/after{
    content:....;
    visibility:hidden;
}
CSS（浮动和定位）

（2） 伪元素选择器清除浮动

div::after{ content:''; display:block; height:0px; visibility:hidden; clear:both; } /*兼容低版本的IE*/ div｛ *zoom:1; ｝
CSS（浮动和定位）

5、清除方式五

（1）overflow：hidden 清除浮动

/*给前面的盒子设置overflow属性*/

.box1{
    overflow:hidden;
    *zoom:1;
}
CSS（浮动和定位）

（2）overflow：hidden的其他作用

  • 裁剪掉超出标签的内容；
  • 父子元素，子元素设置 mt 无效的问题，可以在父元素设置overflow； 

6、总结

  • clear（后一个盒子加）、overflow（前一个盒子加）和 伪元素选择器用来清除浮动比较多

7、练习：网易注册界面的实战*

 

三、定位

1、相对定位

（1）position：relative；

（2）定义：相对于自己以前在标准流中的位置来移动，不会脱标；

（3）使用：结合 top bottom left right 来使用；

（4）注意：

  • 相对定位水平和垂直的方向上只能选择一个，如：有 left 就没有 right；
  • 区分块级和行内元素；
  • 给相对定位的元素设置margin 和 padding 都是对原来的位置起作用，而不是移动后的位置；
  • 相对定位中原来的位置极其重要；

（5）应用：位置的微调；结合绝对定位来使用；

2、绝对定位

（1）position：absolute；

（2）概念：相对于 body 来定位

（3）注意：

  • 绝对定位是脱标的，且不区分行内和块级；
  • 结合 top 等来使用；
  • 绝对定位的参考点默认是body，如果祖先元素中有定位流元素，则以该元素为参考点，如果祖先中存在多个定位流则就近原则，这里的静态流不含 static；
  • body 作为参考点是以当前的显示页面作为参考，而不是以整个页面作为参考；
  • 绝对定位会忽略祖先元素的padding；

（4）和相对定位的配合使用：

  • 单用相对定位的局限：会占用标准流的空间；
  • 单用绝对定位的局限：受浏览器宽高的影响；
  • 配合使用解决以上的局限：使用方法：子绝父相；

（5）绝对定位的水平居中：left：50%；margin-left：-元素宽度的一半（用 margin：0 auto 是无效的）；

3、固定定位

（1）position：fixed；

（2）作用：让元素不随滚动条的滚动而滚动；相对与网页的可视部分固定；

（3）特点：脱标；不区分行内和块级；

4、静态定位

（1）元素默认就是静态定位；

（2）元素都有一个 z-index属性，默认值为 0；

（3）z-index 属性是用来控制定位流的覆盖关系的，谁大谁在上面；

（4）默认情况，定位流会覆盖标准流；后面的定位流会覆盖前面的定位流；

（5）在设置了z-index 属性的条件下，谁大谁在上；

（6）z-index 的从父现象：在父元素没有设置 z-index 的前提下，谁的 z-index 大谁在上，在父元素设置了 z-index 的前提下， 父级的 z-index 大，谁就在上；

5、补充text-align、line-height和vertical-align

（1）text-align：只对文字图片和 a 标签有效；

（2）line-height：居中效果只对文字和图片有效（包含标签中的文字和图片）；

（3）vertical-align：针对 inline 元素有效，将 display 设置为 table-cell 也是有效的；

 

 

 

 

标签：

相关文章