「前端开发」 -

CSS-Layout-01

CSS布局 —— 布局初步

Posted by eliochiu on October 22, 2022

标准流

标准流(normal flow)是CSS默认的布局方法,即渲染时按照从左到右、从上到下的方式排列。

这是最基本的布局方式,除非元素设置了浮动、定位、弹性盒布局或栅格布局(他们会脱离标准流,简称脱标)。

元素的显示模式

元素在标准流中共有三种显示模式:块元素、行内元素和行内块元素,他们分别有着各自的特点。

元素的显示模式通过控制CSS样式中的display属性实现:

  • display: block:将元素设置为块元素。
  • display: inline:将元素设置为行内元素。
  • display: inline-block:将元素设置为行内块元素。

块元素

块元素有以下特点:

  • 每个块元素都独占一行,从上至下排列。
  • 可以为块元素指定宽度、高度和内外边距等属性。
  • 默认宽度是容器(父元素)的100%。
  • 是一个容器及盒子,里面可以放行内或者块级元素。

常见的块元素有:p, h1~h6, div, ul, ol, dl, dd, dt, li, table, header, footer, nav, form等。

注意:文字类的块元素(h1-h6, p)内不能放置其他块元素。

行内元素

行内元素区别于块元素,具有以下特点:

  • 相邻元素在一行上,从左到右依次排列。
  • 行内元素的宽度和高度属性是无效的。
  • 行内元素默认宽度就是他文字本身的宽度,完全由文字撑开。
  • 行内元素内部只能容纳文本或者其他行内元素。
  • 行内元素仅有水平方向的marginpadding可以生效,垂直方向无效。

常见的块元素有:span, a, em, strong, ins, del, b, i, u等。

注意:超链接内部不能放置超链接,超链接内部可以放置块元素,但最好将超链接转成块元素。

行内块元素

行内块元素是行内元素和块元素的结合,同时保留了两种元素的部分特点。

  • 元素的排列上,保留了行内元素的特点,相邻元素在一行上,从左到右依次排列。
  • 宽度高度等属性上,保留了块元素的特点,可以为其指定宽度、高度和内外边距等属性。

常见的行内块元素有img, input, button, textarea, select