css

less css / sass 简化的css语言  postcss 一种css处理程序。

三个引用css方式

1.内联样式：把属性写在标签上。

2.style方式：直接把style写在head上。

3.引用外部文件：用<link rel="stylesheet" href="../a.css">的方法引用css（推荐）

4.在外部css中再引用一个css 在开头引用 @import url(xx.css)

关于浮动元素

为什么父级元素要清楚浮动。clearfix

因为父级元素内的子元素是浮动的，父级元素会产生无法被子集元素正常撑开的现象。所以需要把clearfix写在父级元素上

```.clearfix::after{

content:'';

display:block;

clear:both;

}```

横向结构：1.给所有的子元素加上float：left  2..给所有的父元素加上clearfix。

左边右边的高度要调整为一致。用padding调整。

如果鼠标移上去有个效果，但是会动，就提前设置一个边框

如果设置的父级元素包括不下自己元素，添加display:block;(块级元素，有换行符)

display: inline-block;（行内块元素） 一定要加上  vertical-align: top;

color：inherit  颜色继承。 a标签默认不继承，需要写继承属性。

文档流：文档内元素的流动方向

内联元素：从左往右，“之”字形

英语单词。最左到右，无法分开，要分开的话，添加属性：word-break：break-all；（“热干面”）

块级元素：从上往下流。每个另起一行。 块级元素高度是内部文档流元素高度总和决定的

脱离文档流：不在文档流中，所以高度不算在这里面。(就像一个小孩离家出走了。总体孩子还是有4个，但是做饭只需要做3个人的饭。 总高度=脱离后的高度+脱离元素的高度)

div高度，是由内部文档流元素的高度总和决定的。

position:fixed;  然后定位 top:0; left:0   （窗口定位）

文字的居中：基线  font-size 代表的是 最高和最低的差。就是b和g的上面和下面。  

建议行高  不同字体不同建议行高.

背景居中 background-position:centercenter;

 背景自适应 ：background-size:cover;

div居中。只要写了宽度（包括最大宽度和最小宽度） 就可以使用margin:auto; 就可以居中。

span 不接收宽高（因为span是内联元素）

绝对定位：脱离文档流，但是还是在定位。

1.在子元素上写  position: absolute;（相对于position: relative定位）

2.在父元素上写  position: relative;

如何做一个三角形:

border: 10px solid transparent;           width: 0px;

border-left-color: #e6686a;   border-top-width: 0px;

content-box（浏览器默认）：宽度和高度分别应用到元素的内容框，在宽@度和高度之外绘制padding和border.

border-box：为元素设定的宽度和高度决定了元素的边框盒，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。元素的宽度 = 内容的宽度

伪类：所有非空标签都有伪类。（选不中，复制不了）

如果要：：before ， 必须添加contant：‘’；才会显示

动画 @keyframe

内联元素要居中，要在父元素上加。

重要： box-sizing: border-box;

原本容不下的，padding、margin 等 这个就是把这些加到内容里面，算长度。

选择器    ：nth-child(even){XXX}： 选择偶数儿子。（可以做左右排列的内容的格式）

odd 是偶数

【css3中Flex布局。】

详情：https://www.cnblogs.com/xuyuntao/articles/6391728.html

也可以看阮一峰的flex布局。这算是填个坑。后期补。