CSS盒子模型与常见问题

显示模式

    显示模式：标签（元素）的显示方式
    作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

    块级元素
    特点：
      独占一行
      宽度默认是父级的100%
      添加宽高属性生效

    行内元素
    特点：
      一行可以显示多个
      宽高尺寸由内容撑开
      设置宽高属性不生效

    行内块元素
    特点：
      一行可以显示多个
      宽高尺寸也可以由内容撑开
      设置宽高属性生效

转换显示模式

   	属性：display
    属性值        效果
    block        块级
    inline-block 行内块
    inline       行内
    
    display: inline;

盒子模型

    内容区域 – width & height
    内边距 – padding（出现在内容与盒子边缘之间）
    边框线 – border 
    外边距 – margin（出现在盒子外面）
    div {
        margin: 50px;
        border: 5px solid brown;
        padding: 20px;
        width: 200px;
        height: 200px;
        background-color: pink;
      }

边框线

	  四个方向边框线
	  属性名：border（bd）
	  属性值：边框线粗细  线条样式  颜色（不区分顺序）
	  属性值  线条样式
	  solid   实线
	  dashed  虚线
	  otted   点线
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      /* 实线 */
      /* border: 1px solid #000; */

      /* 虚线 */
      /* border: 2px dashed red; */

      /* 点线 */
      border: 3px dotted green;
    }

    单方向边框线
    属性名：border-方位名词（bd+方位名词首字母，例如，bdl）
    属性值：边框线粗细  线条样式  颜色（不区分顺序）
    方位词  方向
    top     上
    bottom  下
    left    左
    right   右
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      border-top: 1px solid #000;
      border-right: 2px dashed red;
      border-bottom: 5px dotted green;
      border-left: 10px solid orange;
    }

内边距

    作用：设置 内容 与 盒子边缘 之间的距离
    属性名：padding / padding-方位名词
    属性值：数字 + px
    提示：添加 padding 会撑大盒子

    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 四个方向 内边距相同 */
      padding: 30px;

      /* padding: 20px; */
      /* 单独设置一个方向内边距 */
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 40px;
      padding-left: 80px;
    }

padding 多值写法

技巧：从 上 开始 顺时针 赋值，当前方向没有数值则与 对面取值相同

取值个数	实例	含义
一个值	padding:10px;	四个方向内边距均为10px
两个值	padding: 10px 80px;	上下：10px；左右：80px
三个值	padding: 10px 40px 80px;	上：10px；左右：40px；下80px
四个值	padding: 10px 20px 40px 80px;	上：10px；右：20px；下：40px；左：80px

尺寸计算与内减法模式

    默认情况：盒子尺寸 = 内容尺寸 + 内边距尺寸 + border 尺寸
    结论：给盒子加 border / padding 会撑大盒子
    解决：
      手动做减法：减掉 border / padding 的尺寸
      內减模式：box-sizing: border-box（不需要手动减法，加padding和border不会撑大盒子）
    div {
      width: 200px;
      height: 200px;
      /* 手动减法 */
      /* width: 160px;
      height: 160px; */
      background-color: pink;

      padding: 20px;

      /* 內减模式：不需要手动减法，加padding和border不会撑大盒子 */
      box-sizing: border-box;
    }

外边距

     外边距 
     作用：拉开两个盒子之间的距离
     属性名：margin
     属性值：数字 + px
     提示：与 padding 属性值写法、含义相同

     版心居中
     左右 margin 值 为 auto（盒子要有宽度）
      /* 版心居中要求：盒子要有宽度 */
      width: 1000px;
      height: 200px;
      background-color: pink;

      /* 外边距 不会 撑大盒子 */
      /* 版心居中 */
      margin: 0 auto;

清除默认样式

    清除标签默认的样式，比如：默认的内外边距
    /* 清除默认内外边距 */
    * {
      margin: 0;
      padding: 0;
      /* 内减模式 */
      box-sizing: border-box;
    }

    /* 去掉列表的项目符号 */
    li {
      list-style: none;
    }

    /* 去掉超链接下划线 */
    a {
      text-decoration: none;
    }

元素溢出

    作用：控制溢出元素的内容的显示方式
    属性名：overflow
    属性值    效果
    hidden    溢出隐藏
    scroll    溢出滚动（无论是否溢出，都显示滚动条位置）
    auto      溢出滚动（溢出才显示滚动条位置）
    div {
      width: 200px;
      height: 200px;
      background-color: pink;

      overflow: hidden;

      /* overflow: scroll; */

      /* overflow: auto; */
    }

外边距问题

合并现象

    场景：垂直排列的兄弟元素，上下 margin 会合并
    现象：取两个 margin 中的较大值生效
    .one {
      width: 100px;
      height: 100px;
      background-color: brown;
      margin-bottom: 80px;
    }

    .two {
      width: 100px;
      height: 100px;
      background-color: orange;
      margin-top: 50px;
    }

塌陷现象

    场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题
    现象：导致父级一起向下移动
    解决方法：
      方式一： 取消子级margin，父级设置padding
      方式二： 父级设置 overflow: hidden
      方式三： 父级设置 border-top
    .father {
      width: 300px;
      height: 300px;
      background-color: pink;
      /* padding-top: 50px;
      box-sizing: border-box; */

      /* 溢出隐藏 */
      /* overflow: hidden; */

      border-top: 1px solid #000;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: orange;

      margin-top: 50px;
    }

行内元素 – 内外边距问题

    场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
    解决方法：给行内元素添加 line-height 可以改变垂直位置
    span {
      /* margin 和 padding 属性，无法改变垂直位置 */
      margin: 50px;
      padding: 20px;
      /* 行高可以改变垂直位置 */
      line-height: 100px;
    }