用 float: right 来控制 会到元素框的 最右边

Display

MDN display 中文详解 display CSS中 最重要的 用于控制布局的属性.

每个元素都有一个默认的display值.这个值与元素类型无关.

大多数元素的默认值通常是 Block / inline

  • 一个block 元素叫 块级元素.
  • 一个inline 元素叫 行内元素.

block

标准的块级元素. 一个块级元素 会新开始一行.并尽可能撑满容器

常见块级元素: p form header footer section...

inline

span 是一个标准的行内元素.

行内元素可以 写在段落里.不会打乱段落的布局. a 是最常见的行内元素.

none

这也是常用的 display 值. 一些特殊元素的默认display值 就是它. 如: script. 用来在不删除元素的情况下 隐藏或显示元素

它和 visiblity 属性不一样!!!

  • display: none 不会占据它本来应该显示的空间.
  • visbility:hidden 会暂居它本来应该显示的空间.

其他 display 值

list-item table…

总结

• Static 普通流布局(Normal flow) ,默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 • Relative 支持偏移量属性的普通流布局 ,生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。 • Absolute 在容器元素内绝对定位的布局 ,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 • Fixed 在显示范围内的绝对定位布局,生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

文档流概念:

html 布局机制就是 文档流模型: block 块元素 独占一行. inline 内联元素: 不独占一行

布局必然会用到… position属性.

Position 有一堆值

static relative fixed absolute

static 不定位 (默认值)

.static {
  position: static;
}

position: static的元素 不会被 positioned position: 其他值的元素 才会被 positioned

relative 相对定位

单单只有relative属性. 表现和static是一样的. 除非你加上一些额外的属性:top,right,botton,left.才会偏离位置

这个偏移是 相对自己本身的

其他元素的位置.不会受到这个元素的影响.

fixed 固定定位

相对浏览器定位. 就是页面滚动. 它也不动. top,right,bottom,left 都可用.

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

这个会在浏览器页面 右下角.显示. 元素的 右边框 靠浏览器最右边. 元素的 底边框 靠浏览器最下边.

absolute

最困难的情况才用到.. 一般上面的几种方法都能解决了.

与fixed 类似. 但是它不是相对与浏览器. 而是相对于最近的 positioned 元素. 也就是 相对于最近的. 不是position:static的元素

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

这个代码 会有形成两个长方形. 第一个大的长方形: 600 x 400 第二个小的长方形: 300 x 200

  • 如果大的长方形 是position: static; 那么它的绝对定位子元素会跳过它.直接相对于body进行定位.

  • 如果大的长方形 是position: 其他值. 那么就会相对于 大的长方形来定位:

也就是: 小的长方形 右边框靠大的长方形的右边框. 小的长方形的上边框.距离大的长方形的上边框120

有点难理解.但是 创造优秀布局必须会用

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

相对定位: 位置与文档流有关 绝对定位的元素 从文档流中完全删除.

不占据空间.

绝对定位元素 位置 相对于最近的的 已经定位的祖先元素. 如果没有 已经定位的祖先元素.那么就参照浏览器.

相对定位: 相对于元素在文档中的初始位置. 绝对定位: 相对于 最近的已定位的祖先元素.

绝对定位百分比居中

#allCateTagPostBtn { position: absolute; left:50%; top:0; transform: translate(-50%,0); }

比如一个 100px的 元素.

要显示在中间.
由于百分比 都是按照 左边距开始的. 所以还要实现…. 自身的偏移 才呢一 居中….

Position

position: 规定元素的定位类型(两大类: 相对定位 和 绝对定位)

相对定位: relative

正常定位。根据情况 自动排列/偏移

绝对定位分两种:

两种都是通过 “left/top/right/bottom” 属性进行规定。

  • 一种是根据浏览器 进行定位. fixed
  • 一种是根据父元素 进行定位 absolute

还有个默认值: static

忽略 top, bottom, left, right 或者 z-index 声明


任何元素都可以定位. 绝对/固定元素会生成一个 块级框.而不论元素本身是什么类型的.

就好比 span 给它绝对定位. 就由inline 变成 block了???

Z-index

  • 有正负值.
  • 值越大越上面 Z-index 仅在定位元素上奏效!static 这个默认值下无效.

    img { position:absolute; left:0px; top:0px; z-index:-1; }

Float

float 属性定义元素在哪个方向浮动。 以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。 浮动元素会生成一个块级框,而不论它本身是何种元素。

  • float box 会从正常流布局中移除.
  • Float box 只会影响设置了clear属性的块级元素 和 inline元素的布局.

居中

margin-left: auto;
margin-right: auto;