前端学习笔记之--CSS(2)

盒模型

      box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

    盒子类型

     1. 行盒，display等于inline的元素     行盒在页面中不换行

     2. 块盒，display等于block的元素       块盒独占一行

    浏览器默认样式表设置的块盒：容器元素、h1~h6、p等

    常见的行盒：span、a、img、video、audio、br等

    盒子的组成部分

   

    1.内容 content

        width、height，设置的是盒子内容的宽高

        内容部分通常叫做整个盒子的内容盒 content-box

    2.填充(内边距) padding

        盒子边框到盒子内容的距离

        padding-left、padding-right、padding-top、padding-bottom

        padding: 简写属性

        padding: 上 右 下 左

        填充区+内容区 = 填充盒 padding-box

    3.边框 border

        边框 = 边框样式 + 边框宽度 + 边框颜色

        边框样式：border-style 边框宽度：border-width 边框颜色：border-color

        边框+填充区+内容区 = 边框盒 border-box

    4.外边距 margin

        边框到其他盒子的距离

        margin-top、margin-left、margin-right、margin-bottom

    盒模型的应用

     1.改变宽高范围

        默认情况下，width 和 height 设置的是内容盒宽高。

     页面重构师：将psd文件（设计稿）制作为静态页面

        衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒

        1.1 精确计算

        2.2 CSS3：box-sizing

   2. 溢出处理

        overflow，控制内容溢出边框盒后的处理方式

   3. 断词规则

        word-break，会影响文字在什么位置被截断换行

        normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）

        break-all：截断所有。所有字符都在文字处截断

        keep-all：保持所有。所有文字都在单词之间截断

    4. 空白处理

        white-space: nowrap

    

    行盒的盒模型

     常见的行盒：包含具体内容的元素    span、strong、em、i、img、video、audio

     显著特点

        1. 盒子沿着内容沿伸

        2. 行盒不能设置宽高

            调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。

       3.内边距（填充区）

            水平方向有效，垂直方向不会实际占据空间。

      4.边框

            水平方向有效，垂直方向不会实际占据空间。

      5.外边距

            水平方向有效，垂直方向不会实际占据空间。

    行块盒

        display：inline-block 的盒子     不独占一行      盒模型中所有尺寸都有效

        空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间

        大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素

        少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

        可替换元素：img、video、audio

        绝大部分可替换元素均为行盒。

        可替换元素类似于行块盒，盒模型中所有尺寸都有效。