2021-01-22

第69集
定位：定位是一种更加高级的布局手段。通过定位可以将元素摆放到页面中任意位置。
static:默认值，元素是静止的没有开启定位
relative：开启元素的相对定位
absolute开启元素的绝对定位
fixed开启元素的固定定位
sticky开启元素的粘滞定位
相对定位：就是把元素设置为relative，相对定位，如果不设置偏移量，元素不会发生任何变化。
top:定位元素和定位位置上边的距离
bottom
定位元素和定位下面的元素叫做bottom
定位垂直元素是由top和bottom来决定，通常只会使用一个。通常top越大越会往下移动。
left：定位元素左侧距离
right定位元素距离右侧距离
定位元素水平方向的元素通常只会设置一个。
left越大元素越往右，right越大元素越往左。
position：relative；开启定位
left：200px；
top：200px；
相对定位是参照元素在文档流中的位置。
相对定位会提升元素层级。（但是没有脱离文档流）
相对元素不会改变元素性值（块还是块，行内还是行内）
第70集
绝对定位
当元素的position属性值设置为absolute的时候，就是开启了元素的绝对定位。
1.开启绝对定位，如果不写偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会丛文档流中脱离。
3绝对定位会改变元素性值。行内变成块，块的宽度被撑开
4.绝对定位会让元素提高元素的层级。
5.绝对定位是相对于其包含块来定位的。
包含块：正常情况下，包含块是离的最近的祖先元素。只要定位不是stactic就是开启了定位。。如果所有祖先元素都没开启，那么相对于html（根元素，初始包含块）
第71集
固定定位
将posistion设置为fixed就是开启了固定定位。固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样。
不同的是永远参照浏览器的视口来进行定位的。（小广告）
第72集
粘滞定位
新出的，支持度不太好。
元素开始时移动的但是移动到一定位置就不变了。
position：sticky；
粘滞定位和相对定位差不多，但是到了某个位置可以让他行对不动。
top：10px也是相对于父元素块。
第73集
当我们开启绝地定位之后
原来的，margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素宽度
开启绝对定位之后，就是left=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
=父元素宽度.
当我们开启了绝对定位后，就需要添加left和right两个值。当发生过度约束的时候，则自动调整right之前是margin-right。如果有auto那么就调整auto。可以设置auto的值有margin wodth left和right。 因为left和right默认值是auto。所以如果left和right不满足会自动调整这两个值。
垂直方向的布局
之前是垂直方向不要求你绝对满足，现在垂直方向的布局必须完全满足。
top+margin-top/bottom+padding-top/bottom+height=包含块的高度
那么这样必须满足了。
第74集

元素的层级。对于开启了定位元素，可以通过设置z-index属性来指定怨怒的层级。z-index需要一个整数作为参数，参数越大元素的层级别越高，元素的层级会优先显示，z-index是相当于z轴。z越大，那么就越靠近我们的距离。
如果元素的层级一样，那么有线显示下面的元素。
定位层级是一样的，不存在那个不一样的
祖先元素层级再高，也不会盖住后代元素。
第75集
京东的练习
第76集
font和background
color用来设置
font-size字体发小
font-family字体族（字体的格式）
font-family：“微软雅黑”；
可选值serif 衬线字体 ，字体不好好写，老是有勾
sans-serif 非衬线字体 干净整洁
monospace 等款字体 就是字母余字母宽度一样。编写程序用的等宽字体比较多。
cursive草书
这些是大的字体分类。衬线字体下面有很多别的字体。就是浏览器下面的某个字体。就是浏览器自己决定。
font-family同时指定多个字体。第一个无法使用指定第二个。
font-face可以将服务器中的字体直接提供给用户使用
@fongt-face{
font-family：“”；
src：url（） format（“truetype”）；再服务器下面的路径。
}
可能会有加载速度问题。加载比较慢会影响。还会有版权问题。
format（“truetype”）不是必要的。
第77集
字体一般不会失真，适量图，可以随便切换颜色，比较小，当我们使用比较小的图片之后。单色的直接把小图表设置成字体。图标字体。
iconfont

暂时不打算继续看css可之后可能就是 看牛客的补充把，css大体已经明白了一些，感觉再看有点浪费时间。