CSS基础回顾之定位和文档流

Share

标准文档流

  • 所谓的标准文档流就是浏览器默认的排版方式，注意，这是一种排版方式。

  • 说道排版，便有行内元素和块级元素的不同。其区别和注意事项，请看下面知识点。

  • 标准文档流注意事项：

    • 空白折叠现象。比如，如果我们想让img标签之间没有空隙，必须紧密相连。

      1
      <img src="img/00.jpg" /><img src="img/02.jpg" />

    • 高矮不齐，底边对齐

    • 自动换行，一行写不完，换行写

  • 其是怎样的排版方式，用display来决定。其很复杂，看网络教程https://cloud.tencent.com/developer/section/1072029

  • display决定了布局的方式，直接影响的是height。标签div的高度，由其内部文档流元素的高度总和决定，并不是相等

  • 文档流中的行内元素和块级元素区别：

    • 内联元素：
    • 文档流流动的方向是从左到右布局，如果流动遇到阻碍，宽度不够，换行继续流。
    • 内联元素的内容如果是英文，超过了div宽度时，并不会将一个词打断，然后如果包含中文一个词就会被打断。
    • 块级元素
    • 文档流布局方向是从上到下，一个元素占一行。

CSS布局

行内元素 = 内联元素

  • 一个内联元素只占据它对应标签的边框所包含的空间

  • 1
    常见行内：a abbr em strong span br img script label

  • 行内元素特点：

    • 从左到右布局
    • 其宽高等设置问题如下：
    • 宽度无效，默认宽度是内容的宽度
    • 高度无效，但是可以通过line-height设置
    • 设置margin只有左右margin有效，上下无效。
    • 设置padding只有左右padding有效，上下则无效。
    • 内联元素转block元素：display:block

块级元素

  • 块级元素占据其父元素的整个空间，因此创建了一个“块”

  • 常见块级元素

    1
    p div address article audio canvas dd dl footer form hr header h1-h6 ol section table ul li video

  • 块级元素特点：

    • 每个块级元素都从新的一行开始，并且其后的元素也另起一行
    • 高度、行高以及外边距和内边距都可控制
    • 宽度如果缺省则是它的容器的100%，除非设定一个宽度。
    • 可以容纳块级元素和行内元素
    • block元素转inline元素：display:inline

块级元素和行内元素的分类

html中讲p标签分为文本级和容器级

  • 文本级标签：p、span、a、b、i、u、em等
  • 容器级标签：div、h系列、li、dt、dd等
    为什么p是文本级标签呢？ 因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p

css中分类为行内元素和块级元素

  • 行内元素：除了p之外，所有文本级标签都是行内元素
  • 块级元素：所有的容器级标签都是块级元素，还有p标签

内联块级元素 = 行内块级元素

  • 常见内联块级元素
    button input textarea
  • 特点：
    • 和其他元素都在一行上，左右布局
    • 元素的height、width、行高以及top、bottom都可以设置
    • 相当于添加浮动float:left;，但是不建议使用inline-block，最好使用float加clearfix?
      1
      2
      3
      4
      5
      .clearfix:after{
      	content:'';
      	display:block;
      	clear:both;
      }

定位

标准流（position:static;）

绝对定位（position:absolute;）

  • 相对于最近的设置了除static之外的祖先元素为参照物。
  • 元素不占据位置，会脱离标准流
  • 因为第一条，所以可以设置子绝父相：父元素相对定位，子元素绝对定位，子元素从父元素出发设置自身位置。

相对定位（position:relative;）

  • 相对于原本文档标准流中的位置，因为下一条，所以如此相对
  • 元素占据位置，不会脱离标准流

固定定位（position:fixed;）

  • 相对于浏览器窗口定位
  • 页面如何滚动，盒子显示的位置不变
  • 脱标

CSS中脱离文档流的三种方式：

  • 浮动
  • 绝对定位
  • 固定定位

定位属性

  • top、right、bottom、left、是相对于父元素的。
  • margin padding transform是相对于自身的

浮动（float）

浮动的元素脱标

  • 一旦设置浮动，元素不再分行、块，均可并排、设置宽高，成行内块级元素

浮动的元素互相贴靠

浮动的元素有“字围”效果

举例：

1
2
3
4
5
6
<div>
  <img src="00.jpg">
</div>
<p>
这里有很多字。如果div设置了浮动，那么这里的字会将其围起来，不会被div里面的图片覆盖掉
</p>

收缩

  • 一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度

清除浮动

  • 首先明白为什么要清除浮动

    • 是为了避免不想添加浮动的地方被添加上浮动。

  • 清除浮动的方法：

    • 给浮动元素的祖先元素添加高度。
    • 因为设置浮动的元素的祖先不一定能担当起这个责任，如果担不起，则会造成混乱的浮动现象。那么怎么才能担当起这个责任呢？就是设置高度，最好设置高于自己孩子，避免出现不必要的问题。
    • clear:both
    • 因为高度height其实很少出现，意味着有更好的办法。
    • 那就是为其父元素设置clear:both。比如下面：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
          <!DOCTYPE html>
          <html>
      <head>
        <title>document</title>
        <style type="text/css">
              div{
                height: 10px
              }

          li{
            float: left;
            width: 100px;
            height: 20px;
            background: pink
          }
          
          .box2{
            clear: both
          }
        </style>
      </head>
      <body>
      <div class="box1">
        <ul>
          <li>生命一号1</li>
          <li>生命一号2</li>
          <li>生命一号3</li>
          <li>生命一号4</li>
        </ul>
      </div>

      <div class="box2">
        <ul>
          <li>生命1</li>
          <li>生命2</li>
          <li>生命3</li>
          <li>生命4</li>
        </ul>
      </div>
      </body>
      </html>
         ```  
        - both指的是左浮动和右浮动都要清楚，也就是：清除别人对我的影响。
        - 致命问题：所在标签，margin属性消失。消失的原因是box高度为0，自然不存在所谓的margin和padding
       + 隔墙法
        - 添加一个元素，既设置其`clear:both`，又设置其高度
          代码如下：
        ```html
        <!DOCTYPE html>
      <html>
      <head>
        <title>document</title>
        <style type="text/css">
              div{
                height: 10px
              }

          li{
            float: left;
            width: 100px;
            height: 20px;
            background: pink
          }

          .cl{
            clear: both
          }
          .hei {
            height: 16px;
          }
        </style>
      </head>
      <body>
      <div class="box1">
        <ul>
          <li>生命一号1</li>
          <li>生命一号2</li>
          <li>生命一号3</li>
          <li>生命一号4</li>
        </ul>
      </div>
      <div class="cl hei"></div>
      <div class="box2">
        <ul>
          <li>生命1</li>
          <li>生命2</li>
          <li>生命3</li>
          <li>生命4</li>
        </ul>
      </div>
      </body>
      </html>
    • 内墙法
    • 在设置元素的平级处添加一个盒子，设置其样式clear:both
    • 与外墙法的区别是虽然不用在新添加的盒子设置高度，其也可以给祖先元素撑起高度。高度刚好就是设置浮动的元素的高度。代码如下： 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
           <!DOCTYPE html>
           <html>
      <head>
        <title>document</title>
        <style type="text/css">
          div{
            background: green;
          }
          p{
            float: left;
            width: 100px;
            height: 100px;
            background: red;
          }
          .cl{
                clear: both;
          }
        </style>
      </head>
      <body>
      <div>
        <p></p>
        <div class="cl"></div>
      </div>
      </body>
      </html>
    • overflow:hidden
    • 意味：溢出隐藏
    • 其实很多时候都是父亲能不能被浮动的儿子撑起高度，只要给父亲加上overflow:hidden，即可
    • 此为偏方

BFC（块级格式化上下文）

块级元素才可以触发。

  • 触发条件
    • 浮动float属性不为none，设置为浮动
    • 绝对定位元素position为absolute或fixed
    • 行内块display为inline-block
    • 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
    • overflow不为visible
    • 根元素或其它包含它的元素；
  • BFC元素所具有的特性
    • 在BFC中，盒子从顶端开始垂直地一个接一个地排列
    • 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
    • 在BFC中，每一个盒子的外边缘(margin-left)会触碰到容器的左边缘(border-left)，对于从右往左排列的是右边缘。意思就是不压边框，边框内里与margin外边相贴
    • BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
    • 计算BFC的高度时，自然也会检测浮动的盒子高度
    • 他是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

BFC用途

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清除子元素的浮动了，最常见的用法就是在父元素上设置overflow:hidden样式，对于IE6加上zoom:1就可以了。

主要用到：计算BFC的高度时，自然也会检测到浮动的盒子高度

具体情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
	<title>document</title>
	<style type="text/css">
		.father{
			width: 300px;
			border: 1px solid red;
			overflow: hidden;/*添加这句话，触发BFC，可以清除浮动，按照BFC，计算父元素高度的时候，可以把内部浮动的子元素加进去。也就是说，清除浮动后，内部浮动的子元素可以撑起父元素高度。*/
              /*换成overflow:auto也可以，所以只要不为visible即可*/
		}
		.son1,.son2 {
			width: 100px;
			height: 100px;
			background-color: pink;
			float: left;/*添加浮动后，将导致其不再能撑起父元素高度*/
		}
		.son2 {
			background-color: purple 
		}
	</style>
</head>
<body>
<div class="father">
	<div class="son1"></div>
    <div class="son2"></div>
</div>
</body>
</html>

变化如上三图所示。

(2) 解决外边距合并的问题

属于同一个BFC的两个相邻盒子会发生重叠，那么我们创建不属于同一个BFC，就不会发生重叠了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
	<title>document</title>
	<style type="text/css">
		.father{
			width: 300px;
			border: 1px solid red;
			overflow: hidden;/*添加这句话，触发BFC，可以清除浮动，按照BFC，计算父元素高度的时候，可以把内部浮动的子元素加进去。也就是说，清除浮动后，内部浮动的子元素可以撑起父元素高度。*/
		}
		.son1,.son2 {
			width: 100px;
			height: 100px;
			background-color: pink;
			float: left;/*添加浮动后，将导致其不再能撑起父元素高度*/
		}
		.son1 {
			margin-bottom: 50px;
		}
		.over {
			overflow: hidden;/*给这个创造overflow:hidden，也算是清除浮动*/
		}
		.son2 {
			background-color: purple ;
			margin-top: 100px;
		}
	</style>
</head>
<body>
<div class="father">
	<div class="over">
		<div class="son1"></div>
	</div>
	<!-- over隔开，那么son1和son2就不再属于同一个BFC -->
    <div class="son2"></div>
</div>
</body>
</html>

(3) 制作右侧自适应的盒子问题

用到BFC的原理是BFC的区域不会与浮动盒子产生交集而是紧贴浮动边缘

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
	<title>document</title>
	<style type="text/css">
		.father{
			width: 400px;
			height: 500px;
			border: 1px solid #000;
			margin: 0 auto;
		}
        .box {
        	width: 100px;
        	height: 100px;
        	background-color: pink;
        	float: left;
        }
        .txt {
        	height: 300px;
        	background-color: purple;
        	overflow: hidden;/*给txt创建BFC区域，不再和浮动产生交集*/
        }
	</style>
</head>
<body>
<div class="father">
    <div class="box"></div>
    <div class="txt">
    	自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应
    </div>
</div>
</body>
</html>