CSS：18个重要且常用的东西

本文用于复习CSS的一些基础且常用的知识。

1. 盒子

每个元素都是一个盒子，该盒子由内容、内边距、边框、外边距组成

盒子宽高的计算有两种方式，用box-sizing属性来设置：

• content-box：这是标准的计算方式，盒子宽高仅仅由内容决定

• border-box：盒子宽高由内容、内边距、边框一起决定，IE用的就是这种

2. 常用选择器

• 选择全部元素：* {}
• 选择 h1 元素：h1 {}
• 选择类名为 tag 的元素：.tag {}
• 选择 id 为 title 的元素：#title {}
• 选择 li 元素内所有的 a 元素：`li a {}
• 选择与 h1 元素处于同一个父元素内的 p 元素：h1 ~ p {}
• 选择与 h1 元素处于同一个父元素内且在 h1 后面的 p 元素：h1 + p {}
• 元素属性选择器（attribute selector）：
  • 选择具有 class 属性的 p 元素：p[class] {}
  • 选择 class 属性值为 dog 的 p 元素：p[class="dog"] {}

3. 优先级

同一个元素可以使用多个规则来指定它的某个样式属性（比如同一个CSS文件内可能会有两条规则来设置元素A的字体颜色），每条规则都有自己的选择器，显然最终只有一个规则会起作用（不可能字体颜色既是红色又是绿色）。

就以设置元素A的字体色为例，假如设置了两条规则，那么影响到底哪条规则起作用的因素有以下这些，请以单一变量原则理解每一个因素，即考虑某个因素时要假定其他因素都是一样的：

• 规则出现的顺序：越后面的CSS规则优先级越高

• 选择器的具体程度：越具体的优先级越高

  扫描二维码关注公众号，回复： 11193403 查看本文章

  * < p < h1~ p < h1 + p < h1 + p.my-class < #intro

• 规则出现的位置：!important > 行内样式 > 不带!important的外联样式 > <style>元素内的样式

理解优先级的好处是可以使用先写全局样式，再通过具体样式覆盖全局样式的策略来实现简洁、清晰、整齐的样式表。

4. CSS继承

有些样式属性，如果你不给它设定一个值，它就会从父元素那里获得一个值，这样的属性就被称为继承属性（inherited property），比如font-size、text-indent等。你不用记住具体哪些属性是继承属性，因为浏览器会告诉你：

​

如果一个属性是继承属性，那么它必定有一个可选值是 inherit。

可以强制一个属性去从父元素继承一个值（color: inherit）

5. 伪元素（pseudo-element）和伪类（pseudo-class）

伪类和伪元素是用来给不在DOM上的内容添加样式的，伪元素用来在DOM上创建一个元素并添加样式，而伪类用来给处于某个状态的元素添加样式。

最常用的伪类和伪元素：

• ::first-letter、::first-child、::last-child、::before、::after
• :link、:visited、:hover、:active、:focus

6. CSS：元素定位机制（positioning schemes）

CSS通过position属性来设置元素的定位机制，默认值是static

• 正常流（normal flow）：默认，行内元素一个接一个，块级元素一行接一行。

• 相对定位（relative）：元素仍在正常流内，可以进行一定的偏移，不影响周围元素

  h1 {
      position: relative;
      top: 20px;
      left: 36px;
  }
  

• 绝对定位（absolute）：脱离正常流，相对于position值不为static的父元素或body元素进行偏移，任何一个元素进行了决对定位，就变成了块级元素。

• 固定定位（fixed）：脱离正常流，相对于浏览器窗口进行偏移，页面滚动时该元素不动

• 浮动（float）：脱离正常流，并总是定位在父元素的最左边或者最右边

一个元素如果脱离了正常流，那么它就有可能和别的元素重叠起来，此时需要使用CSS z-index 属性来调整哪个元素应该在上面。

7. 清除浮动

容器高度不固定且内部元素有浮动时，浮动元素跑出容器外、该容器高度变为0的现象称为浮动溢出，通过清除浮动可以解决该问题：

• 方法一：在浮动元素后面放置一个设置了clear的空元素——<div style="clear: both;"></div>

• 方法二：如果浮动元素后面有未浮动的元素，为其设置 clear: both; 也一样。

• 方法三：给容器设置伪元素 ::after，从而在内部末尾生成一个看不见的元素，然后再设置 clear: both;

  //假设容器有类名为：clearfix
  .clearfix::after {
    clear: both;
  }
  

• 方法四：给容器设置overflow——overflow: auto

8. BFC

BFC是每个元素都可以具有的一个特性，一个元素一旦被触发BFC，那么它将仍在正常流但是具有了普通盒子不具备的一些特点，它已经变成了一个独立的区块，不受外面元素的影响。

以下元素具有BFC特性（如何触发BFC）：

• <body元素
• float值不为none的元素
• position值为absolute或fixed的元素
• display值为inline-block、table-cells、flex的元素
• overflow值为hidden、auto、scroll的元素

BFC的应用：

• 清除浮动的第四种方法（利用了BFC可以包裹浮动元素的特性）

• 实现两列自适应布局，（利用了BFC可以防止浮动元素覆盖其他元素的特性）：

  左侧固定宽度且浮动，右侧宽度自适应、不浮动、设置overflow以触发BFC

9. 单行文字溢出用省略号表示

p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

10. 多行文字溢出用省略号表示

.summary p {
  display: -webkit-box;
  overflow: hidden;  
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

11. 盒子水平居中

• 方法1：margin法

  /* 块级、定宽、左右外边距为auto，这三个缺一不可 */
  .box {
    display: block;
    width: 100px;
    margin: 0 auto;
  }
  

• 方法2：定位法

  /* 绝对定位、定宽、定位50%，往回偏移盒子宽度的一半，这三个缺一不可 */
  .box {
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
  }
  
  

• 方法3：不定宽定位法

  .box {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0)
  }
  

• 方法4：flex布局（见后文）

12. 盒子垂直居中

• 方法1：定位法，思路、要求都和水平居中的定位法一样

• 方法2：不定宽定位法

  .box {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
  

• 方法3：flex布局（见后卫）

13. 盒子变换：transform

transform属性可以对元素进行旋转（rotate）、缩放（scale）、平移（translate）、扭曲（skew）等操作，这些操作可以同时进行，之间用空格隔开，比如：

transform: translate(20px, 0) rotate(30deg)

• 旋转：transform: rotate(30deg)
• 缩放：transform: scale(2, 3)，X方向放大2倍，Y方向放大3倍
• 平移：transform: translate(20px, 50px)，X方向移动20px，Y方向移动50px
• 扭曲：transform: skew(30deg, -30deg)，X方向扭曲30度，Y方向扭曲负30度

14. 让变化飞一会儿：过渡（transition）

人们通常会在元素上出现鼠标hover等事件时对样式进行修改，比如，在hover时修改元素宽度：

.box {
  width: 50px;
}
.box:hover {
  width: 100px;
}

但是这样的变化太生硬了，可以通过将width属性设置为过渡属性，来让变化的过程肉眼可见：

.box {
  width: 50px;
  transition: width 500ms linear;
}
.box:hover {
  width: 100px;
}

过渡可以让某个属性的变化看起来更平滑，通常人们会对尺寸、颜色、透明度、位置、角度等进行过渡。

语法：transition: [属性] [时间] [速度曲线]

可选速度曲线：linear、ease、ease-in、ease-out、ease-in-out

15. 弹性布局：flex

flex布局由 flex-container 和 flex-item 两部分组成。一个盒子的display属性一旦被设置为flex或inline-flex，它就变成了一个flex container，它的内部元素就自动变成了flex item。要完成弹性布局就得分别对这两部分进行属性设置。

学习的最佳方式就是做一个父元素包着子元素的例子，照着文档实际尝试一番，不用记住每一条，当然也记不住，除非敲的够多了。

下面列一些基本属性：

flex-container的设置

• flex-directon：指定flex-item应该如何排列，有横竖（row、column）两个方向，这两个方向也称为 main-axis。

  可选值： row、row-reverse、column、column-reverse

• flex-wrap：当flex-container的宽度不足时，指定flex-item应不应该换行显示，可选值：

  • no-wrap：此时flex-item会尽量调窄宽度
  • wrap：flex-item不会调窄宽度，而是换行显示（这里的“行”和flex-direction有关）
  • wrap-reverse：先换行，再颠倒

• flex-flow：flex-direction和flex-wrap的简写：flex-flow: row wrap;

• justify-content：调整flex-item的对齐方式以及剩余空间的分配方式，常用值：center、flex-start、flex-end、space-around、space-between、space-evenly

• align-items：当flex-item都在一行时，该属性决定它们在竖直方向如何对齐

• align-content：当flex-item不止一行且竖直方向有剩余空间时，该属性可以调整flex-item和剩余空间的分配方式

flex-item的设置

• order：每个flex-item都有一个默认的排序值：0，如果单独修改某个flex-item的order值，那么它的出现顺序就会发生变化

• flex-grow：值为数字，默认为0。当一行中还有剩余空间时，设置了该属性就会让flex-item的尺寸放大一定比例。

• flex-shrink：值为数字，默认为0。当一行中空间不足时，设置该属性就会让flex-item的尺寸缩小一定比例。

• align-self：该属性允许某个flex-item设置与其他flex-item不一样的对齐方式。

16. 设置滚动条样式

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width:5px;
  background-color: white;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius:10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background: #096dd9;
}