前端-css篇

概念构建

CSS

盒模型

• 标准盒子模型

• ie盒子模型

margin重叠问题

官方解释：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。（块元素的 上下外边距 ，只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题）

1. 同一层相邻两元素之间（一上一下、块级元素）

   发生边界重叠，只会挑选最大边界范围留下，所以两者之间的边距为100px
   如果需要解决这个边界重叠问题，则需在后一个元素加上float

2. 没有内容将父元素和后代元素分开（子元素外边距被赋给了父元素）

   • 解决方案

     1. 给父元素加overflow：hidden；

        这种方法解决了外边距重叠问题，但是这个方法只适用于 子元素的高度加上外边距高度小于父元素高度(childHeight +margin-top < parentHeight)，不然子元素部分内容就会被隐藏掉

     2. 给父元素加边框 border

        父子元素是外边框重叠到一起去了 ，那么我们给父元素加个边框，他们的外边距就有了边框的间距，但是这样也就多出来没有必要的边框

     3. 给父级或者子级设置display:inline-block;

        只有块元素会产生外边距重叠，那么我们就让它不是块元素，把它设置为行内块元素

     4. 给父级或者子级设置float

     5. 给父级或者子级设置position: absolute;

     6. 给父元素添加padding

外边距重叠计算

• 两个正数取最大的数
• 两个负数取绝对值最大的数
• 一正一负取两者之和

margin-left/right/bottom/top 分别设为负值会怎么样？

• margin-top 和 margin-left 负值，元素向上、向左移动
• margin-right 负值，右侧元素左移，自身不受影响
• margin-bottom 负值，下方元素上移，自身不受影响

BFC

​ BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。

​ W3C 官方解释为：BFC 它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉 及到可视化布局时，Block Formatting Context 提供了一个环境，HTML 在这个环境中按照一定的规 则进行布局。

​ 简单来说，BFC就是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。BFC有自己的规则和触发条件

bfc元素特性：

• 外边距折叠只会发生在同一bfc的块级元素之间
• bfc是页面中一个隔离的独立容器，容器里面的子元素不会影响外面，反之亦然
• 浮动不会叠加到BFC上
• 计算BFC的高度时，浮动包括在内

形成BFC：

• 浮动（float不是none）

• 定位（position为absolute或fixed）

• display：inline-block、flex、inline-flex、grid、inline-grid、flow-root（除了触发BFC外无任何影响）

• overflow的值不为visible的块元素

应用场景：

• 清除浮动遮挡
• 解决高度塌陷（浮动元素脱离文档流）
• margin重叠

长度单位

1. 绝对长度单位：px、
2. 相对长度单位：rem、vw、vh、em、%

​ rem：对于根元素（html）font-size计算值的倍数

html{
  font-size:14px;  那么 14px=1rem  28px=2rem  即：n px=n/14 rem
}
// html不设置font-size，则默认根字号为16px
h3{
    font-size=2rem; // 转换为px 即是 2*14=28px
}

​ em：相对于当前对象内文本的字体尺寸（若当前对象行内文本未设置，则相对浏览器默认字体尺寸）；em继承父级元素大小

body{
    font-size:14px; // 设置body默认字体是14px  那么 14px=1em  28px=2em  即：n px=n/14 em
}
h3{
    font-size:3em; // 转换为px 即是 3*14=42px
}

// 如果当前对象行内文本的字体尺寸设置为12px,则如下：
h2{
    font-size:12px;
    h3{
        font-size:3em; // 转换为px 即是 3*12=36px
    }
}

CSS3

• 布局：calc()、 flex布局、grid布局
• 媒体查询
• 边框：border-radius、box-shadow、border-image
• 背景：background-clip、background-origin、background-size、background-break
• 文字：word-wrap、 text-overflow 、text-shadow、 text-decoration
• 颜色：rgba
• 动画：transition、 transform、 animation
• 渐变：linear-gradient 、radial-gradient