CSS基础学习总结

1.css是给HTML标签添加 样式 的语言，通过选择器（标签、id、class）建立连接

2.css三种形式

内嵌式：在< head></ head>中写< style>css</ style>
外链式：在< head></ head>中写< link rel=”stylesheet” href=”css/css.css”>
行内式：在标签上直接写<h2 style=”color: red;”>标题</ h2>
导入式：

3.基本语法

选择器+括号对（K:V;）

4.选择器详解

标签选择器“覆盖面”非常大， 所以通常用于标签的初始化
Eg.ul{list-style:none;} （列表样式没有，去掉列表的圆点）
Class有个原子类的玩法，就是把类名class=”px color”也写成css的样式，用空格隔开不同的。

5. 复合选择器

• 后代选择器（空格，如.box p .ddd。元素2可以是儿子，也可以是孙子等，只要是元素1 的后代即可）
• 子选择器（>，如元素1>元素2。元素2必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器）
• 并集选择器（逗号，如ul,ol。并集选择器通常用于集体声明）
• 交集选择器（又h1又spec类名连在一起，如h1.spec）

6.伪类选择器

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child。其中p：first-child的正确理解是（假设p的父元素是x）：x的第一个叫做p的儿子。

7.>+~元素关系选择器

8.序号选择器、属性选择器、CSS3新增伪类（empty等）、CSS3新增伪元素::before 和 ::after 伪元素：

给元素设置伪元素的时候，必须设置其content属性，浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串：content: “”。允许您在任何非替换元素之前或之后插入内容，这不是实际内容，是装饰性内容。开发中典型的用法在文字后加入红色星号表示必填表单内容。

9.CSS样式层叠性

• style scoped
  使用场景为在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加< style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。除此之外，一个组件引入的多个子组件，子组件之间也会相互影响。
  由于scope引出了/deep/的玩法

• /deep/
  如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 /deep/了。
  /deep/表示深度选择器，可以做到既不影响到别的地方，又能修改子组件在当前的样式。
  除了 /deep/ 以外，>>> 和 ::v-deep也可以实现同样的效果。注意：/deep/ 只能在像 less , sass 等css预处理器中使用，在原生css中使用无效，所以原生css当中应使用 >>>

• 遇到冲突可以根据id>class>标签来算，也可以计算权重（个人认为不会写出这样的代码，除非解决问题）

• 实际例子
  ::-webkit-scrollbar 修改整个滚动条的样式

10.字体 font xx

11.段落和行的属性也可以通过css设置

12.color front- list- text- line有继承性，祖先设置标签，既可在后代所有标签中生效。

13.盒模型（HTML标签都是盒子）

• width宽、height高、padding填充、border边框

• margin 盒子与盒子之间的距离（margin不叠加，塌陷现象，以大的为准），因为body等有默认的margin，所以在开始制作时，初始化清0。将盒子左右两边的margin都设置为auto，盒子将水平居中：
  Eg：.box{ margin: 0 auto;}（上下是0，左右居中）
  盒子垂直居中，需要使用绝对定位技术实现。
  盒模型计算，来设计布局

• 添加box-sizing:border-box（默认是content-box：传统的盒模型）后，就变成内缩而不是外扩，该属性大部分应用到移动页面中。

• 行内元素，块级元素，display属性可以将两种元素互转。display:block;、display:inline;、display:inline-block;

• 脱离标准文档流：浮动、绝对定位、固定定位，下面的元素会占据原来的位置，即丢掉了当前的位置。

14.浮动float

浮动（float属性）的最本质功能是用来实现并排（div作为块级元素，天生是竖直排列的）
子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前面一个兄弟元素
设置float以后，行内元素也有宽和高。
1垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动。
2一个大盒子带着小盒子，大盒子内部的小盒子设置浮动。
3多用div，一层一层的分块。

15.BFC（编程不规范涉及的操作）、清除浮动（涉及到再仔细看；让内部有浮动的父盒子形成BFC，他就能关闭住内部的浮动，overflow：hidden）

16.相对定位

.box1{ position:relative; top: 100px; left: 100px; }
相对自己原来的位置进行位置调整
相对定位的元素，本质还是原来的位置，只不过渲染在新的地方（产生影子），不会对页面其他元素产生影响。
微调元素位置，调那些不怕被覆盖的地方。

17.绝对定位

.box1{ position:absolute; top: 100px; left: 100px; }
与相对定位不同，就是实际，不是影子，会覆盖其他。
绝对定位的盒子，会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当作基准点。通常用相对定位作基准点。子绝父相。
父盒子写position：absolute；但不动，不设置left啥的，子盒子绝对定位就能以该父盒子进行绝对定位了。

做垂直居中：
.box{position:absolute;
top: 50%; /上边线是百分之50，上边线居中了/
left: 50%;
margin-top：-自己高度的一半; /往上拉回了自己高度的一半/
margin-left: -自己宽度的一般;}
此时不能用margin: 0 auto;了，因为绝对定位脱离了标准文档了。

z-index属性，数值大的覆盖数值小的。

三大作用：
覆盖压盖效果
结合css精灵
结合js实现动画

18.固定定位

position:fix;
页面卷动，它也不变；只以页面为参考点；脱离标准文档流；可以用来做返回顶部（顶部导航栏不动z-index:999）、楼层导航等等。

小总结：position属性重点有两类：占位、可偏移
当元素开启了定位以后，可以通过偏移量来设置元素的位置。
top、bottom、left、right

eg.实现一个悬浮在视口右侧不随滑动变位置的button。
.{
	width: 50px;
	position:fixed;
	left: calc(100%-50px);
	top:30%;
	z-index:999;
}

19.css提供了很多小属性，它的目的是层叠大属性，类似于继承多态的感觉。

20.边框border有很多种玩法，变虚线、变三角、变圆角。

21.box-shadow可以设置阴影.

22.背景与渐变background系列属性（用时看）

23.变形transform

旋转变形、位移变形（跟相对定位一样，兼容性不如相对定位）、3d变形旋转、空间移动

24.transition 过度属性，一个元素在不同样式之间变化自动添加“补间动画”。（其他用时再看）

25.overflow

overflow: auto与scroll在内容超出时浏览器均会显示滚动条，但在元素没有超出时，auto会隐藏滚动条，scroll依旧显示滚动条，但是禁用该滚动条

26.在CSS样式中很多样式名前缀都带有’-webkit-‘，但在CSS提供的API中查询不到这些样式名

原因：CSS3中新增了一些属性，针对不同的浏览器，规定其内核名称让它们可以对这些新增属性进行解析。

解释：前缀为“-webkit-”的属性，能够在以webkit为内核的浏览器中正常使用。

各个不同浏览器内核列表：-moz代表firefox浏览器私有属性；-ms代表IE浏览器私有属性；-webkit代表chrome、safari私有属性；-o代表Opera私有属性
使用原因：为了浏览器兼容，某些css的API只支持IE10+，例如transform，直接使用为W3C的标签，对IE9+不支持，要兼容浏览器需要添加前缀
{
transform:translate(10,10) // W3c标准
-webkit-transform:translate(10,10) // Safari Chrome
-moz-transform:translate(10,10) // firefox
-ms-transform:translate(10,10) // IE9
-o-transform:translate(10,10) // opera
}

27.calc()

注意±前后必须有空格，如calc(100% - 20), calc(100%-20)没有空格写法错误

28.css做文字后跟省略号效果

text-overflow: ellipsis; // 显示省略号代表被修剪的文本
white-space: nowrap: // 文本不换行
overflow: hidden;

29.css做文字换行效果

width: 300px; // 设置宽
word-break: break-word; // 超过后换行

后续将持续更新…