跳到主要内容

简介

display 属性依赖于称为相对定位（ relative positioning ）的概念，它意味着元素将相对于页面上的其它元素进行定位。 CSS 还支持绝对定位（ absolute positioning ），它允许独立于其它元素把一个元素放在页面上的精确位置。

display 用来定义元素的显示类型。其中，第二行为列表项目或是表格类项目，在网页设计中不常用:

  • display ： none | inline | block | inline-block
  • display ： list-item | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column-group | table-column | table-footer-group| table-header-group
  • display ： run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

第三行为 css 3 新增属性。

  • inline 行内元素
  • block 块级元素
  • inline-block 行内块

父元素 { font-size: 0; } 。

由于 img 元素也是 inline-block 元素，因此我们也能使用" font-size:0 "来去除图片之间的间距。

  • none 隐藏

  • display:none 的元素被隐藏之后，不占据原来的位置。也就是说彻底地消失了，看不见也摸不着

  • visibility:hidden 的元素被隐藏之后，依然占据原来的位置。也就是说并没有彻底消失，看不见但摸得着

  • table 表

  • table-caption 表头

  • table-row 表行

  • table-cell 表格

  • 图片垂直居中于元素

  • 等高布局

  • 自动平均划分元素，并且在一行显示

run-in​

将 CSS 属性 display 定义为 run-in 后，会根据周围元素来决定盒子类型，它有以下三个特点。

  • 如果定义为 run-in 的元素包含一个块级元素，那么它也可被理解为块级元素
  • 定义为 run-in 的元素的相邻兄弟元素（位于元素后面的兄弟元素）如果是块级元素，那么这个兄弟元素会变成行内元素
  • 如果是其它情况，那么 run-in 元素可理解为块级元素

块级元素和内联元素​

块元素具有如下特点

  • 独占一行，排斥其它元素跟其位于同一行，包括块元素和行内元素
  • 块元素内部可以容纳其它块元素或行元素
  • 可以定义高度（ height ），也可以定义宽度（ width ）
  • 可以定义四个方向的 margin 属性

行内元素具有如下特点

  • 可以与其它行内元素位于同一行
  • 行内内部可以容纳其它行内元素，但不可以容纳块元素，不然会出现无法预知的效果
  • 无法定义高度（ height ），也无法定义宽度（ width
  • 可以定义 margin-left 和 margin-right ，无法定义 margin-top 和 margin-bottom

浮动​

float ： none | left | right

  • 浮动空间

  • 元素定义了宽高，则以设置的值显示

  • 包含其它对象，则紧紧包裹对象或内容区

  • 如果未设置且不包含，则缩为一个点

  • 浮动位置

  • left

  • right

  • 浮动环绕

浮动影响​

  • 如果一个元素设置了浮动，则不管这个元素是什么类型，都会转化为块元素，也就是 display 属性值为 block

  • 如果一个元素设置了浮动，它会脱离正常文档流。如果浮动元素的高度 height 大于父元素的高度 height ，或者父元素没有定义高度 height ，此时浮动元素会脱离父元素。这就是我们常见的"父元素高度塌陷"

  • 当一个浮动元素碰到同一个方向的兄弟元素时，这些元素会从左到右、从上到下，一个接着一个紧挨着排列

  • 当一个浮动元素碰到同一个方向的兄弟元素时，这两个元素会移向两边（如果父元素宽度足够的话）

  • 在实际开发中我们使用了浮动之后，尽量清除浮动，不然会有预想不到的后果

  • 当父元素同时也是一个浮动元素的时候，这个父元素会自适应地包含该子元素

浮动的负作用​

  • 父元素高度塌陷，从而导致边框不能撑开，背景色无法显示。
  • 页面布局错乱

清除浮动​

常见的清除浮动的方法有三种。

  • clear:both
  • overflow:hidden
  • ::after 伪元素 使用" ::after 伪元素"结合" clear:both "来实现
clear ： none | left | right | both

清除不是清除别的元素浮动，而是清除自己。如果左右两侧存在浮动元素，则把当前元素清除到下一行显示，而不是将前面的浮动元素清走，或者上一行显示。根据 HTML 解析规则，当前元素前面的对象不会受后面的影响

浮动嵌套​

  • 浮动包含框
  • 包含浮动对象