CSS 小知识

作者: 婆娘漂亮生活安逸 | 来源:发表于2021-03-21 15:40 被阅读0次

写在前面的，整理了自己认为需要理解的内容。
需要持续更新...

CSS 盒子模型，box-sizing 属性的理解

1> CSS 盒模型分为两种：

W3C 标准盒模型：由 margin、border、padding、content 组成；盒宽度是 content 内容的宽度；
IE 传统盒模型：由 margin、border、padding、content 组成；盒宽度包括了 content、padding、border 宽度。

2> box-sizing 属性：
用来控制元素的盒子模型的解析模式，默认为content-box。

content-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

什么是响应式设计，响应式设计的基本原理是什么

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有 meta 声明的 viewport。

CSS 解析规则

规则：
CSS选择器是从右向左解析。
若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找父节点直到找到根元素或者满足条件的匹配规则，则结束这个分支的遍历。
两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

阐述一下 CSS Sprites

定义：
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS 的 background-image，background- repeat，background-position 的组合进行背景定位。
优点：
（1）利用 CSS Sprites 能很好地减少网页的 http 请求，从而大大的提高页面的性能；
（2）CSS Sprites 能减少图片的字节。
缺点：
（1）图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂；
（2）开发较麻烦，测量繁琐；
（3）维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css。

常见的兼容性问题？

不同浏览器的标签默认的 margin 和 padding 不一样。
```
   * { margin:0; padding:0; }
```
IE6 双边距 bug：
块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。
```
  /* 将其转化为行内属性。*/
  display:inline;
```
渐进识别的方式：
从总体中逐渐排除局部。首先，巧妙的使用 “9” 这一标记，将 IE 浏览器从所有情况中分离出来。接着，再次使用 “+” 将 IE8 和 IE7、IE6 分离开来，这样 IE8已经独立识别。
```
{
  background-color: #f1ee18; /*所有识别*/
  .background-color: #00deff\9;  /*IE6、7、8识别*/
  +background-color: #a200ff; /*IE6、7识别*/
  _background-color: #1e0bd1;  /*IE6识别*/
}
```

设置较小高度标签（一般小于10px），在 IE6，IE7 中高度超出自己设置高度。

  /* 1. 给超出高度的标签设置*/
  overflow:hidden;
  /* 2. 设置行高 line-height 小于你设置的高度 */。

IE 下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性
解决方法：
统一通过 getAttribute() 获取自定义属性。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

p { font-size:10px; -webkit-transform:scale(0.8); }
/* -webkit-text-size-adjust: none; 这个属性值可能会有些问题 */

超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不再具有 hover 和 active 了。
解决方法：
改变CSS属性的排列顺序：L-V-H-A ( love hate ):
a:link {} a:visited {} a:hover {} a:active {}

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

CSS3有哪些新特性

颜色：新增 RGBA、HSLA模式
文字阴影：text-shadow
边框：border-radius【圆角】，border-image【边框图片】，box-shadow【边框阴影】
盒子模型：box-sizing
背景：background-size【背景图片的尺寸】，background-origin【设置背景图片的原点】，background-clip【设置背景图片的裁剪区域】，以“，”分隔可以设置多背景，用于自适应布局
渐变：linear-gradient(to direction, color, ...)、radial-gradient
过渡：transition可实现动画
自定义动画：animation
在CSS3中唯一引入的伪元素是 ::selection
实现媒体查询 @media，多栏布局 Flex
2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
3D转换

CSS3 新增伪类？

p:first-of-type
p:last-of-type
p:only-of-type
p:only-child
p:nth-child(2)
:enabled
:disabled
:checked

CSS优化、提高性能的方法有哪些

移除空的 CSS 规则
抽象提取公共样式，减少代码量
不在选择符中使用 ID 标识符
尽量减少页面重排、重绘：正确使用 display 的属性
不滥用浮动、web字体
不声明过多的 font-size
遵守盒模型规则

说一下 CSS 预处理器，Less 带来的好处？

CSS预处理器：
为 CSS 增加了编程特性的拓展语言，可以使用变量、简单逻辑判断、函数等基本编程技巧。CSS 预处理器编译输出依旧是标准的 CSS 样式。
解决问题：
（1）CSS 语法不够强大，因为无法嵌套导致有很多重复的选择器；
（2）没有变量和合理的样式机制，导致逻辑上相关的属性值只能以字面量的形式重复输出，难以维护。
优点：
（1）容易维护：减少了大量的重复选择器，避免了一些样式的低级错误；
（2）提高复用性：使用变量维护某个属性值，修改方便；
（3）减少代码：常用代码使用代码块；
（4）生成更加复杂的样式：提供了颜色函数（lighten，darken 等），mixins，loops 等方法，使 CSS 更像编程语言，能够让开发者生成更复杂的 CSS 样式。
缺点
编译需要一定的时间
补充
Less、Sass 都是动态的样式语言，是 CSS 预处理器， CSS 上的一种抽象层。
Less 变量符号是 @，Sass 变量符号是 $ 。

CSS 伪类和伪元素？

伪类：
（1）用于当元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，功能类似于 class。但它是基于 DOM 树之外的信息，所以叫伪类。例如：:hover active
（2）用单冒号(:)来表示
伪元素：
（1）DOM 树没有定义的虚拟元素，通常用来创建不存在于文档中的元素。比如：::after ::before
（2）起初，是用单冒号(:)表示；后来被规范成双冒号(::)表示

CSS选择器有哪些？哪些属性可以继承？

CSS选择器：
(1) id选择器
(2) 类选择器
(3) 标签选择器
(4) 相邻选择器（h1 + p）
(5)子选择器（ul > li）
(6) 后代选择器（li a）
(7) 通配符选择器（*）
(8) 属性选择器（a[rel="external"]）
(9) 伪类选择器（a:hover，li:nth-child）
可继承的属性：
1> 字体系列属性：
font，font-family， font-weight，font-size，font-style，font-variant；
2> 文本系列属性：
text-indent‘，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color
3> 元素可见性：
visibility
4> 表格布局属性：
caption-style，border-collapse，border-spacing，empty-cells，table-layout
5> 列表属性：
list-style-type，list-style-position，list-style
6> 光标属性：
cursor
7> 引用：
quotes
不可继承的属性：border，padding，margin，width，height
1> display
2> 文本属性：
vertical-align，text-decoration
3> 盒子模型属性：
height，width，padding，margin，border
4> 背景属性：
背景图片，颜色，位置；
5> 定位属性：
float，clear（清除浮动），position，
6> 生成内容：
content，counter-reset，counter-increment
7> 轮廓样式属性：
outline-style，outline-width，outline-color，outline
8> 页面样式属性：
size，page-break-before，page-break-after

CSS优先级算法如何计算？

可以给选择器假设权重值：
id选择器权重假设为 100
class/伪类选择器假设为 10
标签选择器假设为 1

注意点：
(1) important 声明的样式优先级最高，其次是行内样式；
(2) 如果优先级相同，则选择最后出现的样式。
(3) 继承得到的样式的优先级最低。

元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素宽度时，它是相对于父容器的宽度计算的；
对于一些表示竖向距离的属性，例如 padding-top，padding-bottom，margin-top，margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

上下 margin 重合问题？

解决方法：在重合元素外包裹一层容器，并触发该容器生成一个BFC

  <div class="aside"></div>
  <!-- 给盒子 main 外面再包一层 div -->
  <div class="text">
    <div class="main"></div>
  </div>

.aside {
  margin-bottom: 100px;
  width: 100px;
  height: 150px;
  background: #f66;
}
/* 通过改变此 div 的属性使两个盒子分属于两个不同的 BFC，以此来阻止margin 重叠 */
.main {
  margin-top: 100px;
  height: 200px;
  background: #fcc;
}
.text {
  overflow: hidden;
}

清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

浮动的元素是脱离文档标准流的，如果不清除浮动，就会造成父元素高度塌陷，影响页面布局。

清除浮动方法：

（1）为父元素设置高度；

（2）父容器设置 overflow: hidden或者auto。

<div style="overflow: hidden;">
  <div style="float:left;width:45%;"></div>
  <div style="float:right;width:45%;"></div>
</div>

（3）在浮动元素下方添加一个非浮动元素

<div>
  <div style="float:left;width:45%;"></div>
  <div style="float:right;width:45%;"></div>
  <div style="clear:both;"></div>
</div>

（4）为父元素添加伪元素(推荐)

.clear::after { 
     content:""; 
     display:block; 
     clear:both;
}

display: inline-block 什么时候会显示间隙？

（1）有空格时候会有间隙。解决：删除除空格
（2）margin 正值的时候。解决：margin 使用负值
（3）使用 font-size 时候。解决：font-size: 0、letter-spacing、word-spacing

position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

属性介绍：
display 属性：规定元素应该生成的框的类型；
position 属性：规定元素的定位类型；
float 属性：是一种布局方式，定义元素在哪个方向浮动。
效果：类似于优先级机制：
position：absolute/fixed 优先级最高，当使用了定位后，float 不起作用，display 值会被调整为 block。
注意：float 或者 absolute 定位的元素，只能是块元素或表格。

如何让一个不定宽高的盒子水平垂直居中

HTML 页面结构

    <div class="father">
      <div class="son">inner</div>
    </div>

flex布局

  .father {
      display: flex;
      justify-content: center;
      align-items: center;
  }

定位 + transform

  .father {
      position: relative;
  }
  .son {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

如何实现一个最大的正方形？

    width: 100%;
    padding-bottom: 100%;
    border: 1px solid;

如何画三角形？

原理：
首先，需要把元素的宽度、高度设为0。然后设置边框样式。
页面：
```
    <div class="triangle"></div>
```

样式：

    .triangle {
      width: 0;
      height: 0;
      border-top: 50px solid blue;
      border-right: 50px solid red;
      border-bottom: 50px solid green;
      border-left: 50px solid yellow;
    }

上述的代码可以产生的效果如下：

如果想要三角形，则只需要将其余边变成透明即可；

  .triangle{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid blue;
   }

一行水平居中，多行水平居左？

html

<div>
  <p>文字描述性信息</p>
<div>

css

div {
    width: 300px;
    text-align: center;
    border: 1px solid;
}
div p {
    display: inline-block;
    text-align: left;
}

Flex 布局？

我曾经写过的一篇文章：Flex 布局

两栏布局，左边固定，右边自适应，左右不重叠？

首先定义布局的 html 代码如下：

  <div class="wrapper">
    <div class="left">左边内容：宽度固定</div>
    <div class="right">右侧内容：自适应，并且不重合</div>
  </div>

(1) 双 inline-block 布局

    .wrapper {
      box-sizing: border-box;
      font-size: 0;
    }
    .wrapper > div {
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;
      border: 1px solid green;
    }
    .wrapper .left {
      width: 120px;
    }
    .wrapper .right {
      width: calc(100% - 120px);
    }

(2) 双 float: left 布局

      .wrapper {
        /* 清除浮动 */
        overflow: auto; 
      }
      .wrapper > div {
        box-sizing: border-box;
        float: left;
        border: 1px solid green;
      }
      .wrapper .left {
        width: 120px;
      }
      .wrapper .right {
        width: calc(100% - 120px);
      }

(3) 左侧 float，右侧 margin-left

      .wrapper {
        /* 清除浮动 */
        overflow: hidden;
      }
      .wrapper > div {
        box-sizing: border-box;
        border: 1px solid green;
      }
      .wrapper .left {
        float: left;
        width: 120px;
      }
      .wrapper .right {
        margin-left: 120px;
      }

(4) 左侧使用定位，右侧使用margin-left

      .wrapper {
        position: relative;
      }
      .wrapper > div {
        box-sizing: border-box;
        border: 1px solid green;
      }
      .wrapper .left {
        position: absolute;
        width: 120px;
      }
      .wrapper .right {
        margin-left: 120px;
      }

(5) 使用 float 与 BFC

      .wrapper {
        /* 清除浮动 */
        overflow: auto;
      }
      .wrapper > div {
        box-sizing: border-box;
        border: 1px solid green;
      }
      .wrapper .left {
        float: left;
      }
      .wrapper .right {
        overflow: auto;
      }

(6)使用 flex

      .wrapper {
        display: flex;
      }
      .wrapper > div {
        box-sizing: border-box;
        border: 1px solid green;
      }
      .wrapper .left {
        width: 120px;
      }
      .wrapper .right {
        flex: 1;
      }

position 值有哪些？

默认：static：
按照正常文档流进行排列；
相对定位：relative
对象不可层叠，不脱离文档流，参考自身静态位置进行定位。
绝对定位：absolute
脱离文档流。选取最近一个具有定位设置的父级标签进行绝对定位。如果父级对象都没有设置定位，则参考 body 坐标原点进行定位。
固定定位：fixed
脱离文档流，相对于浏览器窗口进行定位。

粘性定位：sticky
主要用在对 scroll 事件的监听上，可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

  #wrapper { position: sticky; top: 10px; }
  /* 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。
     之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。 */

还有一些不常用：inherit，initial

display: none与visibility：hidden的区别?

display：none：元素不占据空间位置；会引起 reflow，repaint
visibility： hidden：元素依旧占据空间位置；会引起 repaint；

行内元素和块级元素的区别？

块级元素：div, p, h1-h6, form, ul, li ...
（1）各占一行，垂直方向排列；
（2）可以包含其他块级或者行内元素；
（3）高度、行高以及外边距和内边距都可控制；
（4）默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关。
行内元素：span, a, label, input, img, strong, em
（1）水平方向排列，不会自动换行；
（2）不可以包含块级元素，但是可以包含其他行内元素或者文本；
（3）行内元素设置width、height无效(可以设置line-height)，margin和padding上下无效；
（4）宽度就是它的文字和图片的宽度，不可改变。
互相转化：
display: inline：转为行内元素
display: block：转为块级元素
补充
display: inline-block: 顾名思义，汇集了两种特性；不换行，又可以设置对应属性。
空元素：<br> <hr> <img> <link> <meta>