CSS知识点总结

1. CSS盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距、边框、内边距和实际内容。

• 标准盒模型：范围包括margin，border，padding，content，并且width和height指的就是内容的宽度和高度。增加内外边距，边框不会影响内容区域的大小，但是会增加元素框的总尺寸。

• IE盒模型：范围包括margin，border，padding，content，但是width和height指的是 内容content+内边距padding+边框border 的宽度和高度

• 相关属性：box-sizing: context-box(默认，标准盒子）|border-box（IE盒子）|inherit;

• display-clip: (背景颜色覆盖）border-box（默认）|context-box;

2. 选择器优先级

• !important 最高级
• 内联样式 1000
• id选择器 100
• 类选择器 10
• 标签选择器 1
• 子选择器(ul<li)
• 后代选择器(li a)
• 伪类选择器(a:hover, li:nth-child)
• 通配符选择器 0

3. 尺寸单位/移动端适配

• 绝对尺寸单位

  • px：像素
  • pt: 磅，绝对长度单位
  • in: 英寸
  • cm: 厘米
  • mm: 毫米

• 相对单位

  • %：百分比，父元素相应值的百分比
  • em：1em = 当前元素的字体大小，通常1em = 16px(浏览器默认字体大小)；注：用于指定字体大小时，em单位是指父元素的字体大小；计算使用calc(5px+2em);
  • rem：1rem = 根元素（即html元素）的字体大小计算尺寸，通过它既可以做到只修改根元素就成比例调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
  • vh: View height--视口单位，可视范围高度，1vh = 视口高度的1%
  • vw: View width 可视范围宽度
  • vmin: View min 可视范围的宽度或高度中较小的那个尺寸
  • vmax: View max 可视范围的宽度或高度中较大的那个尺寸
  • ex: 相对于字符“x”的高度，通常为字体高度的一半，若未指定字体尺寸，则相对于浏览器的默认字体尺寸。
  • ch: 相对于数字“0”的宽度。

  

4. 伪元素和伪类元素

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。

• 伪类：本质上是为了弥补常规CSS选择器的不足，向某些选择器添加特殊的效果；伪类：:hover,:active,first-child,nth-child(n)等等
• 伪元素：本质上创建一个有内容的虚拟容器，不存在在DOM文档中，是虚拟的元素；例如：::after, ::before 等

5.BFC、IFC

IFC布局：

• 在行内格式化上下文中，boxes一个接一个地水平排列，起点是包含块的顶部
• 水平方向上的margin border padding在框之间得到保留
• 在垂直方向上可以以不同的方式对齐：顶部或底部对齐，或者根据文字的基线对齐

BFC布局：

• 内部的Box会在垂直方向，一个接一个地放置
• Box垂直方向上的距离由margin决定，同属一个BFC的两个相邻Box的margin会发生重叠
• BFC的区域不会与float box重叠
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
• 计算BFC的高度时，浮动元素也参与计算

BFC具有普通元素没有的特性：

• 可以利用BFC解决两个相邻元素的上下 margin 重叠问题

• 可以利用BFC解决高度塌陷问题

• 可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）

  更多详细看这篇：BFC详解

触发BFC的方法：

• body根元素
• 浮动元素（除了float: none）
• 定位的元素（absolute、fixed）
• display ( inline-block、table-cells、flex )
• overflow ( hidden、auto、scroll )

6.清除浮动的方式

• 修改父元素的 owerflow 属性
  • 将父元素的 owerflow 属性修改为 owerflow: auto | hidden，浏览器会自动检查浮动区域的高度
• 父级div定义height
• 添加一个空div，利用css的 clear : both 清除浮动，让父级div能自动获取到高度

7. 如何实现盒子水平垂直居中

• 如果子元素是 行内元素，可以在父元素设置 text-align:center; 子元素 line-hight 设置为父元素的高度值
• 父元素相对定位，子元素绝对定位，且top、left值设置为50%，transform属性的值设置为(-50%,-50%)
• 父元素相对定位，子元素绝对定位，且left、top、bottom、right的值设置为0，margin 属性的值置为auto
• flex布局：父元素display属性设置为flex，justify-content 和 align-items 属性值设置为center
• grid布局：父元素display属性设置为grid，justify-items 和 align-items 属性值设置为center

8. display属性

• display: none; -- 让标签消失，元素不会被显示
• display: block; -- 块级元素，素将显示为块级元素，此元素前后会带有换行符
• display: inline(默认); -- 行内元素，元素会被显示为内联元素，元素前后没有换行符。
• display: inline-block; -- 行内块元素，既有inline的属性也有block属性。
• display: inherit; -- 规定应该从父元素继承 display 属性的值。
• display: flex; -- 弹性布局

display属性的三个属性值 block, inline 和 inline-block 有什么区别？

• 块元素独占一行，行内元素可以一行显示多个
• 块元素可以设置宽高，行内元素设置宽高无效，只能靠内容撑开
• 行内块元素一行可以显示多个，可以设置宽高；

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

可以看这篇：block，inline和inline-block

9. position定位属性

值	描述
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative	不脱离文档流，占据原位置，相对于其正常位置进行定位
absolute	脱离文档流，相对于第一个非 static 定位的父元素进行定位
fixed	绝对定位，相对于浏览器窗口进行定位
inherit	继承父元素 position 属性
sticky	在屏幕范围内表现为 relative ,超出时是 fixed 形式

10. display、visibility和opacity的区别

属性	空间占据	重绘重排的影响	子元素继承	事件绑定	过渡动画
display:none	不占据	涉及DOM结构，会产生reflow与repaint	不会被子元素继承，但父元素不在，子元素也不显示	元素在页面不存在，无法进行事件绑定	不能
visibility:hidden	占据，不可见但存在	只引起重绘	会被子元素继承，可以设置visibility:visible使子元素显示出来	无法触发	不能
opacity:0	占据	只引起重绘	会被子元素继承，但不能设置opacity使其显示	opacity:0元素绑定的事件可以触发(CSS挟持)	可以

11. CSS的动画属性

属性	含义
animation（动画）	用于设置动画属性，通过@keyframes来定义动画，可通过from..to..或百分比来设置中间过渡状态
transition（过渡）	用于设置元素的样式过渡，只有始末两个状态，需要条件来触发，不能重复，除非再次触发。触发条件例如：:hoever、:focus、js等
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）	translate只是transform的一个属性值，即移动。

transition参数 CSS动画

12. 页面导入样式时，link和@import的区别

• 加载顺序
  • link标签引入的css被同时加载
  • @import引入的css样式在页面加载完后被加载
• 权重
  • link引入的样式权重大于@import引入的样式
• 兼容性
  • link标签作用于HTML元素，无兼容问题
  • @import是在CSS2.1提出的，低版本的浏览器不支持
• DOM操作

  • link支持使用Javascript控制DOM去改变样式；而@import不支持

13.line-height(行高)的作用

line-height属性用于设置行间的距离（行高），文本的行高是由line-height决定的，而不是font-size，行高包括字母的大小(font-size)和字母的上下留白部分。

• 如果可能有换行，保证行与行之间距离合适。
• 保证字体中心水平居中

可以看这篇：图解line-height的使用

14.Vertical-aligin，line-height的区别？

• line-height一行垂直居中，而vertical-align不管有多少行，都能垂直居中
• 只有元素属于inline或是inline-block ，vertical-align属性才会起作用。 
• vertical-align，取值是百分数值时，是相对于此标签继承的line-height值决定的。 
• line-height，取值是百分数值时，是相对于当前的font-size值决定的。

15.判断元素是否在可视区域

检测元素是否在可视区域，这也是懒加载图片的实现原理。

• 公式: el.offsetTop - document.documentElement.scrollTop <= viewPortHeight

• 公式: el.getBoundingClientReact().top <= viewPortHeight

• 公式: intersectionRatio > 0 && intersectionRatio <= 1

可以看这篇：如何判断元素是否在可视区域ViewPort

16.CSS实现三角形、梯形

• 三角形--边框实现--宽高给0

  <div class="main"></div>
  复制代码

  .main{
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  /* border-color: orange pink peru skyblue; */
  border-color: transparent transparent peru transparent;
  }
  复制代码

• 等腰梯形--边框实现--给宽高值

  .main{
  width: 50px;    // 宽高值
  height: 50px;
  border: 50px solid transparent;
  /* border-color: orange pink peru skyblue; */
  border-color: transparent transparent peru transparent;
  }
  复制代码

• 画扇形

  .main{
    width: 50px;
    height: 50px;
    background-color: skyblue;
    border-radius: 50px 0 0 0;  /* 左上开始，顺时针方向 */
   }
  复制代码