css盒模型

CSS盒模型

 外边距问题结构关系：嵌套块元素的垂直外边距塌陷

• 问题描述：当父元素没有padding，margin，border时子元素与父元素直接相邻、子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果是正值取两者中的较大值，负值取绝对值较大的值。

• 表现：父子元素公用一个外边距

  .parent{
      width:100px;
      height:100px;
      background-color:red;
      
  }
  .child{
      width:100px;
      height:100px;
      background-color:green;
      
      margin-top:100px;
      margin-bottom:100px;
  }
  

• 解决方法

  • 给父元素设置边框或内边距（慎用）

  • 父元素overflow:hidden，改变规则

• 结构关系：相邻元素垂直外边距合并

• 问题描述：当两个块级兄弟元素垂直方向上的margin值直接相遇，会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值

• 表现：两个外边距合并成一个

  .box1{
      width:100px;
      height:100px;
      background-color:red;
      margin-bottom:100px;
  }
  .box2{
      width:100px;
      height:100px;
      background-color:green;
      margin-top:100px;
  }
  <div class="box1">
     <div class="box2"></div>
  </div>

• 解决方法

  • 尽量只定义其中一个的margin值

  • 给其中一个盒子加父元素overflow:hidden，改变渲染规则

CSS显示模式

概述：显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素三大显示模式。

元素默认显示模式与元素特性

本身属性为display:block的元素称为块级元素

常见块级元素 div，h1-h6，p，ul，li，dl，dt，ol

本身属性为display:inline的元素称为行级元素常见行级元素：span，strong，em，i，a，

本身属性为display:inline-block的元素称为行级块元素

常见行内块元素：img，input(表单元素后续会讲到)

块级元素特性总结

独成一行，可以设置宽高

在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度

在不设置高度的情况下，块级元素的高度是它本身内容的高度

可以设置上下左右的内边距和外边距、行内元素特性总结

默认并排，不可以设置宽高，宽高取决于内容

行内元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

行标签之间有间隙，不可以设置上下外边距

行内块元素特性总结

默认并排，可以设置宽高，宽高取决于内容

可以设置任意方向的内边距和外边距

并排时中间有间距

元素类型转换

特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。

display:inline转换为行内元素 【不常用】

display:block转换为块状元素 【常用】

display:inline-block转换为行内块状元素 【比较常用】