盒子模型 布局

文档流

• 网页是一个多层结构 一层摞着一层 通过CSS为每一层设置样式
• 作为用户只能看到最顶层
• 最底层叫文档流 是网页的基础 我们创建的元素默认在文档流中排列
• 元素有两个状态：
     1.在文档流中
     2.不在文档流中(脱离文档流)
• 元素在文档流中有什么特点：
  1.块元素 在页面中独占一行(自上向下垂直排列) 默认宽度是父元素的全部(会把父元素撑满) 默认高度是被内容撑开(子元素)
  2.行内元素 不会独占页面一行 只占自身大小(在页面中自左向右水平排列) 如果一行中不能容纳下所有的元素则会换到第二行继续自左向右排列(书写习惯一致)

盒模型 盒子模型 框模型(box model)

水平方向

• CSS将页面中所有元素设置为一个矩形的盒子
• 将元素设置为矩形的盒子后 对页面的布局变成了将不同的盒子摆放到不同的位置
• 每一个盒子都有以下几个部分组成：
     1.内容区（content） 元素中的所有的子元素和文本内容都在内容区中排列 内容区大小由width（内容区宽度）和height（内容区高度）两个属性设置
     2.内边距（padding） 内容区和边框之间的距离
     3.边框（border）盒子边缘 要设置边框至少设置三个样式：边框宽度（border-width） 不写也有 一般为3px 指定四个方向边框宽度 四个值：上 右 下 左 三个值：上 左右 下 两个值：上下 左右 一个值： 上下左右 边框颜色（border-color） 用来指定边框颜色 分别指定四个边框的颜色 可被覆盖 可省略不写省略则自动使用color的颜色值边框样式（border-style） solid 实线 dotted 点状虚线 dashed 虚线 double 双线 默认值为none
     4.外边距（margin） 不影响盒子可见框大小但会影响盒子的位置
• 一个元素在其父元素中，水平布局必须要满足以下的等式
  margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度（必须满足） 除width外默认值都为0 以上等式必须满足，如果相加结果使等式不成立，则成为过度约束，等式会自动调整
• width margin-left margin-right 可以设置为auto

垂直方向布局

• 默认父元素高度被内容撑开 子元素是在父元素的内容区排列的，如果子元素大小超过父元素，则会溢出 使用overflow（overflow-x、overflow-y）属性来设置父元素如何处理溢出的子元素
  可选值：visible 默认值 不用管溢出现象
                 hidden 隐藏 溢出的内容将会被裁减不会显示
                 scroll 生成两个滚动条
                 auto 根据需要生成滚动条
• 垂直外边距的重叠（折叠） 相邻的垂直方向外边距会发生重叠现象
  兄弟元素（可以不用处理）：兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值） 特殊情况：1. 相邻的外边距一正一负，则取两者和 2.相邻的外边距都是负值，则取两者中绝对值较大的
  父子元素（必须要处理）：父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

行内元素盒模型

• 行内元素不支持设置宽度和高度
• 行内元素可以设置padding 但是垂直方向padding不会影响页面布局
• 行内元素可以设置border 垂直方向的border不会影响页面的布局
• 行内元素可以设置margin 垂直方向的margin不会影响布局
• display 用来设置元素显示的类型
  可选值：inline 将元素设置为行内元素
                 block 将元素设置为块元素
                 inline-block 将元素设置为行内块元素 行内块 既可以设置高度和宽度又不会独占一行
                 table 将元素设置为一个表格
                 none 元素不在页面中表示 隐藏元素
• visibility 用来设置元素的显示状态
  可选值：visible 默认值 元素在页面中正常显示
                 hidden 元素在页面中隐藏 不显示 但是依然占据页面位置

浏览器默认样式

• 通常情况下 浏览器都会为元素设置一些默认样式
• 默认样式的存在会影响到页面的布局 通常情况下在编写网页时必须要去除掉浏览器的默认样式（pc端页面）
• 去除浏览器默认样式常用方式
  
  *{
  margin:0;
  padding:0;
  }
  去除项目符号 list-style:none;
• text-decoration: none; 文本修饰 去掉下划线

盒子的尺寸

• 默认情况下 盒子可见框的大小由内容区、内边距和边框共同决定
• box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
  可选值：content box 默认值 宽度和高度用来设置内容区大小
                 border-box 宽度和高度用来设置整个盒子可见框的大小 width和height指的是内容区和内边距和边框的总大小

轮廓阴影和圆角

• outline 设置元素的轮廓线 用法和border一致
  不同点：轮廓不会影响到可见框的大小
• box-shadow 设置元素的阴影效果 不会影响页面布局
  第一个值 水平偏移量 设置阴影水平位置 正值向右移动 负值向左移动
  第二个值 垂直偏移量 设置阴影垂直位置 正值向下移动 负值向上移动
  第三个值 阴影模糊半径
  第四个值 阴影颜色
• border-radius 设置圆角半径的大小 border-top-left-radius 左上角border-top-right-radius 右上角 border-bottom-left-radius 左下角 border-bottom-right-radius 右下角
• 将元素设置为圆形border-radius:50%;