发表于： 2018-07-10 22:31:03
2 630
前言：
这两天把基础知识过了一遍（主要是修真院里面自带的资料，自己也查了好多），了解了挺多知识的，感觉自己会了，可是今天发现一上手就卡壳了，不知道怎么去弄，虽然看到网上有一样的项目过程，可是就想自己弄出来。万事开头难，相信一如既往的坚持肯定会有所成果的。
掌握的：
1.after后清除浮动元素
像这样写：
.wrapper:after {
content: '';
display: block;
clear: both;}2.定位方式
静态定位：
静态定位（static）实际上是不存在的。静态定位就是元素的默认显示模式。例如：块级元素独自占一行，行内元素一行可以放多个。
我们也可以这么认为：标准流中里的元素默认就是携带静态定位。
position: static;
相对定位：
相对定位是自恋型的，它是相对于自己进行定位。
position:relative;
可以使用定位坐标：
top: 距离自己上边的距离（垂直）
bottom: 距离自己下边的距离（垂直）
left: 距离自己左边的距离（水平）
right: 距离自己右边的距离（水平）
top、bottom、left、right都可以为负值，还可以为百分比（及其少用）。
如果top、bottom、left、right为正值，就是对应的边往盒子里面走；如果取负值，就是对应的边往盒子外面走。
相对定位是占位脱离标准流的：虽然盒子会随着定为坐标移动到其它位置，但是原来的位置还占着。
绝对定位：
绝对定位是绝对没有错的。
语法格式：
position:absolute; absolute 表示“绝对的”
需要配合定位坐标来使用：
top 这四个定位坐标都是相对于定位元素
bottom
left
right
如果绝对定位的元素，祖先均无定位
如果绝对定位的元素，祖先均无定位，那么它的定位坐标是相对于第一屏的。
如果绝对定位的元素，祖先有定位
如果绝对定位的元素，祖先有定位，那么该盒子会相对于它的最近的具有定位的祖先进行绝对定位。
我们通常使用绝对定位的原则：子绝父相（子级绝对定位，父级相对定位，那么该盒子就会相对于它的父级进行绝对定位）。
top、bottom、left、right可以取正值，也可以取负值，正负值的定位方式和position:relative一样。
固定定位：
固定定位相对于网页的窗口进行定位的。
语法格式：
position:fixed;
fix 固定 -> fixed
left top right bottom这四个定位坐标都是相对于网页窗口的值。
在IE6、IE7等低版本浏览器不兼容。
3.绝对定位和相对定位区别
写了篇博客好好理解了一下，附上链接地址https://blog.csdn.net/nishiwodebocai21/article/details/80989092
4.选择器中‘>’和‘ ’的区别
‘>’可以把它想成直接的小孩(direct descendant/child)，而平常比较容易看到的空格（space）则是所有小孩的意思。
具体的情况可以参考 https://css-tricks.com/child-and-sibling-selectors/5.
5.各大浏览器所支持的选择器内容
https://www.quirksmode.org/css/selectors/
6.css权重问题
权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.。
详细了解: http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
7.伪类和伪元素
伪类：
a:link 超链接的默认状态
a:visited 超链接访问过之后的样式
a:hover 鼠标在超链接上停留的时候
a:active 鼠标点击的时候
伪元素：
:first-line 伪元素用于向文本的首行设置特殊样式("first-line" 伪元素只能用于块级元素。)
:first-letter 伪元素用于向文本的首字母设置特殊样式, ("first-letter" 伪元素只能用于块级元素。)
:before 伪元素可以在元素的内容前面插入新内容
:after 伪元素可以在元素的内容之后插入新内容
盒子总宽高：
盒子所占空间的宽度 = 盒子内容的宽度（width） + 左右padding + 左右border + 左右margin
盒子所占空间的高度 = 盒子内容的高度（height） + 上下padding + 上下border + 上下margin
总结：今天在师兄的帮助下顺利完成了九宫格的制作，附带多了解了下谷歌浏览器控制台的使用。对css理解的更多了一点。也懂得到了写日报的重要性。
明天完成：
1.提交任务一九宫格的代码，做深度思考。学习下师兄的代码，感觉比自己的要简洁很多
2.完成任务二。
3，预习下任务三
返回列表
::after使用双冒号是推荐的伪元素定位方式。