cssCSS类 flex flex-shink是设置默认宽度父容器属性，display:flex是基本， justif

CSS类

属性选择器

以下是各种 CSS 属性选择器的详细代码示例1：

属性存在选择器

p[title] {
  color: red;
}

上述代码表示选择所有带有title属性的<p>元素，并将文字颜色设置为红色。

等于选择器

a[href="https://www.example.com"] {
  text-decoration: none;
}

表示选择具有href属性值为https://www.example.com的<a>元素，并将其文字装饰设置为无。

包含选择器

img[src*="logo"] {
  width: 100px;
  height: 100px;
}

表示选择所有src属性值中包含logo的<img>元素，并将其宽高设置为 100 像素。

开头匹配选择器

div[class^="btn"] {
  background-color: orange;
}

表示选择所有class属性值以btn开头的<div>元素，并将背景颜色设置为橙色。

结尾匹配选择器

a[href$=".pdf"] {
  color: #0f0;
}

表示选择所有href属性值以.pdf结尾的<a>元素，并将文字颜色设置为绿色。

包含词选择器

div(class~="red") {
  border: 1px solid red;
}

表示选择所有class属性值中包含单词red的<div>元素，并为其设置 1 像素红色实线边框。

部分值匹配选择器

html(lang|="en") {
  font-family: Arial, sans-serif;
}

表示选择lang属性值为en或en-开头的<html>元素，并将字体设置为 Arial 或无衬线字体。

BFC

:not

非属性 :not([class]){color:red;} // 没有class属性的元素都设置为红色

p:not([class]){color:red;} // 没有class属性的p元素都设置为红色

margin

margin-top 元素自身会向上移动，同时会影响下方的元素会向上移动；
margin-botom 元素自身不会位移，但是会减少自身供css读取的高度，从而影响下方的元素会向上移动。
margin-left 元素自身会向左移动，同时会影响其它元素；
margin-right 元素自身不会位移，但是会减少自身供css读取的宽度，从而影响右侧的元素会向左移动；

基础

文字类块级标签，里面不能放其他块级元素，比如P标签，H1,H2,H3之类

单行、多行文本溢出隐藏

单行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行
复制代码

多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数
复制代码

注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。

1. 常见的CSS布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。

em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。
rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

vw：相对于视窗的宽度，视窗宽度是100vw；
vh：相对于视窗的高度，视窗高度是100vh；
vmin：vw和vh中的较小值；
vmax：vw和vh中的较大值；

vw/vh 和百分比很类似，两者的区别：

百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vm：相对于视窗的尺寸

动态class

class属性可以绑定data中的变量，实现动态的css效果

:class="flag ? 'active' : '' "
或者
:class="{tableBoxthr:true,crReportTable2:emptyData}"

如何根据设计稿进行移动端适配？

移动端适配主要有两个维度：

适配不同像素密度， 针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；
适配不同屏幕大小， 由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。

为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位。

css3属性

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadoweflect）
文字特效（text-shadow）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
增加了旋转,缩放,定位,倾斜,动画,多背景

transition 过渡 animation 动画 box-shadow阴影 border-image边框图片倒影

css