css display position

好记性不如烂笔头
249 阅读5分钟

文档流

定义

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准文档流

块级元素
  • 独占一行，不能与其他任何元素并列
  • 能接受宽、高
  • 如果不设置宽度，那么宽度将默认变成父元素的100%。
行内元素
  • 与其他元素并排
  • 不能设置宽、高。默认宽度就是文字宽度
body {
 background-color:yellow
}
img {
  height:200px;
  width: 180px;
 }
 div {
  width:100px;
  height:50px;
  background-color:red
}
<body> 
  <img src="demo1.jpg" alt="一">
  <img src="demo1.jpg" alt="二">
  <div></div> 
</body>

image.png

display（属性规定元素应该生成的框的类型）

  • block元素通常被现实为独立的一块，会单独换一行。
  • inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。 一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

display:block(块级元素)

  • block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  • block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  • block元素可以设置margin和padding属性。

display:inline(内联元素、行内元素)

  • inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  • inline元素设置width,height属性无效。
  • inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

position（属性规定元素的定位类型）

position:static(静态定位)

  • 对象遵循标准文档流中，top、right、bottom、left等属性失效

position:absolute(绝对定位)

  • 对象脱离标准文档流，参考距其最近一个不为static的父级元素，可使用top、right、bottom、left四个属性来设置绝对定位元素的位置。

  • 它不会随着窗口的大小而发生变化，只是固定在一个特定的坐标轴上面。坐标原点（是参照浏览器的左上角，配合四个属性进行定位，没有设置时，默认依据父级的坐标原点为原始点。如果设置四个属性并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置由四个属性的值决定。）

  • 参照物：

1:设置position:absolute的元素如果存在有祖先元素设置了position属性为relative或absolute,则这时元素的定位对象为此已设置position属性的祖先元素。

2、如果没有设置position属性的祖先元素，则此时相对于body进行定位。

position:relative（相对定位）

  • 对象遵循标准文档流，依赖top、right、bottom、left等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过z-index定义层叠关系。（值可以是正值，或负值）
body {
 background-color:yellow
}
img {
  height:100px;
  width: 100px;
  position:relative;
  left:20px;
  top:30px;
  margin-bottom:20px;
 }
 div {
  width:50px;
  height:50px;
  background-color:red
}
<body> 
  <img src="demo1.jpg" alt="一">
  <div></div> 
</body>

image.png

position:fixed（固定定位）

  • 相对于浏览器窗口进行偏移，定位基点是浏览器窗口，会导致元素的位置不随压面滚动而变化，固定在网页上。
  • 如果使用top、right、left、bottom属性，表示元素的初始位置是基于浏览器窗口计算的。否则初始位置就是元素的默认位置。
值描述
absolute(绝对定位)生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative(相对定位)生成相对定位的元素，相对于其正常位置进行定位。不脱离文档流。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed(固定定位)生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit规定应该从父元素继承 position 属性的值。

position:sticky(粘性定位)

  • 基于用户的滚动位置来定位
  • 粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换
  • 指定top，right,bottom 或left四个阀值其中一个，才可使粘性定位生效。否则其行为与相对定位相同。

overflow(属性规定当内容溢出元素框时发生的事情)

overflow:hidden

内容会被修剪，并且其余内容是不可见的。

overflow:auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow:scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

avatar
文章
阅读
粉丝