盒子模型

-

文档流

• 网页：网页实际上是一层一层的，我们所设计的网页就是在这些层上面设计的网页就是在这些层上面设计，我们所看到的网页是最上面的一层

• 文档流概念：网页里的最下面的一层称为文档流，是网页的基础

  • 我们所创建的元素默认是在文档流中进行排列

• 对于元素的两个状态：

• 在文档流中

• 不在文档流中（脱离文档流）

• 块元素：

  • 页面中独占一行
  • 默认宽度是父元素的全部(会把父元素撑满)
  • 高度是被内容撑开（子元素）

• 行内元素：页面中不会独占一行，只占自身大小，行内元素在页面中自左向右水平排列

  • 行内元素的默认宽度和高度都是被内容撑开

盒子模型：（box model)

• Css将页面中所有的元素都设置为一个矩形的盒子

• 每个盒子都由以下几个部分组成

  内容区（content）

  元素中所有的子元素和文本内容都在内容区排列

  边框（border）

  属于盒子边缘，里面是盒子内部，出了边框都是盒子的外部

  • 设置边框，至少需要设置三个样式：

    1. 边框的宽度：border-width 有默认值 一般为3个像素

    2. 边框的颜色： border-color 有默认值 为黑色

    3. 边框的样式：border-style 默认值为 none 表示没有边框

       • solid 表示实线
       • dotted 点状虚线
       • dashed 虚线
       • double 双实线

  • border-XXX 可以指定四个方向的边框格式：（XXX是上面的三种样式-width,color,style）

    • 四个值：上，右，下，左
    • 三个值： 上，左右，下
    • 两个值： 上下，左右
    • 一个值：上下左右

  • 还有一组可以分别设置上下左右边框格式：border-XXX-width、color、style

    • XXX可以是：top,right,bottom,left
    • 其他两个与border-width格式一样

  • border 简写属性 ,可以通过该属性，同时设置边框所有的相关样式，并没有顺序要求

  • 语法：

    .box {
       border：soild red 20px;
       border:20px orange solid; 
    }
    

  • 此外还有：border-top

  • border-right

  • border-bottom

  • border-left

  • 圆角：border-radius 用来设置圆角（圆角设置的圆的半径大小）

    • border-radius：20px 10px 30px 20px;

    • 可分别指定四个角的圆角 左上 右上 右下 左下

    • 三个值：左上 ，右上左下，右下

    • 两个值：左上右下，右上左下

    • 50% 圆

  内边距（padding）：

  • 含义：内容区和边框之间的距离 ；

  • 一共有四个方向的内边距

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

  • 内边距的设置会影响到盒子的大小

  • 背景颜色会延伸到内边距上

    一个盒子的可见框的大小，由内容区，内边距和边框共同决定

  • padding：内边距的简写属性，可同时指定四个方向的内边距 语法格式与border一样

  外边距（margin)

  • 用来确定盒子的位置，不会影响盒子可见框的大小
  • 四个方向的外边距：
    • margin-top ：上外边距，设置一个值，元素会向下移动
    • margin-right：默认情况下设置margin-right不会产生任何效果
    • margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动（挤开别的元素）
    • margin-left：左外边距，设置一个正值，元素会向右移动

  ​ 元素在页面中是按照自左向右的顺序排列的

  • margin 也可设置负值，元素会向相反方向移动
  • margin 简写属性，可同时设置四个方向的外边距，用法和padding一样
  • margin 会影响到盒子实际占用空间

  盒子大小：

  • box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

  • 可选值：

    • content-box 默认值，宽度和高度用来设置内容区的大小
    • border-box 宽度和高度用来设置整个盒子可见框的大小
    • width 和height指的是内容区和内边距和边框的总大小

盒子的水平布局

• 元素水平方向的布局：
  元素在其父元素中，水平方向的位置由以下几个属性共同决定

  • margin-left

  • border-left

  • padding-left

  • width

  • padding-right

  • border-right

  • margin-right

    上述几个属性对应值的和=其父元素内容区的宽度（必须满足）

    如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整

    • 调整情况：
      这七个值中有三个值可设置为auto

      • width 默认值为 auto

      • margin-left 默认值 0

      • margin-right 默认值 0

        1. 如果七个值中没有auto的情况，则浏览器会自动调整margin-right的值使等式满足

        2. 如果某个值为auto，则会自动调整为auto的那个值以使等式成立

        3. 如果将一个宽度和一个外边距设置为auto，则宽度会调到最大，设置为auto的外边距自动为0

        4. 如果将三个值都设置为 auto ，则外边距都是0，宽度最大

        5. 如果将外边距都设置为auto ，宽度为固定值，则外边距设置为相同的值
           利用这一特点来使一个元素在其父元素中水平居中

           width:100px;
           margin:0 auto;  /*水平居中*/
           

盒子的垂直布局

• 默认情况下：父元素的高度被内容撑开

  • 子元素是在父元素的内容区中排列的

  • 如果子元素的大小超过了父元素，则子元素会从父元素中溢出
    使用overflow 属性设置父元素如何处理溢出的子元素

    • 可选值
      • visible 默认值 子元素会从父元素中溢出，在父元素外部的位置溢出
      • hidden 溢出的内容将会被裁剪，不会显示
      • scroll 生成两个滚动条，通过滚动条来查看完整的内容
      • auto 根据需要生成滚动条
      • overflow-x：单独处理水平方向
      • overflow-y：单独处理垂直方向

外边距折叠问题

• 相邻的垂直方向外边距会发生重叠现象

  1. 兄弟元素：

     • 兄弟元素之间相邻，垂直外边距会取两者之间的最大值（两者都为正值）

     特殊情况：如果相邻的外边距一正一负，则取两者之和

     ​ 都是负值，则取两者中绝对值较大的

  2. 父子元素：

     • 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）需进行处理
     • 处理方式详见浮动中高度塌陷的解决方案

  行内元素的盒模型：

• 行内元素不支持设置宽度和高度

• 行内元素可以设置 padding ，但是垂直方向 padding 不影响页面的布局

• 行内元素可以设置 margin ，但是垂直方向 margin 不影响页面的布局

• 行内元素可以设置 border ，但是垂直方向 border 不影响页面的布局

元素转换和显示状态

display

• 用来设置元素显示的类型

• 可选择：

  • inline 将元素设置为行内元素
  • block 将元素设置为块元素
  • inline-block 将元素设置为行内块元素
  • table 将元素设置为一个表格
  • none 元素不在页面中显示,不占据页面中的位置

• 行内块元素，既可以设置宽度和高度，又不会独占一行

visibility

• 用来设置元素的显示状态

• 可选值

  • visible 默认值，元素在页面中正常显示
  • hidden 元素在页面中隐藏不显示，但依然占据页面的位置