CSS常用知识点

1、简述⻓度单位 px、em、rem 的区别

  1. px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的，比较稳定和精确，它的值不需要计算。
  2. em：它的值并不是固定的，是相对长度单位。它相对于父元素字体大小，是父元素字体大小的倍数。如果父元素没有定义字体大小，它会一直向上找，直到找到定义的字体大小为止。em是相对于父元素的属性值而计算的，所以em是非具体的数值。
  3.rem：是root em，简写rem。这个单位与em的区别在于，使用rem为元素设定字体大小时，rem相对的只是HTML根元素字体大小。
   px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，更适用于响应式布局。

2、简述 display 属性值中 inline、block、inline-block 的区别

display:inline

     1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
     2. inline元素设置width,height属性无效。
     3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:block

     1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
     2. block元素可以设置width,height属性。
     3. block元素可以设置margin和padding属性。

display:inline-block

    1. 使元素以块级元素的形式呈现在行内。让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内联元素的增强。

3、⽤ CSS 中控制元素显示与隐藏的⽅法有哪些，它们的区别是什么?

  1.设置元素的display:none隐藏这个元素，但是隐藏元素会释放占用的空间，由后面元素补位。display:block控制元素显示。
  2.设置元素的visibility: hidden隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:visible控制元素显示。
  3.设置元素的opacity:0隐藏这个元素,使元素完全透明，不可见，但是隐藏元素仍需占用与未隐藏时一样的空间。opacity:1元素完全显示。
  4.设置元素的width:0或height:0，并且设置overflow:hidden，使元素隐藏。
  5.设置元素的绝对定位，通过控制z-index的属性值来达到元素隐藏。

4、简述 border 属性与outline属性的区别？

  1. border是绘制元素的边框，它的大小将影响元素的宽高，会增加此元素的宽高。
  2. outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
   outline不可以单独设置某一条边，因而它总是闭合的。而border可以单独设置border-top、border-right等
   另外，非常重要的一点区别是，outline不占空间，不影响盒模型，因此它不会破坏文档流，不会影响网页布局。

5、简述 background-clip 属性的⽤法。

background-clip 属性规定背景的绘制区域。
语法：background-clip: border-box|padding-box|content-box;
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

6、简述BFC

解释：

BFC（快格式化上下文），是布局过程中生成块级盒子的区域，也是浮动元素与其它元素的交互限定区域，是WEB页面可视化的CSS渲染的一部分。

通俗理解：

独立的一个布局环境，一个容器。

出发BFC的条件：

1.浮动：float:left\right;

2.添加display属性：

display:inline-block;  flex;  inline-flex;  table-cell;  table-caption;

3.元素溢出处理属性overflow：除了 visible。

overflow:hidden;  auto;  scroll;  

BFC的特性：

1.内部的box会在垂直方向，从顶部开始一个接一个放置。

2.box的垂直距离由 margin 决定，同一个BFC相邻的 margin 重叠，取较大的值。

3.每个元素的 margin box 的左边与包含块 border box 的左边接触，即使在浮动元素中也是。

4.BFC是一个隔离的容器，里面的子元素并不会影响外面的。

5.计算BFC高度是，浮动元素也算在里面。

6.BFC区域不会与 float box 叠加，可以实现两列布局，左边固定宽度，右边自适应。

BFC解决的问题：

1.外边框塌陷

2.float浮动 （overflow:hidden;）