CSS哪些方法可以改变布局

  • The display property — Standard values such as block, inline or inline-block can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see Types of CSS boxes for more information). We also have entire layout methods that are switched on via specific display values, for example CSS Grid and Flexbox, which alter how elements inside the element they are set on are laid out.
  • Floats — Applying a float value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.
  • The position property — Allows you to precisely control the placement of boxes inside other boxes. static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewport.
  • Table layout — features designed for styling the parts of an HTML table can be used on non-table elements using display: table and associated properties.
  • Multi-column layout — The Multi-column layout properties can cause the content of a block to layout in columns, as you might see in a newspaper.

display:  block/inline/inline-block

float: left..

position: 

display: table

column-count: 3

阅读量: 489
发布于:
修改于: