前端整理 —— css 理论

1. css3 新增特性

1. 新增布局：Flex 弹性布局，Grid 栅格布局
2. 新增选择器：
   复合选择器，例：
   （1）element1~element2
   属性选择器，例：
   （1）[attribute^=value]（选择器匹配属性值中且以value开头的元素）
   （2）[attribute$=value]（选择器用于选取属性值中且以value结尾的元素）
   （3）[attribute*=value]（选择器匹配属性值包含指定值的每个元素）
   伪类选择器，例：
   :nth-child(n)，:nth-last-child(n)，:last-child，:only-child，:first-of-type，:last-of-type，:only-of-type，:nth-of-type(n) ，:nth-last-of-type(n)
3. 渐变：linear-gradient（线性渐变），radial-gradient（径向渐变）
4. 动画：animation（主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬）
5. 转换：transform（旋转，缩放，倾斜或平移等等）
6. 过渡：transition（可以被指定为一个或多个 CSS 属性的过渡效果，持续时间）
7. 新增样式：
   1. 边框：border-radius（创建圆角边框），box-shadow（为元素添加阴影），border-image（使用图片来绘制边框）
   2. 颜色：rgba（分为两部分，rgb 为颜色值，a 为透明度），hsla（分为四部分，h 为色相，s 为饱和度，l 为亮度，a 为透明度）
   3. 文字：text-overflow（设置当前行超过指定容器的边界时如何显示），text-shadow（文本阴影），word-wrap（设置是否允许在单词内换行），text-decoration（支持对文字的更深层次的渲染）
   4. 背景：background-clip（确定背景画区），background-origin（图片是以 border 的左上角对齐还是以 padding 的左上角或者 content 的左上角对齐），background-size（调整背景图片的大小，主要用于设定图片本身），background-break（元素可以被分成几个独立的盒子，该属性用来控制背景怎样在这些不同的盒子中显示）

2. margin 取负值

（这个我上网找的都各说各的，我也看的头大，稍微整理了一下）
　首先假设参考线就是 margin 移动的基准点，而margin的值就是移动的数值
　margin取负值的情况，则 top、left，它们以外元素作为参考线，而 right、bottom，它们以自身作为参考线
　（假设此时元素已经被设置了宽高）这导致当 margin-top、margin-left 为负值的时候，会把元素上移、左移，而当 margin-bottom、margin-right 设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移
　注意，在元素没有设置宽高的情况，margin-left，margin-right 为负值时，会增加元素宽度，而 margin-bottom、margin-right 为负数时，不会导致元素高度改变

3. 居中

1. 定位 + margin: auto
   先left: 0，right: 0，top: 0，bottom: 0，再把 margin 设为 auto
   （因为 margin 为 auto 时，margin 的值要不为 0，要不就会占据所有多余位置，所以上下，和左右分别把空余位置都占了）
2. 定位 + margin 负值
   先left: 50%，right: 50%，再把margin-left和margin-top分别设为子元素宽高的一半（记得是负）
3. 定位 + transform：
   先left: 50%，right: 50%，再translate(-50%, -50%)
   （前面的百分比基于父元素，后面的基于子元素）
4. 通过 flex，把父元素display设为flex，align-items设为center，justify-content设为center
5. 通过 grid，把父元素display设为grid，align-items设为center，justify-content设为center
   （借助grid居中的方法很多，只是例举了这一种）
6. 借助伪元素::before
   原理很简单，就是通过子元素的::before的宽把子元素挤成水平居中，再把高设置为父元素的100%，最后通过vertical-align让子元素和伪元素垂直对齐，这样就垂直居中了
   （::after用本方法没用，因为它在子元素的后面，也许可能实现，要麻烦一点）
   （小心两个行内元素之间的间距，老问题了）

   .test{
        width: 200px;
        height: 200px;
        /* 
            元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，
            根据white-space的处理方式（默认是normal，合并多余空白），
            原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，
            所以inline-block的元素之间就出现了空隙。
            这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
        */
        font-size: 0;
    }
    .test::before{
        content: "";
        display: inline-block;
        height: 100%;
        width: 75px;
        vertical-align: middle;
        margin: 0;
        padding: 0;
    }
    .testChild{
        display: inline-block;
        vertical-align: middle;
        height: 50px;
        width: 50px;
        background-color: red;
    }
   

7. （如果是文字），可以把text-align设为center（水平居中），再把line-height设为父元素高度（垂直居中）

4. BFC

BFC 详情

1. BFC是什么
   是块级格式化上下文，就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然，它是页面的一块渲染区域，并且有一套自己的渲染规则（下面的好难记，感觉看个眼熟就差不多了）
   1. 内部的盒子会在垂直方向上一个接一个的放置
   2. 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
   3. 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
   4. BFC的区域不会与float的元素区域重叠
   5. 计算BFC的高度时，浮动子元素也参与计算
2. 如何创建BFC
   1. 根元素，即HTML元素
   2. 浮动元素：float值为left、right
   3. overflow值不为 visible，为 auto、scroll、hidden
   4. display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
   5. position的值为absolute或fixed
3. BFC 规则
   1. 内部的Box会在垂直方向上一个接一个的放置
   2. 垂直方向上的距离由margin决定（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关）
   3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
   4. BFC的区域不会与float的元素区域重叠
   5. 计算BFC的高度时，浮动子元素也参与计算
   6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
4. 应用场景
   1. 防止margin塌陷（在标准文档流中，块级标签之间竖直方向的margin会以大的为准）
   2. 高度塌陷问题（浮动元素会令父元素高度塌陷的问题）
   3. 解决自适应布局的问题（例由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给右侧元素添加 overflow: hidden，触发BFC来解决遮挡问题）

5. css 盒模型

分为 标准盒模型 的 IE盒模型

一个块级盒子有：

• Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height
• Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置
• Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置

1. 标准盒模型：
   在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小
2. IE 盒模型：
   所有宽度都是可见宽度，所以内容宽度是设置的 width 减去边框和填充部分

切换盒模型的方法：

box-sizing: content-box /* 是 W3C 盒子模型 */
box-sizing: border-box /* 是 IE 盒子模型 */

6. 文档流和文本流

• 文档流是相对于盒子模型讲的
• 文本流是相对于文字段落讲的
• 元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流
• 但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。简单来说就是float脱离了“文档流”，没有脱离 “文本流”，position 中的 absolute 和 fixed 全部脱离

7. src 属性和 href 属性的区别

• src 的特性：
  • 引用外部资源比如 script 元素，img 元素，iframe 元素，video 元素
  • 会替换元素本身的内容
  • 会暂停其他资源的下载当浏览器解析到使用 src 的元素时，会暂停其他资源资源的下载，直到 src 引用资源加载，编译，执行完毕，这也是为什么 script 元素推荐放在 html 结构的底部
• href的特性：
  • 表示超链接比如 a 标签，link 标签，表示外部资源与该页面的联系
  • 不会替换元素本身的内容
  • 不会暂停其他资源的下载像 css 那样影响页面观感的可以放在 html 结构的头部优先加载
• 核心思想上的区别：
  • src 代表的是网站的一部分，没有会对网站的使用造成影响
  • href 代表网站的附属资源，没有不会对网站的核心逻辑和结构造成影响

8. css 选择器优先级

!important > style 内联> id > class，伪类 > 标签，伪元素

9. 移动端适配方案

详情

10. flex 布局

（真的经常经常问，给自己挖个坑）

11. 行内元素 和 块级元素 的区别

1. 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素
2. 块级元素默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关，行内元素默认宽度只与内容有关
3. 块级元素各占据一行，垂直方向排列，行内元素会在一条直线上排列，都是同一行的，水平方向排列
4. 行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置 width 无效，height 无效（可以设置 line-height ），margin 上下无效，padding 上下无效

12. 行内块元素

inline-block 的元素（如 input，img ）既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性

但注意：HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙