CSS-2 布局

文档流

网页是多层结构，最底部的一层为文档层
创建的元素默认都在文档层中排列
元素有两种状态：

• 在文档流中
• 不在文档流中

特点：

• 块元素
  在页面独占一行
  默认宽度是父元素的宽度
  默认高度是子元素内容的高度
  自上向下排列
• 行内元素
  不会独占一行
  默认宽度和高度都取决于内容
  自左向右排布

盒模型

• 盒模型：由外边距(margin)、边框(border)、内边距(padding)、内容区(content)组成
  盒子大小：默认情况下，由内容区、内边距和边框相加决定
                 box-sizing可设置盒子大小的计算方式：
                 content-box默认，宽度和高度为内容框的大小
                 border-box宽度和高度为可见框（内容区+内边距+边框）的大小

  边框：边框大小影响盒子大小，至少需设置：border-width,border-color,border-style
  内边距：padding-top、padding-right、padding-bottom、 padding-left
             可影响盒子大小，
  外边距：外边距不会影响盒子可见框的大小，但会影响盒子的位置
              margin-top和margin-left 正值则使自身向相反方向移动
              margin-right不会产生效果
              margin-bottom正值则使相邻元素向下移动
  注意：垂直方向相邻外边距会发生重叠
           兄弟元素：同号则取绝对值最大的，异号则相加
           父子元素：相邻外边距，子元素会传递给父元素
  水平布局：元素在其父元素容器内的水平布局由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right决定
                  原则：上述元素相加=父元素内容区的宽度
                  情形：上述元素都未设auto，则自动调整margin-right来使等式满足
                            margin-left、width、margin-right中：
                           -任一为auto,则自动调整该属性
                           -若外边距和宽度同时设为auto，则外边距为0，宽度最大
                           -两外边距为auto，则局中
  垂直布局：元素在父元素的垂直排布：
                   子元素高度超过了父元素，则溢出，使用overflow来处理溢出的元素
                   overflow的值：
                   visible溢出显示\hidden溢出裁剪\scroll双向滚动\auto根据需要滚动

• 行内元素的盒模型：不支持宽度和高度，只有margin\border\padding
                               行内元素和块元素之间的转换可用display属性：
                               inline行内/block块/inline-block行内-块/table表格/none不显示
                               visibility可用来设置元素的显示状态：
                               visibel正常显示/hidden不显示，但占位

• 去掉默认样式：采用通配符选择权去掉默认样式 或者 采用外部引用样式表清除默认样式

• 轮廓和圆角：
  1、轮廓：
  1.1 box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
       第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
       第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
       第三个值 阴影的模糊半径
       第四个值 阴影的颜色
       box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;
  1.2 outline 用来设置元素的轮廓线，用法和border一模一样
       轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
  1.3 border-radius 设置圆角 圆角设置的圆的半径大小
       border-top-left-radius:20px
       border-radius:50% 圆形