CSS学习总结(6)——定位与布局

display属性

display属性决定了盒模型的行为方式。 block(块元素)是占用最大可用宽度的元素,前后有换行符。设置元素的display属性只会改变元素的显示方式,而不会改变元素的类型。

p {
   display: block;
}

inline元素只占用尽可能多的宽度,并不强制换行。

p {
   display: inline;
}

none 隐藏一个元素,所以它不占用任何空间。 该元素将被隐藏,在页面显示时不会展现出来,就好像该元素不存在一样。

p{
   display: none;
}

visibility属性

visibility属性用于指定元素是可见的还是隐藏的。 最常见的值是visiblehidden。可以通过将display属性设置为“none”或者将visibility属性设置为“hidden”来隐藏元素。
但是这两种方法会产生不同的结果:
visibility:hidden隐藏了一个元素,但是它仍然占据与之前相同的空间。 该元素将被隐藏,但仍然会影响布局。

position属性

position属性允许定位一个元素。 它也可以将元素放在另一个元素之后,并指定元素的内容太大时应该发生的情况。
position属性的值可以为:

  • absolute(绝对定位)
  • fixed(固定定位)
  • relative(相对定位)
  • static(默认值,无定位)
  • inherit(继承父级定位)

position:static 静态定位元素不受top, bottom, left, 和right属性的影响,使页面的元素在默认顺序中展示,按照页面的正常流动进行定位。。HTML元素默认为静态。

position:fixed(固定定位)
能使具有固定位置的元素相对于浏览器窗口被定位,并且即使窗口被滚动也不会移动。可以使用top, right, bottom, 和left的一个或多个属性来指定位置。
fixed参数能把元素从正常的顺序中拉出。可以无视其他元素的定位。设置了fixed的元素可以重叠在其他元素上。
position:relative(相对定位)
元素的定位是相对其正常位置。可以使用top, right, bottom, 和 left的属性来指定呈现的元素将如何移动。
relative定位的元素的内容可以移动并与其他元素重叠,但是元素的保留空间在正常流程中仍然保留。在table中设置position:relative是无效的。
absolute绝对定位
绝对位置元素相对于具有非静态位置的第一个父元素进行定位。 如果找不到这样的元素,则针对的是。绝对定位的元素将从正常流程中移除。 文档和其他元素的行为像绝对定位的元素不存在。绝对定位的元素可以重叠其他元素。

z-index属性

当元素位于正常流程顺序之外时(受position等属性影响时),它们可以重叠于其他元素。z-index属性指定元素的堆栈顺序(通过z-index的值可以决定哪个元素应放置在其他元素的前面或后面)。
z-index仅适用于定位元素(position:absolute,position:relative 或 position:fixed)。

float属性

  • 使用float

使用CSS中float,可以将元素向左或向右推,以允许其他元素环绕它。float通常与图像一起使用,float属性的值是 left,right,和 noneleft,right会使元素向左或者向右浮动。none能确保元素不会进行浮动。
如果连续放置几个浮动的元素,那么如果有足够的空间,它们将相互浮动。

  • 清除float

元素设置了float属性后会使后面的元素都受其影响,将环绕在其周围。为了避免这种情况,请使用clear属性。clear属性指定某个元素不受其他设置了float属性的元素的影响。
clear属性可以使用right,left和both来指定某一个元素不受其他浮动元素的影响。 默认值是none,它允许在两边都有浮动元素。

overflow属性

页面上的每个元素都是一个盒子,如果没有设置盒子的高度,那么盒子的高度将随着所需的内容的增大而变大。
CSS学习总结(6)——定位与布局_第1张图片
overflow属性有四个值:visible(默认值),scroll,hidden和auto

  • scroll值能阻止内容溢出,但会增加出滚动条,通过拉动滚动条可以浏览所有内容。
  div {
   width: 180px;
   height: 180px;
   background-color: rgb(235, 173, 80);
   float: left;
   overflow: scroll;
 }

CSS学习总结(6)——定位与布局_第2张图片

  • auto - 如果内容溢出被限制,则会添加一个滚动条,使超出的内容可以通过滚动展示出来。
  • hidden - 隐藏掉内容溢出的部分,溢出的内容将不可见。
  • overflow的默认值是visible

你可能感兴趣的:(HTML/CSS/JS)