前端HTML & CSS 基础入门（9）布局与定位

块级元素和行内元素

HTML里的元素可以分为块级元素和行内元素两大类：

块级元素：块级元素典型特点就是它要独占一行，它后面跟随的其它元素都会被挤到下一行，可以将块级元素理解为一个矩形容器，有自己的宽度和高度。比如：

• 等都是块级元素。

  行内元素：行内元素与块级元素相反，在宽度允许的情况下，一行可以容纳多个行内元素，它没有固定形状，无法设置高度与宽度。比如：等都是行内元素。

  相互转换：我们可以使用display:inline将块级元素转换为行内元素，可以使用display:block将行内元素转换为块级元素。

  示例代码：

  
  
  
      
      
      
  
  
      
  块元素div独占一行
      
  块元素p独占一行
      行内元素span
      行内元素a
      行内元素strong
      
  块元素p转换为行内元素
      行内元素span转换为块级元素,独占一行
  
  
  

  image

  流动布局

  流动布局就是元素按照正常文档流自上而下的排列，所有元素按先后顺序逐行往下排序，块级元素独占一行，行内元素在每行中按照从左到右的顺序依次排列。流动布局是网页默认的显示规则。

  示例代码：

  
  
  
  
      
      
  
  
      
  div块级元素（独占一行）
      span1行内元素strong行内元素
      
  p块级元素（独占一行）
      i行内元素em行内元素(转换为块级元素，独占一行)
  
  
  

  image

  浮动布局

  浮动布局是利用CSS完成网页布局最重要的方式，使用极其灵活多变，这里仅说明基本的概念，要熟练掌握还需多看、多练。在上面的流动布局我们了解到以div为首的块级元素会独占一行，在网页布局中，最常用的就是div，通常把div当做一个盒子，再来把一个个div盒子进行排列。但是div独占一行，我们想在一行并列放置两个、甚至三个div盒子怎么办呢？浮动就可以完成这个事情。看个例子：

  
  
  
  
      
      
  
  
      
  
          
  div1未设置浮动，独占一行
          
  div2左浮动,设置了宽和高
          
  div3右浮动
      
  
  
  

  image

  上面的例子定义了4个div元素，【outside】是最外层div，可以理解为一个大盒子里面放三个小盒子，为显示直观，每个div都设置了边距和背景。

  ▶div1未设置浮动，它在大盒子里面独占一行，为它设置了红色的虚线边框，设置了边距。

  ▶div2设置了左浮动，填充了绿色背景，设置了宽和高，此时div2不在独占一行，而是按照设置的宽度和高度靠左显示。

  ▶div3设置了右浮动，填充了红色背景，没有设置宽和高，此时div3会根据里面的内容确定其尺寸，然后靠右显示，同样不在独占一行。

  定位布局

  浮动布局比较灵活，不易控制。定位布局相对而言较易使用，当然，在实际开发中，往往是两者配合使用，以满足布局的个性需求。定位布局主要是通过为【position】属性设置不同的值来完成布局的。该值主要有以下三种：

  1、值fixed（固定定位）****：以浏览器为基准，指定定位元素与浏览器4条边的距离完成定位，分别通过top、bottom、left和right这四个属性的设置来完成。其实，这4个属性未必全部都需要设置，只需要设置top和left即可。当元素设置了固定定位，如果页面过长出现滚动条，它也不会随滚动条的滚动而移动。

  示例代码：

  
  
  
  
      
      
  
  
      
  div1:未定位
  第二行
  第三行
  第四行
      
  div2：设置固定定位，距离浏览器上边框40px,左边框150px
  
  
  

  image

  2、值relative（相对定位）：以需定位元素按正常文档流所在位置为参照，然后使定位元素相对于它在原本的正常文档流的位置偏移指定的距离。

  示例代码：

  
  
  
  
      
      
  
  
      
  第一个盒子
      
  第二个盒子
      
  第三个盒子
  
  
  

  image

  3、值absolute（绝对定位）：绝对定位的元素是相对于离它最近的一个已定位的父元素为参照进行定位的（默认是body）。下面的示例有两个div，可以理解为父盒子和子盒子，父盒子设置绝对定位，以body为参照设置位置。子盒子也是绝对定位，以父盒子为定位参照。

  示例代码：

  image

  在图上加上点注释看得会更清楚。

  image
  
  自己整理了一份最全前端学习资料,从最基础的HTML+CSS+JS [炫酷特效，游戏，插件封装，设计模式]到移动端HTML5的项目实战的学习资料都有，送给每一位前端小伙伴。企鹅裙：685910553（前端资料分享）。有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。