css样式分为内部样式 ,内联样式【也称：行内样式 】,外部样式 三种

a、内部样式表（style标签）

b、内联样式表(style属性)

c、外部样式表
link设置 1：新建一个css文件 比如：index.css style.css;
2:通过link标签引入

            rel  定义关联样式表href css文件的路径

@import设置(不推荐)
style标签内设置

         1、加载顺序的问题，（先加载结构后加载样式，网速慢，网页会卡顿）2、兼容性没有link好3、对js的dom支持度也不好

css权重问题

!important > 内联样式>id选择器>calss选择器>标签选择器和伪元素选择器>通配符、子选择器、相邻选择器等>继承的样式没有权值

单行文本设置溢出隐藏并且转换为三个点…

1. 设置固定宽度
2. 让内容强制不换行（white-space：nowrap）
3. 设置溢出隐藏（overflow：hidden）
4. 把溢出隐藏的内容设成省略号（text-overflow：ellipsis）

img{display:block;}与Img图片默认的3px空白缝隙解决方法以及display相关问题

为什么经常见img{display:block;}这种设置？
img{display:block;} 表示将img标签，即图片标签由行内元素变成一个块级元素。
一般在制作轮播网页或使用到img图片时，我们都会对图片设置img{display:bolck}。因为img图片下方会有一个3px的白色空隙产生，这样设置之后可以把img变为块级元素从而来消除这段空隙。

vue防止闪烁

样式要加上

[v-cloak]{display: none;}

指令v-cloak的作用就是用来解决浏览器在加载页面时因存在事件差而产生的闪动问题，她的原理是先隐藏文件挂载位置，处理渲染好后在显示最终结果。这个指令需要与css规则一起使用才可以

 
 {{str}} 

CSS样式的继承

可继承属性
•	所有元素：visibility、cursor
•	列表元素：list-style、list-style-type、list-style-position、list-style-image
•	字体属性：line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、font-size-adjust
•	表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
•	文本属性：text-transform、direction
•	其它属性：letter-spacing、word-spacing
不可继承属性
•	盒子模型所有属性：margin、padding、border、width、height
•	轮廓及背景属性：outline、background
•	定位、显示、浮动属性：display、position、top、left、right、bottom、max-*（如max-height等）、min-*、overflow、clear、float、content、z-index、vertical-align
•	文本属性：white-space
•	其它：display
块级元素可以继承，内联元素不能继承属性
text-indent、text-align、text-decoration、text-shadow

link和@import的区别

opcity和rgba的区别

1. opacity属性的值，可以被其子元素继承，给父级div设置opacity属性，那么所有子元素都会继承这个属性，并且，该元素及其继承该属性的所有子元素的所有内容透明度都会改变。
RGBA设置的元素，只对该元素的背景色有改变，并且，该元素的后代不会继承该属性。

Vue当中scope局部样式的实现原理

当你在单个组件的style标签的内部加上了scoped,在编译的时候就会给当前组件的html标签加上一个data-v-hash的属性并且属性的值是哈希值,我们的样式中用选择器去选到对应的哈希值,从而达到但组件样式的局部化.

实现水平垂直居中的方法

你也可以top 0 left 0 right 0 bottom 0 margin auto但是这种方案是一定需要知道子元素的宽高的,而上面图片方案不需要知道图片的宽高,但是有一个缺点就是兼容性不是太好
下图的定位才是好一点的解决方案

这个有一个弊端就是父元素必须有宽高,子元素也必须有宽高