BASE
就粗糙记录一下，不熟悉的，需要注意的，东西。
css 的学习 还是 需要懂一些很经典的布局~~~
虽然有很多框架帮你做了，你要微调呢，还是尽量更能驾驭一些吧。
- 浮动 因为 默认的div 出来是 竖着 码 ，float ： left 就从左开始横着码 ，float ： right 也一样。
- 外边距 margin 就是元素与元素之间的距离。
margin ： 上 右 下 左
margin ：上 左右 下
margin ：上下 左右
- 内边距 padding 还听过一个说法啊 ，也不知道 有没有道理 。说什么能padding 解决的，不要margin 解决。
三种写法与上面的margin相同。另 padding ： 上下左右 margin也相同。
注意：margin 不会使 元素的大小改变，但是padding会改变原来元素本身的大小。
- 块状元素 与 行内元素
块状元素：div 最基本的块状元素
1.支持宽高 margin、padding
2.width 默认是100% ,独占一行
行内元素：span 最基本的行内元素
1.宽高会随着内容变化而变化
2.支持margin、padding
3.不独占一行
块状元素可以随意嵌套
行内元素 只可以嵌套行内元素
- border - 边框
- background
background-position
背景坐标
放两个参数 第二个参数默认是center
第一个参数是x轴
第二个参数是y轴
支持 right/bottom/left/top/center的写法
字体
- font
font-family:"字体1","字体2","字体3","字体4","字体5","字体6"
没有字体1，就会去找字体2，以此类推。。。
- line-height 这我认为很重要
设定自己在内部的高度位置
当line-height的大小为元素的大小时，便会在元素的中间
这个东西可以控制 行内元素 ~
就是如果中间是div 块状元素 就会失效了！！！
百分比，数字是支持的，不过百分比是继承父级的。
- font-style 文字的斜体如何使用
italic => 是使用的字体的斜体
oblique => 是让字体倾斜
- font-variant (忽略吧没什么用)
- font 属性 简写( 红框部分 )
定位 灰常 灰常 灰常 重要！！！！！！
定位啊 布局啊 b站 有大量经典布局 视频 可以参照一下 传送门
- position
相对定位 （left，right， top，bottom z-index （谁能盖住谁的属性）z轴，相当于Excel里面那什么置于最上层等那种感觉，这个之前遇见过的实际项目的应用：比如就是弹出子窗口时候，给母窗口加个蒙版什么的，子窗口的z-index 大于 蒙版的 z-index 大于 母窗口的）(z轴 支持 负数)
相对定位不会影响原来的位置，显示的元素会变位置。。。。。。
- 绝对定位
脱离标准流
绝对定位 原来的位置不会留着
绝对定位是根据有定位的父节点，去定位。
但如果父节点没有定位，是父节点没有定位，不是没有父节点，注意一下，
那么就会一直找到最外层的节点，直到body节点。
- 窗口定位
<!DOCTYPE html>
<html>
<head>
<title>01 PAGE</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
#div1{
margin-top: 300px;
margin-left: 300px;
background-color: rosybrown;
height: 160px;
width: 160px;
position: relative;
float: left;
}
#div2{
margin-top: 30px;
margin-left: 30px;
background-color:saddlebrown;
height: 60px;
width: 60px;
position:absolute;
}
#div3{
margin-top: 0px;
margin-left: 0px;
background-color:seagreen;
height: 160px;
width: 160px;
position: fixed;
}
</style>
<script type="text/javascript">
</script>
</head>
<body style="height: 2000px;">
<div id="div3"></div>
<div id="div1">
<div id="div2"></div>
</div>
<!-- <div id="div3"></div> -->
</body>
</html>当窗口出现滚动的时候，他div會移动， 但窗口定位的元素，并不会移动~~~
这个东西呢，以前项目里遇见过这个实际应用，就是
这种 需要 窗口怎么 滚动 ，也还预留出来一个可以弹出用来修改检索商品 条件的 子窗口的按钮。
一直可以定位在画面某个位置。
课程老师举例说的是，那种广告，在画面某处一直会处于悬浮状态的某条广告。。。。。。
- 父级定位： 父级是什么定位，自己就是什么定位。
inherit 嵌套在某个div中的子div，如果使用了inherit这中定位方式，那么他的父级div的定位是什么方式，他就是什么方式。
eg：父是窗口，不随着滚动，他就也是窗口，不会滚动。
父是绝对，会跟着滚走，他就也是绝对，会跟着滚走。
如果父级也是inherit，那么就需要再看父级。
- 默认值 是没有定位 static
display
float 可以 把行内元素变成块状元素！！！~~~
另 display：block 也可以把行内元素编程块状元素。
变块状元素就是，你设置的行宽，行高的将会有效果。
- 行内块 不明觉厉哈 又能行内 又能块状哈 全干工程师哈
- 所以 有没有 既可以横着摆，有支持宽高。
- 红绿是div 有宽高，但不能横着放
- 黄灰是span行内元素，能横着放，但不支持宽高 （下图是加上inline-block后的效果，没加的时候是不支持宽高的）
- 于是 inline-block 横空出世 ，既能横着放 又能 支持宽高。
初识元素百分比单位
再啰嗦一句：块状元素 默认啊 width 默认是百分之百所以才会独占一行，但是高度默认是0，于是不设置的时候，你都看不见他。比如这个时候你在body下，直接写了一个div，还把他的高度设置成了百分之50什么的，你就看不见他，但是如果这时候，你把html，body的高度设置成100%，就能看到你刚才那个50%的div了。这点一定要注意一下。
以上
