第3章 块级元素 和 内联元素

块级元素 和 display为block的元素，不是一个概念，

比如<li>默认是display:list-item <table>默认是display:table

他们都的块级元素（都符合块级元素的基本特征，单独一行，如果是多个块级 元素 则 换行显示）

因display的属性值的不同，

display:block; 由外在的块级盒子 和 内在的块级容器盒子 组成

display:inlien-block; 由外在内联盒子 和 内在的块级容器盒子

display:inline; 内外都是 内联盒子

 

这也是display:inlien-block 既能图文一行显示，又能直接设置width / height

因为有两个盒子 ，外面盒子是inline级别 里面盒子是block级别

 

实际遵循上面的理解可以补脑成 (平时的写法实际是一种简写)

display:block; 补脑 display:block-block

display:table; 补脑 display:block-table

根据 块级元素有换行的特性，在配合clear 可以清除浮动

     .box{
            padding:5px;
            background-color: gray;
        }
        .box>img{
            float: left;
        }

        .clear::after{
            content: "";
            clear: both;
            display: block;  
        }


    <div class="box clear">
        <img src="./img/bg-1.png"/>
    </div>

 

display:inline-table 的盒子是 由外面内联盒子 和里面的table盒子，得到一个可以和文字在一行中显示的表格，

和文字平起平做的表格

      div.inline-table{
            display: inline-table;
            width: 128px;
            margin-left: 10px;
            border:solid red 1px;
        }
        .inline-table>p{
            display: table-cell;
        }

    <div class="inline-table">
       <p>第一行</p>
       <p>第二行</p>
    </div>

---

 

块级元素的流体特性主要体现在水平方向上
元素都有内外两个盒子 ，设置的 width / height 属性作用在：内在盒子上

width:auto 在不同场景下的宽度表现
1. 充分利用可以空间
如<div> <p>这些元素的宽度默认是100%于父容器

2，收缩与包裹
典型代表就是浮动 绝对定位 inline-block元素 或table元素
css3中的 fit - content 指的就是这种宽度表现

3. 收缩到最小
最容易出现在table-layout 为auto的表格中
当每一列空间都不够的时候，文字能断就断，但中文是随便断的，英文单词不能断，第一列被无情的每个字都断掉 形成一柱擎天 （也可叫min-content）

4. 超出容器限制
除非有明确的width相关设置，否则上面3 种情况尺寸都不会主动超过父级容器宽度的，
除特殊情况：如内容很长的连续的英文和数字 或者内联元素设置了white-space:nowrap

子元素既保持inline-block元素的收缩性，又同时让内容宽度变大 ，直接无视父级容器的宽度限制，这现象 这个属性值叫作max - content

.father{
            width: 150px;
            background-color: red;
            white-space: nowrap;
            padding: 10px;

        }
        .child{
            display: inline-block;
            background-color: gray;
            padding: 5px;
        }

    <div class="father">
        <span class="child">恰似一江春水向东流,流到断崖也不回头</span>
    </div>

 

对于块状元素，如果width:auto 则元素会如水流般的充满整个容器，而一旦设定了width具体数值 则元素的流动性就会阻断
流动性 并不是看上去宽度100%显示这么简单，而是一种margin / border / padding / content 内容区域自动分配水平空间的机制

  .width {
      width: 100%;
    }

    .nav {
      background-color: #cd0000;
    }

    .nav-a {
      display: block;
      text-decoration: none;
      color: #fff;
      margin: 0 10px;
      padding: 9px 10px;
      border-bottom: 1px solid #b70000;
      border-top: 1px solid #de3636;
    }

    .nav-a:first-child {
      border-top: 0;
    }

    .nav-a+.nav-a+.nav-a {
      border-bottom: 0;
    }


<h4>无宽度,借助流动性</h4>
  <div class="nav">
    <a href="#" class="nav-a">导航1</a>
    <a href="#" class="nav-a">导航1</a>
    <a href="#" class="nav-a">导航1</a>
  </div>

  <h4>有宽度设置</h4>
  <div class="nav">
    <a href="#" class="nav-a width">导航1</a>
    <a href="#" class="nav-a width">导航1</a>
    <a href="#" class="nav-a width">导航1</a>
  </div>

 

width 是作用在 内在盒子上的，内在盒子又分成了4个盒子content box padding box border box 和 margin box

分别给他们起了名字，content-box padding-box border-box ,唯独margin box 没有对应的css关键字名称，因为没有任何场景需要用到margin box

margin 的背景永远是透明的，不可能作为background-clip 或 background-origin属性值出现，，如果margin 设置了宽 高，本身的尺寸是不会因为margin值变化而变化 ,
因此作为box-sizing的属性值存在也就没有意义，既然无用武之地，自然就被抛弃了

content box环绕着width 和 height给定的矩形

这个width :100px 是如何作用到<div>元素上的

<div>元素默认 的 padding border margin 都是0 ，所以div 的宽度就是100，

如果给水平方向加 padding 和 border 各加20px 那div的宽度就不是100，而是180（左右各40）

如果避免 元素尺寸 不会随着padding border 值的变大而变大 有2种解决方案
1，宽度分离原则 （width独立占用一层标签，而padding border margin利用流动性在内部自适应呈现） 无需烧脑子去计算
嵌套一层标签，父元素定宽，子元素因为width使用的是默认值auto 所以会如流水般的自动填满父级容器

       .father{
            width:120px;
        }
        .son{
            padding: 20px;
            border:solid red 1px;
        }
   
<div class="father">
    <div class="son">子元素的宽度还是120px</div>
</div>

 

2，改变width / height 作用细节的box-sizing ( 即无须计算，又无须额外嵌套标签的实现，就可改变width作用细节的box-sizing属性 ) IE8浏览器支持 但要加上-ms-私有前缀 IE9开始就无需要私有前缀了

 .father{
            width:120px;
            padding: 20px;
            border:solid red 1px;
            box-sizing: border-box;
        }
     
<div class="father">宽度还是120px</div>

 

为何box-sizing 不支持margin-box
margin-box 是一个不会改变元素尺寸的盒子，没有让box-sizing支持的道理
box-sizing就是改变尺寸作用规则的，margin只有在width为auto的时候可改变元素的尺寸，但此时元素已处于流动性状态 根本不需要box-sizing , 总之margin-box本身就没有价值

box-sizing 被发明出来 最大的初衷是 ：解决替换元素宽度自适应问题
css重置 input , textarea ,img video object { box-sizing : border-box };

唯一离不开box-sizing : border-box的就是原生普通文本框<input> 和 文本域<textarea> 的 100%自适应父容器宽度
<textarea>为替换元素 尺寸由内部元素决定，他的宽度是不受display水平影响，无论display:inline 还是 block
也就无法让尺寸100%自适应父容器，只能通过width 设定 让 <textarea> 尺寸100%自适应父容器
因此，box-sizing : border-box 才是解决之道 （因textarea 是有border 且还需一定padding大小 ，width / border / padding注定要共存 同时还需width:100%自适应容器）

<textarea> 非替换元素，如果display:block 则具有流动性 宽度由外部尺寸决定

 .textarea {
      border: solid red 1px;
    }

    textarea {
      width: 100%;
      -ms-box-sizing: border-box;/* IE8 */
      box-sizing: border-box;
    }

<div class="textarea">
    <textarea rows="5" placeholder="色块是容器"></textarea>
  </div>

 

---

---

外部尺寸 ，是"流" 的精髓所在

---

一 ，外部尺寸与流体特性
1，正常流宽度
块级元素 无宽度设置 ，元素可借助流动性显示
块级元素 有宽度设置，元素的流动性会消失

2，格式化宽度 （仅出现在"绝对定位模型" 中 也就是出现在position:absolute 或 fixed 的元素中）
默认：绝对定位元素的宽度表现是"包裹性" 宽度由内部尺寸决定
例外情况下宽度是由外部尺寸决定的：非替换元素 当left /right 或 top /bottom 对立方位属性值 同时存在时，元素的宽度表现为 格式化宽度，
宽度的大小相对于最近的具有定位特性 (position属性值不是static) 的祖先元素计算
例如：下面<div>元素最近的具体定位特性的祖先元素的宽度是1000像素 则这个<div>元素的宽度是960（1000-20-20）

 div{
            position: absolute;
            left: 20px;
            right: 20px;
        }

 

二， 内部尺寸与流体特性 元素的尺寸由内部元素决定，，如果这个元素里面没有内容，宽度为0,那就是应用的“内部尺寸”
内部尺寸的三种表现形式
1，包裹性
除了"包裹" 还有 "自适应性"

自适应性 指：元素尺寸由内部元素决定，但永远小于 "包含块" 容器的尺寸 ；（除非容器尺寸小于元素的"首选最小宽度"）

换句话说就是 包裹性 元素 冥冥中有个max-width:100% 罩着的感觉（实际上有区别，只是为方便理解 才有这样的说法）

一个元素，如果其display 属性值是inline-block ,那里面的内容在多，只要是正常的文本 宽度也不会超过容器（除非"首选最小宽度" 比容器宽度还要大，否则无需担心某个元素内容太多而破坏布局）
按钮是具有代表性的inline-block元素 ，按钮是展示 包裹性最好的例子
具体表现：按钮文字越多，宽度越宽（内部尺寸特性）但如果文字足够多 则会在容器的宽度出自动换行（自适应特性）

在实际中 按钮上的文字个数比较有限，没有机会换行

<button>会自动换行，按钮最大宽度就是容器的240px

<input>标签按钮，默认white-space :pre;是不会换行的，需要把pre 重置为normal

 .box{
            width: 240px;
            margin: 20px 0;
        }

    <div class="box">
        <button>按钮</button>
        <button>文字在多一点</button>
        <button>按钮文字越多，宽度越宽（内部尺寸特性）但如果文字足够多 则会在容器的宽度出自动换行（自适应特性）</button>
    </div>

包裹性 在实际开发中的作用

如，页面的某个模块的文字内容是动态的，可能是几个字，也可能一句话，然后 希望文字少的居中显示，文字超过一行的时候居左显示

除了 inline-block 元素，浮动元素以及绝对定位元素 都具有包裹性，都有类似的智能宽度行为

 
    .box {
      text-align: center;
      background-color: #cd0000;
      padding: 10px;
    }

    .content {
      text-align: left;
      display: inline-block;
    }

  <div class="box">
    <p id="conMore" class="content">文字内容</p>
  </div>

  <p id="btnMore"><button>更多</button></p>


  <script>
    var btn = document.getElementById("btnMore"),
      content = document.getElementById("conMore");
    if (btn && content) {
      btn.onclick = function () {
        content.innerHTML += "-新增内容";
      }
    };
  </script>

 

2，首选最小宽度 （指，元素最适合的最小宽度）

图文的权重 大于 布局，所以是不会让图文在 width:auto 时宽度变成0的，这时表现的宽度就是 "首选最小宽度"

1. 中文，最小宽度是 每个汉字的宽度

2. 英文，最小宽度是特定的连续的英文字符单元，一般会终止于空格（普通空

格）短横线 问号 及其他非英文字符

如：dispaly:inline-block 最小宽度就是dispaly:inline-

 

如果想让英文和中文一样，每个字符都用最小宽度，

可以使用word-break:break-all

3. 类似图片这样的替换元素的最小 宽度就是该元素内容本身的宽度

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别就在于：
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

 

例：利用首选最小宽度 构建图形，要兼容ie8

因要兼容IE8 所以盒阴影 和 背景渐变 都没有用武之地

 .ao,
    .tu {
      width: 0;
      display: inline-block;
      font-size: 14px;
      line-height: 18px;
      margin: 30px;
      color: #FFF; 
    }

    .ao::before,
    .tu::before {
      outline: 2px solid #cd0000;
      font-family: Consolas, Monaco, monospace;
    }

    .ao::before {
      content: "love你love";
    }

    .tu::before {
      content: "我love你";
    }

    .tu {
      direction: rtl;
    }

  <span class="ao"></span>
  <span class="tu"></span>

 

3，最大宽度 (等同于，"包裹性" 元素设置white-space :nowrap 声明后的宽度）

如果内部没有块级元素 或者 块级元素没有设置宽度值，则 最大宽度 实际上是最大的连续内联盒子的宽度

连续内联盒子：全部都是以内联级别的一个或一堆元素，中间没有任何换行标签，<br>或其他元素

 

最大宽度 在实际中的作用

大部分需要使用最大宽度的场景，可以通过设置一个很大宽度来实现

 

很大和最大的区别

例如：有5张图片，每图片宽度200px 如果图片紧密排列 ，最大宽度 就是1000px

但在实际开发中 懒的计算：直接给容器width :2000px ，2000就是很大宽度

宽度足够大，作用是保证图片不会因为容器宽度不足 不在一行显示，，两者都能

实现几张图片左右 滑来滑去的效果

 

只能是"最大宽度" 而不是 "很大宽度" 的场景

iScroll 他可实现非常平滑的滚动效果

实现自定义滚动有2种原理，一是：借助原生的滚动 scrollLeft / scrollTop 值变化，优 点：简单 缺点：效果呆板

二是：是根据内部元素的尺寸，和容器的关系，通过修改内部元素的位置，实现滚动效果 优点：很绽放 iScroll就是使用的后者

 

如果使用iScroll 模拟滚动效果，只能使用最大宽度，滚动到底的时候才是真的到底
最大宽度 与 iScroll 水平滚动

---

height :100%
height 和 width 的一个明显区别 就是：对百分比单位的支持
width: 就算父元素width为auto ,他的百分比值也是支持的
height: 如果父元素height为auto,只要子元素在文档流中，百分比值会被忽略

对于普通文档流中的元素，百分比高度值要起作用，他的父级必须要有一个可以生效的高度值
例如：想在页面插入一个<div> 然后满屏显示背景图

  /*
      如此题div 如父元素 html body没有具体的高度值，height：100% 是会失效的
      如果没有具体的高度 这个<div>高度永远是0，哪怕父级body塞满了内容也是如此
      如果仅仅给body设置，body也没有具体的高度值，
       */
    html,body{
      height: 100%;
    }

    div{
      height: 100%;
      background: url("img/1.jpg");
    }
    </style>
</head>
<body>
    <div></div>

 如何让元素支持height :100% 2种方法
1，设定显示的高度值 例如设置height：600px 或者可以生效的百分比值高度

  html,body{
            height: 100%;
        }

2，使用绝对定位

 div{
            height: 100%;
            position: absolute;
        }

绝对定位元素的百分比计算 和 非绝对定位元素的百分比计算是有区别的
绝对定位的宽高百分比计算是相对于padding box 也就是说padding大小值计算在内
非绝对定位元素则相对于content box计算的

    .box{
        height: 160px;
        padding:30px;
        background-color: skyblue;
        box-sizing: border-box;
    }

    .child{
        height: 100%;
        background-color: red;
    }

    .rel{
        position: relative;
    }

    .rel>.child{
        width: 100%;
        position: absolute;
    }
     

 <!-- 非绝对定位百分比高度 -->   
<div class="box">
    <div class="child">高度100px</div>
</div>

<br/>

<!--绝对定位百分比高度 -->
<div class="box rel">
    <div class="child">高度160px</div>
</div>

 
图片左右半区点击分别上一张图下一张图效果 的布局
图片左右半区分别用半透明暖色和冷色色块表示

 /* 图片外面 包一层具有"包裹性" 同时具有定位特性的标签 */
      .box{
        display: inline-block;
        position: relative;
      }

/* 
只要在图片上覆盖两个绝对定位，同时设height:100% ,则无论图片多高
左右半区都能自动和图片高度一模一样，无需使用js计算
 */
      .pre,.next{
        width:50%;
        height: 100%;
        position: absolute;
        opacity: 0.5;
        top: 0;
      }

      .pre{
        left: 0;
        background-color: #cd0000;
      }
   
   .next{
     right: 0;
     background-color: #34538b;
   }
    </style>
</head>
<body>
  <div class="box">
    <a href="" class="pre">上一张</a>
    <a href="" class="next">下一张</a>
    <img src="./img/1.jpg"/>
  </div>

 

---

---

  .div_min,.div_max{
        width: 300px;
        border:solid red 1px;
      }

      .div_min{
        min-height: 60px;
      }

      .div_max{
        max-height: 60px;
      }
  
<body>
  <!-- 最小高度超过60 自动增高 -->
  <div class="div_min">最小高度60px最小高度60px最小高度60px最小高度60px最小高度60px最小高度60px最小高度60px最小高度60px最小高度60px最小高度60px最小高度60px最小高度60px最小高度60px</div>
  <br/>
  <!-- 最大高度60是极限，新增的内容如超过60 内容会溢出 -->
  <div class="div_max">最大高度60px最大高度60px最大高度60px最大高度60px最大高度60px最大高度60px最大高度60px最大高度60px最大高度60px最大高度60px最大高度60px最大高度60px最大高度60px</div>

 

   .min-width,.max-width{
        height: 100px;
        border:solid red 1px;
      }

      .min-width img{
        min-width: 200px;
      }
      .max-width{
        margin-top: 10px;
      }

      .max-width img{
        max-width: 200px;
      }

  <p>原图片大小</p>
  <img src="./img/pic-1.jpg"/><br/>
  <img src="./img/pic-2.jpg"/>

  <p>最小宽度:图片小于最小宽度被放大到宽度为200px</p>
  <div class="min-width">
    <img src="./img/pic-1.jpg"/>
  </div>

  <p>最大宽度:图片太宽被缩小到200px</p>
  <div class="max-width">
    <img src="./img/pic-2.jpg"/>
  </div>

 

min-width / max-width

min-height / max-height

min-width / max-width 出现的场景一定是自适应布局 或 流体布局中

在width / height 定死的砖头式布局，min-width / max-width 没有任何出现的价值

 

自适应布局：网页宽度在1200-1400px 自适应，即满足大屏的大气，又满足笔记本电脑的良好显示，

不用对width设置，直接使用min-width / max-width

.container{
    min-width:1200px;
    max-width:`1400px;
}

 

在例如：在公众号的热门文章中，图片都是用户自己上传的，尺寸会有大小

为避免图片在移动端展示产生的影响 ，一般会用 max-width 限制

但也会有体验上的问题，加载时，图片的占据高度从0 变成计算高

度，图文会有明显的瀑布式下落

 

强制 height :auto 这样可以确保宽度不超出的同时，使图片保持原

来的比例 ，如果不强制height :auto 或是有设定高度，max-width

生效的时候，图片会水平压缩

img{
    max-width:100%;
    height:auto !important
}

 

初始值

width / height 默认值是auto

min-width /min-height 初始值：auto

max-width / max-height 初始值 ： none

 

之所以是none 而不是 auto 举例

已知父元素宽度400px ,子元素宽度800px ，假如最大初始宽是auto,那和使用width一样的解析渲染规则，，子元素800px 就完蛋了，max-width会覆盖width

超越！important

超越！important 指 ：max-width 会覆盖 width ,而且这种覆盖不是普通的覆盖是超级覆盖

在css里！important 的权重很高，在业界把！important 比作 泰坦尼克，比直接在元素的style 属性中设置CSS声明还有高，一般在css 覆盖 JavaScript

<img src="./img/bg.png" style="width:480px !important;"/>

img{
    max-width:256px;
}

图片最后呈现的宽度是 256px   max-width 会覆盖 width 

 

超越最大，min-width 覆盖 max-width 两者发生冲突的时候，（也就是，最小宽度 比 最大宽度设置的值还大），
遵循 超越最大的规则min-width 活着，max-width 被忽略

.container{
    min-width:1400px;
    max-width:1200px;
}

 
任意高度元素的展开收起动画技术

---