css基础教程之布局属性

css基础教程之布局属性

一、display

none 隐藏对象

inline 指定对象为内联元素。span a

block 指定对象为块元素 div

inline-block 指定对象为内联块元素

flex 将对象作为弹性伸缩盒显示。

  div{display:block;}
  span{display:inline;}

二、float 浮动

none 设置元素不浮动

left 设置元素浮在左边

right 设置元素浮在右边

  .float{
    float:left;
  }

三、clear 清除浮动

none 允许两边都可以有浮动对象

both 不允许有浮动对象

left 不允许左边有浮动对象

right 不允许右边有浮动对象

  .clear{clear:both;}
  <div class="float"></div>
  <div class="clear"></div>

四、visibility 可见性

visible：设置对象可视

hidden：设置对象隐藏

collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

  .div{visibility:visible;}

五、overflow 内容溢出处理

可以分拆：overflow-x,overflow-y

元素定义宽高之后生效

visible 对溢出内容不做处理，内容可能会超出容器。

hidden 隐藏溢出容器的内容且不出现滚动条。

scroll 隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。

auto 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。

  .over{overflow:auto;}