发表于： 2018-11-24 23:13:26
1 930
今天完成的事：
1.继续进行任务八的页面布局，第一个页面基本框架差不多快搭建完成了，
2.使用栅格系统进行页面布局。
任务过程中学到的知识：
1.Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
2.通过文本对齐类，可以简单方便的将文字重新对齐：
<p class="text-left">Left aligned text.</p> 左对齐
<p class="text-center">Center aligned text.</p> 中间对齐
<p class="text-right">Right aligned text.</p> 右对齐
<p class="text-justify">Justified text.</p> 默认左对齐
3.在boorstrap布局中，栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
但是对于一些情况，在一行里的元素无法等分成12列的时候，就需要自己手动进行设置每一列的宽度，例如：一般情况下，一行12列，默认一行宽度100%时候，一列的跨度大概就是8.33%左右。
但是如果一行要求分成10列的话，那么栅格系统中的列是通过指定1到12的值来表示其跨越的范围就不适用了 这时就要手动进行设置每一列的宽度 ，将100%等分成10列 没列宽度10%；然后在使用媒体查询进行从新的布局，
定义每列跨度占一行 （100%）的10%：
.col-md-1 {
width：10% ！ important;
}
重新插入媒体查询：
@media screen and (max-width:992px){
.col-md-1 {
width: 100% !important;
}
}
4.什么是外边距重叠？重叠的结果是什么
外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外边距的重叠只产生在普通流的垂直相邻边界间。
如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。
当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加
5.外边距重叠的意义？
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。
外边距重叠解决方法：
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
明天计划的事：继续任务八的页面布局，在任务中加深对bootstrap栅格系统的理解。
遇到的问题：div盒子模型太多了，任务中思路比较混乱。
收获：对于栅格系统已经能够在任务中运用了 ，虽然还不太灵活。
返回列表
评论