CSS

背景

背景图片的覆盖范围通过background-clip属性定义，有以下几种取值：

• border-box：覆盖到border区域。
• padding-box：只覆盖到padding区域。
• content-box：只覆盖content区域。

margin

两个元素间的垂直margin不会叠加，只会取最大值
##文本
文本垂直居中：line-height设置与block元素的height相等

单行文本溢出：

white-space: nowrap; /* 不换行 */
overflow: hidden;    /* 溢出部分隐藏 */
text-overflow: ellipse; /* 溢出文本省略号表示 */

多行文本溢出：

##img
图片高同宽的实现（利用padding-bottom的百分比是基于父元素宽度的特性）：

生成一个正方形元素的关键在于给这个元素设置一个父元素，然后这个元素的height设为0，然后padding-bottom设为100%（基于父元素的100%），这样这个元素就是一个正方形元素了。

<div class='rec-parent'>
	<div class='rec'>
	    <img src="123.png">
	</div>
</div>

// 正方形父元素，用来给正方形元素提供宽度
.rec-parent{
    width: 40%;
}

// 正方形元素，高度指定为0，padding-bottom为父元素宽度100%使之成为正方形
.rec {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    // 给子元素提供定位基准
    position: relative;
}

.rec img {
    // 绝对定位，如果不绝对定位，则width是100%的父元素，会为0
    position: absolute;
    width: 100%;
    height:100%;
}

Selectors

选择器的分类：

• 简单选择器：使用元素类型、class、id等进行匹配。
• 属性选择器：使用属性或属性值进行匹配。
• 伪类选择器：使用元素特定状态或元素特定部分进行匹配，例如鼠标滑过、选中状态、首个子元素等等。
• 伪元素选择器：使用相对于某个元素的特定位置进行匹配，例如每段首字母、某个元素前面等等。
• 混合选择器

属性选择器

• [attr]：匹配存在该属性的元素：

  [data-vegetable] {
  color: green;
  

  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  

• [attr=val]：匹配存在该属性，并且属性值为val的元素：

  [data-vegetable="liquid"] {
  color: green;
  

  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  

• [attr~=val]：匹配存在该属性，并且包含多个属性值，以空格为分隔符，属性值中包含val的元素：

  [data-vegetable~="spicy"] {
      color: red;
  }
  

  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  

• [attr|=val]：匹配存在该属性，并且属性值为val或者以val-开头的元素：

  [lang|=fr] {
      font-weight: bold;
  }
  

  <i lang="fr-FR">Poulet basquaise</i>
  

• [attr^=val]：匹配存在该属性，并且属性值以val开头：

  [data-quantity^="optional"] {
      opacity: 0.5;
  }
  

  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  

• [attr$=val]：匹配存在该属性，并且属性值以val结尾：

  [data-quantity$="kg"] {
      font-weight: bold;
  }
  

  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  

• [attr*=val]：匹配存在该属性，并且属性值包含val（与[attr|=val]不同，[attr*=val]并不会把空格看成分隔符，而是看成属性值的一部分）

  [data-vegetable*="not spicy"] {
      color: green;
  }
  

  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  

伪类选择器

伪类选择器使用:开头，在原有选择器的基础上进行修饰，常见的伪类：

• :hover
• :first-child：所修饰元素是父元素中的第一个元素时。
• :first-of-type：所修饰元素是父元素中的第一个该类元素时。

伪元素选择器

伪元素选择器用来给指定元素的特定位置上添加内容或进行修饰的，使用::进行表示，常用伪元素选择器：

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

使用举例（使用content进行内容添加）：

[href^=http]::after {
  content: '⤴';
}

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

混合选择器

假设A和B分别是两个选择器：

• AB：并列选择器，没有空格，同时具有A和B条件，如果有标签选择器必须放前面避免混淆
• A, B：组选择器，符合A选择器或B选择器的元素即可。
• A B：后代选择器，符合B选择器，同时是A选择器元素的后代元素。
• A > B：子选择器，符合B选择器，同时是A选择器元素的直接子元素。
• A + B：相邻兄弟选择器，符合B选择器，同时是A选择器元素的下一个兄弟元素（同个父元素的元素）。
• A ~ B：通用兄弟选择器，符合B选择器，同时是A选择器元素的兄弟元素中的一个。

选择器权重

同个css语句内所有选择器的权重相加即为该CSS语句权重。同权重的后面声明的覆盖前面的。

• !important: Infinity
• 行内样式（内联样式）: 1000
• ID选择器: 100
• 类/属性/伪类选择器: 10
• 标签/伪元素选择器: 1
• 通配符（*）: 0

但是选择器的权重不能进位，也就是同级别选择器叠加不会大于更高级别选择器的权重，例如11个类选择器组合成的选择器权重看似为110，但是因为不能进位，仍然小于单个ID选择器。菜鸟教程CSS 样式优先级

CSS里面正无穷+1大于正无穷。

子元素只有在自身没有设定相应的样式参数时，才会继承父元素的。如果自己有设置样式了就不会考虑父元素样式，即使是!important。

font-size设置的是字体高度。
font-weight能否生效取决于字体包有没有对应的粗细
line-height是相对于字体高度而言的。

float

float元素产生浮动流，浮动流对于block元素没有影响（即会产生重叠），对于具备内联属性（inline、inline-）元素、BFC元素、纯文本元素是有影响的（即前后排列）。所以两个float元素会依次排列。

父容器（块级元素）包含多个浮动元素，无法准确包裹的解决：第一种方式是在最后添加一个clear: both;的元素（可以是伪元素，注意要设置为block才能清除浮动流）清除浮动流，这个元素宽高可以为0，注意必须要block元素才能清除浮动。第二种方式是因为包裹不住的原因是浮动流对于block元素是不可见的，只要把block元素变为BFC就可以了，例如添加绝对定位、添加float之类的。

伪元素

每个元素前后都有两个元素，分别是::before和::after，属于inline元素，默认为空，可以通过content设置内容：

some-cls::before {
    content: "Before",
    display: "block",
    background-color: yellow;
    width: 100px;
    height: 100px;
}

#background

/* 设置背景的位置 */
background-position: left top;       /* 位于左上角 */
background-position: center center;  /* 位于居中 */
background-position: 10% 10%;        /* 位于离左边10%，离上面10%的位置。当为50%时，实际上会居中，此时并不一定距左边或上面50%，50%是个特殊值。 */
background-position: 100px 100px;    /* 距左上角100px 100px */

图片代替文本时应对浏览器默认加载情况（网速低不加载css、js时）

希望达到图片无法加载时，文本可以显示。图片正常加载时，文字不显示。

第一种方法：在css中设置文本缩进容器长度、不换行，溢出隐藏，这样css正常加载时文字不会显示，css不正常加载时文字显示出来：

<a href="http://www.taobao.com" target="_blank">淘宝网</a>

a {
    display: inline-block;
    text-decoration: none;
    color: #424242;
    width: 190px;
    height: 90px;
    background-image: url(http://....);
    background-size: 190px 90px;
	
	text-indent: 200px;
	white-space: nowrap;
	overflow: hidden;
}

第二种方法：因为背景可以正常显示在padding当中，所以可以把高度设为0，然后padding设为图片的高度：

<a href="http://www.taobao.com" target="_blank">淘宝网</a>

a {
    display: inline-block;
    text-decoration: none;
    color: #424242;
    width: 190px;
    height: 0;
    background-image: url(http://....);
    background-size: 190px 90px;
	
    padding-top: 90px;
	overflow: hidden;
}

#行级元素和块级元素
inline元素只能嵌套inline元素（例如span嵌套span），block元素可以嵌套任何元素（div可以嵌套div），但是有例外：p（block元素）不能嵌套div（block元素），如果嵌套了，p会被div分割为两个p。

a标签不能嵌套a标签

以图片为文字背景

/*背景样式*/
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(img/bg1.jpg);
/*文字样式*/
font-size: 70px;
font-weight: bold;
text-align: center;
line-height: 300px;
/*图片文字样式*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

line-height

line-height指定的高度不包括border的高度，如果height和line-height一样高，但是又设置了border，则会导致字体无法垂直居中。

解决办法：不要设置height，直接设置line-height和border，line-height本身也可以撑起高度。实际高度为line-height加上border的高度。

flex盒子子元素文字超出父元素

例如：

<div id="parent" style="display: flex; width: 300px;">
  <div id="left" style="width: 100px;"></div>
  <div id="right" style="flex: 1;">右边内容右边内容右边内容右边内容</div>
</div>

当flex为1的右边容器里的文本元素过长时，会导致直接超出父元素，如果要达到自动换行的效果，可以结合overflow和word-break属性：

#right {
  flex: 1;
  overflow: hidden;
  word-break: break-all;
}

另外可以研究一下word-break和overflow-wrap（别名为word-wrap）的区别。

css单行省略和多行省略

单行省略：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行省略：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

CSS文本溢出显示省略号

瀑布流布局实现

使用CSS的multi-column实现，列表项从上往下排列，自动换行。

父元素使用column-count: 2指定列数。另外可以通过column-gap属性指定列间距。

子元素使用break-inside: avoid避免内容自动分割。

文字跑马灯

<div id="box">
  <div id="content"></div>
</div>

子元素需要为绝对定位，才能超过父元素的宽度。

#box {
  position: relative;
  overflow: hidden;
}

#content {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  transform: translateX(100%);
  animation-name: running;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

}

@key-frames running {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: tranlateX(100%);
  }
}

图片指定宽高等比例缩放

object-fit: cover;

该CSS 3属性不兼容IE，可以使用polyfill兼容：object-fit-images。

使用方法：

首先元素要添加object-fit属性：

.some-image {
    object-fit: contain;
	font-family: 'object-fit: contain;';
}

无模块化使用：

1. 引入js文件

   <script src="dist/ofi.min.js"></script>
   

2. 界面加载完成后调用objectFitImages()方法：

   $(function () { 
     objectFitImages('.some-image')
   })
   

模块化使用，如Vue：

1. 安装依赖包

   npm install --save-dev object-fit-images
   

2. 导入

   import objectFitImages from 'object-fit-images';
   

3. 界面加载完成后调用

   export default {
     mounted: function(){
       objectFitImages('.some-image')
     }
   }
   

文字两端对齐

使用text-align:justify属性，但是该属性对最后一行无效，因此如果是单行文本，可以加上一个伪元素：

<div class="label">文本内容</div>

.label {
    width:100px;
    text-align: justify;
    text-justify: inter-ideograph;
}

.label::after {
    content: "";
    width: 100%;
    display: inline-block;
}

其中text-justify为兼容IE的属性。

参考：CSS之文本两端对齐

iOS浏览器img指定宽或高无法自动缩放的问题

object-fit: contain;

contain表示被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。

MDN：object-fit

清除Safari的默认按钮渲染

Safari默认会为input button等添加样式，这个样式的优先级是高于我们自定义样式的，所以如果要显示我们的自定义样式，需要通过-webkit-appearance去除自带样式：

input[type="submit"], 
input[type="reset"], 
input[type="button"], 
button { 
  -webkit-appearance: none;
}