!!每个元素都有默认样式，因为 HTML 发明的时候，还没有 CSS
文档流（普通流）
1，内联元素：从左到右依次排列，如果没有空间了，则自动换行
2，块级元素：从上到下依次排列，每个元素占一行
响应式
1，什么都不做就是响应式
2，图片的宽度默认是固定的，一般我们需要加 max-width: 100% 使图片自适应宽度
3，不要写死宽度
如何在html中引入css
1，内联样式
<p style="color: red;background-color: green;"></p>
设置p的颜色为红色，背景颜色为绿色。
2，内部样式
<style type="text/css">...</style>
表示这是样式表,在中间放入css内容；type是它的类型属性，text/css是它的值，它们是告诉浏览器这里面的文本内容(text)要当层叠样式表 (css)来解析，不能当作其它的来解析。
3，外部样式
<link rel="stylesheet" type="text/css" href="链接文件地址">
表示使用元素链接外部信息，rel指定了html文件与所链接文件之间的关系，链接到样式表所以用stylesheet。href是css文件地址。
4，以上方法都可以用 JS 搞出来
（这是我抄方方老师我还没学js我也不懂）
var style = document.createElement('style')
style.innerHTML = 'h2{color: green;}'
document.head.appendChild(style)
var link = document.createElement('link')
link.rel = 'stylesheet'
link.href = 'http://localhost:8888/style.css'
document.head.appendChild(link)
如何在html中引入另一个css
@import
@import详细内容
推荐自学教程： MDN CSS 中文教程
语法
CSS 的语法只有两种规则：
1，样式规则
/*注释*/
div.menu-bar li:hover > ul {
display: block; /*分号不能省*/
color: red /*最后一个分号可以省，但是建议不要省*/
}
2，at规则
- @charset, 定义样式表使用的字符集.
- @import, 告诉 CSS 引擎引入一个外部样式表.
- @media, 如果满足媒介查询的条件则条件规则组里的规则生效。
- @font-face, 描述将下载的外部的字体。
- @keyframes, 描述 CSS 动画的中间步骤 .
- @supports, 如果满足给定条件则条件规则组里的规则生效。
- @document, 如果文档样式表满足给定条件则条（CSS 4）
值（CSS 2.1）
1，整数和实数
如 「1」「.5」「0.3」
2，长度
相对单位 1em 1ex
绝对单位 1px 1in 1cm 1mm 1pt 1pc
CSS 3 相对单位： 100vh 100vw 1rem
vh:视口高度（等于100的时候是一样高）
vw:视口宽度（等于100的时候是一样宽）
rem:相对于根元素的影响
3，百分比
每个地方的百分比，意义都不一样，你需要查 MDN 才能知道其具体意义
例如 margin-left 和 margin-top
4，URL与URI
body { background: url("http://www.example.com/pinkish.png") } /*引号可选*/
5，计数器
p {counter-increment: par-num}
h1 {counter-reset: par-num}
p:before {content: counter(par-num, upper-roman) ". "}
6，颜色
h2 { color: olive }
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) } /*rgb*/
em { color: rgb(100%, 0%, 0%) } /*rgb的百分比*/
/*CSS 3 https://www.w3.org/TR/css3-color/*/
div { background: transparent; }/*透明*/
div { background: rgba(0,0,0,0.25); }/*最后一个表示透明程度的比例*/
div { background: hsl(0,0%,0%); }/*颜色色相.饱和度.亮度*/
div { background: hsla(0,0%,0%,0.25); }/*颜色色相，饱和度，亮度，透明比例*/
inherit(继承)
box-shadow:10px 5px 5px 1px black:(水平移动，上下移动，模糊程度，影子以边缘为基准的放大或缩小,阴影颜色)
7，字符串
8，不支持的值
选择器
1，越具体优先级越高
2，相同优先级，写在后面的优先级高
3，!important 最高
盒模型
1，border-box
width=contnet
2，content-box
width=content+padding+border
Normal Flow（正常的流程）
- 从左到右，从上到下
- inline 元素的宽高
- 宽度由内部的内联节点总宽度决定
- 高度由 line height 限定
- block 元素的宽高
- 高度有内部文档流中的元素的总高度决定
- 宽度默认自适应（不是 100%，是 auto）
- inline 和 block 没有涵盖所有情况，比如 table 和 flex
display
display CSS属性指定用于元素的呈现框的类型。在 HTML 中，默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表。在 XML中，其默认值为 inline。
常用值：
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 tbody）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 thead）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 tfoot）。
table-row 此元素会作为一个表格行显示（类似 tr）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 colgroup）。
table-column 此元素会作为一个单元格列显示（类似 col）
table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）
table-caption 此元素会作为一个表格标题显示（类似 caption）
inherit 规定应该从父元素继承 display 属性的值。
inline-block 的两个「bug」
你在使用 inline-block 元素的时候一定会遇到两个bug
1， 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
标准答案：将父元素的 font-size 设置为0，然后在 inline-block 元素中将 font-size 设置为 14px
实际工作：使用 block 或 float 或 flex，不要使用 inline-block
2 ，两个不同高度的 inline-block 元素无法对齐
还有一种现象就是 img 元素下面无缘无故多出几像素。
标准答案：改变 inline-block 元素的 vertical-align，一般改为 top 或 middle
实际工作：使用 float（用了浮动就要清除浮动） 或 flex，不要使用 inline-block
如果想搞清楚到底为什么会有这两个 bug，就看这篇文章：
深入理解 CSS：字体度量、line-height 和 vertical-align
看完之后，保证你更加搞不清楚。
因为这是字体设计相关的知识，不是 CSS 知识。
border&outline区别：
border:10px solid red;(影响原来位置)
outline:10px solid red;（不影响原来位置）
css学习法
1，CSS 没有为什么，你只能接受现实。
2，CSS 有些属性互相影响，组合起来极其复杂
3，CSS 有些属性很独立，跟其他属性一点关系都没有
！主要秉承「观察法」——即眼见为实。
自学学习大法：
1， Copy from MDN (复制MDN)
2， Run in JSBin（在jsbin应用）
3， Modify in Chrome Developer Tools（在chrome开发工具中修改）
！新手最好使用border大法（给每个元素加上border）
实践
常用的字体系列：
- Arial Black,Helvetica Bold
- Arial,Helvetica,sans-serif
- Verdana,Geneva,Arial,Helvetica,sans-serif
- Times New Roman,Times,serif
- Courier New,Courier,monospace
- Georgia,Times New Roman,Times,serif
- Zapf-Chancery,cursive
- Western,fantasy
字体尺寸：
可以使用关联的描述来庙宇相对尺寸：(xx-small)超超小号，(x-small)超小号,(small)小号,(mdeium)中号,(large)大号,(x-large)加大号,(xx-large)加加大号
负的外边距（margin）可以让ul变宽一点同时不影响占位
浮动可以让两个块级元素处于同一行，但浮动之后记得清除浮动，
清除浮动用：clear fix：让一个元素包住它里面的浮动元素
方框变成圆：border-radius:50%;
浮动的特现：文字会环绕图片周围，浮动脱离了文档流。
clear:left向左看不能看到浮动的元素
clear:both两边都不能看到浮动的元素
clear:right右边看不能看到浮动的元素
一般各种属性：
background-color:背景颜色
border:边框
border-bottom:边框的下边框
font-family:字体
font-weight:字体粗细
font-style:斜体文本
font-size:字体大小
background-image:背景图片
line-height：行间距
padding：内边距
letter-spacing:在字母之间设置间距
text-align:对齐方式
top:控制元素顶部的位置
left:指定元素的左边所在位置
list-style:改变列表项外观
