发表于： 2017-04-13 23:07:57
2 613
昨晚花了4个小时修改的代码还是没能通过审核，320px的分辨率下惨不忍睹，我试过用chrome F12看了效果，我这边显示的并没有师兄显示的那么糟，不知道是什么原因。不过既然有问题，那就得修改，突然想到以后改bug的生活会不会就是这样？不过我打算用bootstrap重新写一次，我终于知道那么多程序员为什么想造轮子了，因为再用的时候方便啊，不像纯css改样式，没有耐心真的不行。所以今天的主要事情就是学习bootstrap，其他的先不管了，慢慢来嘛。
----------------------------------------分界线----------------------------------------
今天完成的事情：
1.学习了如何用css实现垂直居中（师兄推荐的资料，任务也明确要求掌握），看了下资料，个人觉得分为两大类：
- a.使用display属性。
b.使用position属性。
先用html建立一个demo，然后根据不同的css样式来实现，html代码如下：
<body>
<div class="test">
<span>我是测试文字</span>
</div>
</body>
使用display属性的有如下几种：
（1）display：table-cell
css样式：
.test {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 2rem;
color: white;
background: #83ffdb;
width: 400px;
height: 400px;
}
效果：
这里要说明的是，我采用该种方法后的确能够垂直居中，但是对于div元素却无法进行水平居中，也就是说margin: 0 auto 对display:table-cell的div元素无效。我查询了下table-cell的意思是此元素将会以表格单元格的形式显示，类似于<td>、<th>。因此我们对于其设置margin是无效的，这个在我们布局的使用过程中会产生一定的影响。
（2）display:flex
据说flex布局现在已经不吃香了，据说flsh在ios上根本不被支持。
（3）display:inline-block
css样式：
.test {
text-align: center;
margin: 0 auto;
width: 400px;
height: 400px;
background: #83ffdb;
color: white;
}
.test span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.test:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
这个说白了就是通过添加一个伪类元素来进行占位，然后利用inline-block的特性使用middle来进行垂直居中，亲测有效，而且不会影响水平居中等布局。
（4）display:-webkit-box
这个我亲自测试有效，添加了一个空的div进去，然后采用float并进行清除，具体链接地址：http://www.cnblogs.com/hutuzhu/p/4450850.html
（5）position:absolute和负边距
css样式：
.test {
position: relative;
background: #83ffdb;
width: 400px;
height: 400px;
color: white;
margin: 0 auto;
}
.test span {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-left: -100px;
margin-top: -50px;
text-align: center;
}
经过测试有效，但是局限性在于必须知道子元素的width和height，不然无法通过设置margin的具体负数值，因为最终设置的负数值是子元素宽高度的50%。
同样的情况还有采用translate，这个属性值是定义的转换，也就是位移，可以沿X轴和Y轴进行位移。
以上两种采用绝对定位的方法我其实觉得很麻烦，如果已知子元素的高度，我其实可以直接用position来进行定位，直接居中嘛，只不过是需要算一下top和left的数值而已，比如上面直接就top:150px;left:100px搞定，加入一个负边距只不过是为了好理解而已。其实很多时候我们为了高度自适应并不会去设置子元素的高度，而是用padding去撑开，所以目前我觉得最好用的还是采用after:来进行垂直居中。当然，如果父元素宽度为100%，不需要用margin去调整的时候，第一种table-cell还是比较好的，因为最简单。
ps：刚刚查询了其他网站的方法，都是差不多的，其中有一个网站把sbsolute和translate相结合，可以在父元素和子元素高度都不确定的情况下使用，代码如下：
.test {
position:relative;
}
.test span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
2.学习了bootstrap的部分知识，包括栅格、按钮、表单、下拉菜单等等，的确比较实用，应用对应的class之后只需要稍微做下样式调整就可以了。
明天计划的事情：
1.继续学习bootstrap，争取把常用的几个组件过一遍，然后开始重写任务6。
2.学习一下媒体查询的知识，@media虽然有在用，但是具体的并不是很了解。
遇到的问题：
bootstrap的网格系统看的有点懵逼，不是不会用，是对它的col我们该如何选择xs sm md lg？
收获：
1.对于网上看的一些小知识点，如果我们看了不是太理解，可以直接建立一个小demo，然后去测试是否有效，如果对于垂直居中我今天不测试，只是看了一遍，我永远不知道table-cell是无法使用margin的，而且测试过之后我们才知道在哪些情况下该使用哪种方式，也知道哪些方式比较复杂，哪些具有局限性等等，这可能是我今天最大的收获，所有网络上哪些解决问题的方法我们不仅仅只是抄来代码就用，而是要去测试，去知道原理，这样才能加深理解和印象吧，可能一天就啃一个知识点，但是摸透了就是值得的。
2.知道了bootstrap的一些基本样式。
返回列表
评论