css基础－视觉格式化模型

第一件事情：创建盒子－把哪些内容用哪个盒子去摆放

• 视口（viewport）

  • 浏览器的可视区域
  • 用户通过视口查看网页内容（透过窗户看风景）

• 块级元素(block-level elements)

  • 会被格式化为块状的元素
  • 常见如 p div section
  • 将display设置为block table list-item使元素为块级

注意元素是html标签 区分与盒子的概念

• 行级元素(inline-level elements)

  • 不会为其内容生成块级框
  • 让其内容分布在多行中
  • 将display设置为inline inline-block inline-table

• 盒子的形成
  盒子 不等于 元素 一个元素可以产生多个盒子。这里的box是css布局的概念，可以理解成一堆杂乱的内容，css在布局的时候生成一些盒子把这些东西给整齐的按照一定规则摆放好，盒子里面套盒子。

  • 每个块级元素生成一个主块级盒子(principal block-level box)，用它来装子级盒
  • 每个行内元素生成一个行级盒，行级盒分布于多行（可以理解成一个软盒子，可以折行）

<p><span>Learn to Code HTML & CSS is a simple ...</span></p>

可以看到下图中span元素生成了一个行级盒子，这个盒子被分布在了三行

• Box Model 需要注意的几个地方

  • 四层结构可以理解成快递盒，content padding border margin
  • margin折叠
    margin可以理解成在这个盒子外边多远的距离内不能再摆放别的盒子
  • box-sizing
    width height 默认指得是content-width和 content-height,可以通过box-sizing:border-box修改,通常在项目中使用继承来实现比较好

    * {
       box-sizing:inherit;
    }
   html
   {
       box-sizing:border-box;
    }
   .someblock
  {
       box-sizing:content-box;
  } 
  

• 行盒的margin-top和margin-bottom不会产生作用，左右有作用（注意一个行盒）

• 行盒的padding-top和padding-bottom不会影响布局，只是看起来和border的距离变化了 那些行还是待在原处

• 块级盒子中子盒子的生成

  • 可以包含多个子块级盒子
  • 可以包含多个子行级盒子
  • 不在行级盒子里面的文字会生成匿名盒子
  • 块级中不能同时包含块级和行级，会生成匿名块级盒来包含行级元素

• 行级盒子中子盒子的生成

  • 可以包含多个子行级盒子
  • 行级盒子包含一个块级盒子时会被拆成两个行级盒子，这两个盒子又分别被匿名块级盒子包含。 （每个盒子占据一行的表现）

• display 将一个元素显示成什么形式的盒子

  • block 生成块级盒
  • inline 生成行级盒
  • inline-block 生成行级盒，为内容声称块级盒
  • none 注意排版时将其忽略，不占用位置 visibility 则元素显示会占用位置 理解成透明的

• generated content 用于控制在元素前后多生成一个盒子

  • 控制元素
  • ::before 和::after
  • content

<a href="111">访问链接</a>
<style>
a::before{
    content:'\2693';
}
a::after{
   content:'(' attr(href) ')';
}
</style>