今天学到的知识点

2018.7.8

1.几种盒子垂直居中的办法，

1：定位

*{margin:0;padding: 0;}

.container {height: 30rem;width: 30rem;background: black;position: relative;}

.content {height: 15rem;width:20rem;background: #FFF;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);}

2:margin

*{margin:0;padding: 0;}

.container {height: 30rem;width: 30rem;background: black;position: relative;}

.content {height: 15rem;width:20rem;background: #FFF;position: absolute;top:0;left:0;right:0;bottom:0;margin: auto;}

3:flex

*{margin:0;padding: 0;}

.container {height: 30rem;width: 30rem;background: black;display: flex;justify-content: center;align-items: center;}

.content {height: 15rem;width:20rem;background: #FFF;}

4:padding

*{margin:0;padding: 0;}

.container {padding:7.5rem 0;width: 30rem;background: black;}

.content {height: 15rem;width:20rem;background: #FFF;margin: 0 auto;}

2.几种文本居中的方法

1.

*{margin:0;padding: 0;}

.container {margin:10%;height:15rem;width: 30rem;border:1px solid black;background: #fff;line-height: 15rem;text-align: center;}

2.

按钮选中的状态改变

.btn-r:focus{

    position: relative;

    box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.2);

    outline: 0;

}

今天完成的事情：完成了任务12，部署了naginx，在手机上访问，以前安装了一直没用，
明天计划的事情：明天任务13 拆分样式表不是很理解，目前理解为把常用的样式单独列出来，引用的时候作为附加品添加上去，可以用sass的混合器来编写。

遇到的问题：

任务12的下拉框和下拉框里的文字无法居中，看到有一种方法是把下拉框隐藏，用span覆盖，感觉不理想，没试

收获：父元素下的第一个元素改变（

父元素> :first-child

），挺好用的，少写了个选择器，重温了以前的任务，现在完成比较简单了。