盒子模型外边距问题&display&visible&浮动

外边距总结（margin）：

- 同时设置上和左的外边距：改变当前标签的显示位置。
- 同时设置下和右的外边距：改变当前标签的下一个兄弟元素的显示位置。
- 问题：
    - 外边距的重叠
        - 场景
            - 两个相邻、兄弟、块级元素；
            - 上一个块级元素设置下外边距；
            - 下一个块级元素设置上外边距；
        - 结果
            - 两个兄弟元素之间的距离取外边距的最大值。
        - 解决
            - 只设置上一个块级元素设置下外边距或者下一个块级元素设置上外边距。
    - 外边距的值允许是负值
        - 值大于零——正常设置的外边距效果
        - 值等于0——没有外边距的效果
        - 值小于零——两个标签之间出现覆盖效果；
        - 注意：在实际开发中，不要设置负值。
    - 默认边距，通过手动设置消除默认边距。

---

---

---

---

外边距问题补充

问题补充：
为作为子元素的div设置外边距时

• 效果：
  作为子元素的div和作为父元素的div全部向下移动；
• 原因： 子元素的上外边距传递给了父元素；

• 解决方案：只设置父元素的内边距，不设置子元素的外边距。

• 外边距问题汇总：
  1.外边距重叠；
  2.外边距允许设置负值，设置负值两元素会重叠；
  3.子元素设置外边距，父元素会被传递此外边距。

默认样式：
面试题——Normalize和Reset之间的区别？
解答：
先设置Normalize样式，再添加自定义样式，就近原则，自定义样式会有效果。

元素的隐藏

• 将d1的div从显示设置为隐藏：

  • 一、display——设置当前标签的显示状态：none——当前标签不会被显示；当设置为none时，隐藏的元素不会再占用页面的空间！

  • 二、visibility——设置当前标签隐藏状态：hidden——当前标签不会被显示； 当前设置为hidden时，元素会被隐藏但是依然占用页面空间。

/*display: none;*/
/*不显示不占位，常用！*/
/*visibility: hidden;*/
/*不显示却占位，不常用！*/

display

• 设置为隐藏——none，隐藏的空间不在占用页面的空间；
• 设置为块级元素——block——垂直方向排列
• 设置为内联元素——incline——水平方向排列
• 设置为内联块级元素——incline-block
  
  • 效果：每个元素呈现块级效果，元素之间以内联方式排列。
  • 将元素设置display为incline-block时，将块级元素水平方向排列。
    
    • 注意：由于每个元素的定义，具有换行符，导致实际显示效果中，出现元素之间的空白效果；
    • 解决：编写HTML标签代码时，写成一行。
    • 问题：虽然可以将块级元素水平排列，但是解决方案并不够好。在实际开发中很少使用！

visibility
- 设置元素是否可见。

- visible默认值，元素可见；
- hidden元素不可见的，但是依旧占用页面空间；
- collapse只能在表格里使用，在IE中不兼容！

面试题：display：none与visibility：hidden的区别是什么？

• 内容溢出问题：

  • 概念：当后代元素（文本、图片、标签内容皆可）所占空间超过当前元素所占空间时，超出后代元素内容显示在元素所占空间外部。
  • 解决——overflow属性
    
    • hidden——将溢出部分进行隐藏；
    • scroll——两个方向给出滚动条；
    • auto——给出溢出内容方向的滚动条。

文档流

• 概念：将窗体自上而下分成一行一行，并在每行中按照从左至右的依次排放元素，即为文档流。

• 作用：提供一个HTML页面的默认布局规则；
  - 内联元素——水平排列；
  - 块级元素——竖直排列；

• 注意：

  • 默认情况下，HTML页面中的标签都处在文档流之中；
  • HTML页面的标签脱离文档流的方式：
    浮动、绝对定位、固定定位；

浮动（Float）

• 特殊情况：

  • 一、（父子）如果具有一个父子关系的两个元素，给子元素设置浮动，无论子元素如何浮动，其范围不会超出父元素的！

  • 二、（兄弟）如果具有相邻兄弟关系的两个元素，同时设置浮动——自动水平方向排列。

    • 内联元素水平排列——如果超出页面的宽度时，自动换行；
    • 所有浮动元素的兄弟元素，类似于内联元素的浮动方式——如果超出页面宽度，自动换行。www.inter.com//参考！！

  • 三、（兄弟）如果具有相邻两个兄弟元素的话，前一个不设置浮动，后一个设置浮动——后一个不能超过前一个！

  • 四、（文本内容）如果设置块级元素为浮动的话，文本内容不会被覆盖（不同于其他元素！）

  • 五、内联元素的浮动：内联元素设置为浮动时，显示为块级效果——宽度和高度有效。意义：方便完成HTML页面布局。

实现页面布局时遇到的问题

• 盒子模型的问题：

  • 当设置内边距时，实际显示大小大于所设置的大小（width和height）；
  • 当设置子元素的外边距时，父级元素会被传递外边距；

• 单位使用问题

  • 使用了百分值——主要应用于相对于HTML页面的宽度；
  • 使用了像素值——主力单位

• 像素值使用的问题

  • 经过相关的计算，得到最终的结构；
  • 像素值是固定值，不会随着屏幕的变化而变化。

解决方法

• 盒子模型问题：

  • 正常的盒子模型——content-box
    
    • 默认值，实际的宽度=width+border+padding
  • 怪异的盒子模型——border-box
    
    • 实际宽度=width——border和padding不是向外撑开，而是相里缩进。

• 单位的使用：直接使用百分值。

• 首先将所有的盒子模型改成怪异盒子模型box-size:border-box；
  等分成12列；