发表于： 2018-06-06 22:54:10
1 582
今日完成：任务八职位页基本完成
明日计划：任务八首页友情链接部分重写 微调任务八三个页面的字体大小 把链接加上
今日遇到的问题：
1.
友情链接处用flex布局，布局会在屏幕小时出现问题 。要用 媒体查询重写。
2.
三条红色的线 还是没有实现 再想一下办法实现
其他时间在写基本布局，基本没遇到问题。
今日收获：
1.今天 看了下HTML实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
想要正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。写实体可以在HTML中写实体名称或者实体编号。
常用的字符实体如下:
实体名称 或者 实体编号。
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
2.学习css可继承属性
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse
-出自 李留白
3.学习水平垂直居中常用方法
(1)text-align和line-height的方式更适合单排文字
(2)通过定位和margin为负值进行偏移的方法让元素在垂直方向上居中。这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作。但是这里有一个问题，就是我们的需求往往是内部的这个元素的宽度高度也不确定，比如是一段文字，你无法保证这段文字的字数多少，所以通过margin为负值来偏移在这种情况下行不通。
(3)position:fixed、0和margin:auto
<style>
.container {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
</style>
<div class="container" style="width: 300px; height: 200px; background: #f1f1f1">
this is a box fixed in center of screen
</div>
这里面最重要的是margin: auto;，对于块级元素而言，确定了自己的宽度之后，margin:auto可以帮助它居中，即使在position:fixed时。不过必须规定要居中的元素的宽高度，无法满足我们的需求。
(4)display:table和vertical-align:middle
<style>
.container {
display: table;
}
.inner {
display: table-cell;
vertical-align:middle;
text-align:center;
}
</style>
<div class="container">
<div class="inner">
you own content
</div>
</div>
这种情况下，我们可以通过随意改变.inner的宽高，当内部的内容仍然保持居中状态。
(5)position:absolute、50%和translate
在css3里面提供了translate函数，它的主要作用是位移，传给transform属性。
<style>
.container {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<div class="inner">
your own content
</div>
</div>
translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%。这种方法其实和最上面的margin负值用法一样，可以说是margin负值的替代方案。这样就非常容易理解了。这个方法最厉害的地方是不需要确定.inner的宽高，而.container的宽高也不需要手动设置，如果它自己本身就被撑大的话。这里只是为了演示方便，才特意给它设置了宽高。
(6)css3 display:flex
css3新增了布局相关的属性，其中flex布局可以非常简单地帮我们实现我们想要的效果。
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="container">
<div class="inner">
this is a box fixed in center of screen<br>The second line
</div>
</div>
当display: flex时，表示该容器内部的元素将按照flex进行布局。align-items: center表示这些元素将相对于本容器水平居中，justify-content: center也是同样的道理垂直居中。对.container赋予了这些样式之后，作为它的内部元素.inner自己自觉的居中了。而且这里你会发现，由于没有使用text-align: center，.inner里面的文字是不会居中的，也就是说仅仅.inner这个容器居中而已。
(7)vw vh和translate
vh和vw是两个比较偏的单位，是指“viewport的height和width的1%”，比如说50vh就是当前视口（窗口的高度，实验中包含了滚动条）高度的50%。也就是说1vw将等于和1%的window宽度差不多的值。因此用在fixed的时候更加适合。vh vw只能从窗口的大小去考虑，不适合正常的文本流。不过有的时候可以非常有用，特别是在做全屏应用的时候，比如full page。
学习于 https://segmentfault.com/a/1190000008395216 博主唐霜
进度：CSS-任务8.9
开始时间：2018.06.04
结束时间：2018.06.08
有无延期风险： 无。
禅道：http://task.jnshu.com/zentao/my/
返回列表
评论