CSS 常见问题整理

1. margin塌陷和margin合并

margin塌陷

父子关系的两个块级元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也有上外边距的时候。两个上外边距会合成一个上外边距，以值相对较大的上外边距值为准，

解决方案：

1. 给父元素设置外边框（border）或者内边距（padding）(不建议)

2. 触发BFC（推荐）

   BFC：Block Formatting Context，块级格式化上下文，BFC决定了元素对其内容定位，以及当前元素与其他元素之间的关系和相互作用。其目的就是形成一个独立的空间，让空间中的子元素不会影响到这个独立空间之外的布局。

   1. 子元素或者父元素的float不为none
   2. 子元素或者父元素的position不为relative或static
   3. 父元素的overflow为auto或scroll或hidden
   4. 父元素的display的值为table-cell或inline-block

margin合并

两个并列的元素之间。给一个元素设置下外边距（margin-bottom），并同时给一个元素设置上外边距（margin-top）。两个元素之间的距离不等于这两个外边距之和，而是等于其中最大的一个外边距。

解决方案：

1. 只设置其中一个元素的margin值即可（推荐）
2. 给每一个元素添加父元素，然后触发BFC规则（不推荐）

这都是因为BFC特性造成，还有以下问题

1. 在同一个BFC下的相邻盒子外边距会发生合并（可放在不同的BFC容器中）

2. BFC 可以包含浮动的元素（清除浮动）

   • 父级不设置高度的情况下，子元素浮动会造成高度塌陷，在浮动元素的父级设置overflow: hidden触发容器的BFC，便可以包裹浮动元素。

3. BFC 可以阻止元素被浮动元素覆盖 （自适应两栏布局）

   • 两个同级的元素，其中一个浮动时，会覆盖掉一部分另一个元素的一部分，但是文本信息不会被浮动元素所覆盖。
   • 可以在被覆盖的元素中加入 overflow: hidden ，浮动的元素便不再覆盖另一个元素，可采用该方式实现自适应两栏布局，左边浮动元素宽度固定，右边触发BFC的元素不设宽度，让其内容自适应宽度

2. 文档流：

标准文档流的问题：

1. 高矮不齐，底边对其
2. 空格折叠
3. 元素间隙

解决方法：

1. 脱离文档流：

• 浮动 float： left/right

  • 清除浮动：
    • 父元素设置高度
    • 受影响的元素增加 clear：both
    • 父元素增加overflow：hidden，clear：both
    • 给父元素增加伪对象 div::after{}

• 绝对定位 position：absolute

• 固定定位 position：fixed

  绝对定位和固定定位的位置是相对于具有定位的父元素中定位，如果父元素没有，就继续向上找

  Z-Index元素的层级

3. 响应式布局

• 媒体查询
• Flex 布局
• Grid 布局
• 瀑布流

Flex 布局–一维布局

基本属性

flex-direction	指定弹性盒子中子元素的排列方式
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
justify-content	设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items	设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子中子元素的排列顺序
align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex	设置弹性盒子中子元素如何分配空间
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的收缩比率
flex-basis	设置弹性盒子伸缩基准值

作用在父元素上
Display：flex
Flex-direction： 子元素的摆放方式
Justify-content： 垂直方向的对其方式
Align-items： 水平方向的对其方式

子元素上的：
    flex  子元素占父元素的权重
    设置了此属性，一般width就不生效了

.wrapper{

di
}

Grid 布局–二维布局

.wrapper {
  margin: 60px;
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(3, 200px);

  /* grid-template-columns: repeat(auto-fill, 200px) */ 
  /* 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素 */

  /* grid-template-columns: 200px 1fr 2fr */ 
  /* 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3 */ 

  /* grid-template-columns: 1fr 1fr minmax(300px, 2fr) */
  /* 表示第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。*/

  /* grid-template-columns: 100px auto 100px */
  /* 表示第一第三列为 100px，中间由浏览器决定长度 */

  /*  声明行间距和列间距  */
  grid-gap: 20px;
  /*  声明行的高度  */
  grid-template-rows: 100px 200px;

  grid-auto-flow: row dense /* 表示尽可能填充，而不留空白，*/
}

瀑布流

.box {
          margin: 10px;
          column-count: 3;
          column-gap: 10px;
      }
      .item {
          margin-bottom: 10px;
      }
      .item img{
          width: 100%;
          height:100%;
      }