发表于： 2018-07-26 21:21:34
3 517
前言：
最近进度有点慢，日报也不能即时更新，有点内疚，希望以后可以慢慢适应。任务四说实话的一开始对我来讲有点困难，布局啥的有点摸不着头脑，不过在摸索中开窍了一些许。
掌握的内容：
1.学会了使用rem作为单位标签。一开始只是用rem来作为字体大小的单位，主要是用来替换px，其他的是用vh和vw来作为宽 高单位的，可是总是觉得有些许别扭，因为vh和vw是相当于视口的，也就是说1vh=1%viewport，可是viewport不确定大 小，只能靠感觉来。其实设计图纸我尝试过，字体大小和输入框啥的宽高根本就不适合，后来师兄告诉我说：原型图是固定 的，但是我们做的宽度属于100%的。所以呈现的效果也是不一样的。
2.学会了导航栏部分用行内元素布局比块级元素方便。
首先我们来了解下行内元素和块级元素有哪些区别：
行内元素（a span iframe）一般都是基于语义级的基本元素，只能容纳文本或其他内联元素。块级元素默认占了一行高度， 一行内添加一个块级元素后一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显 示。块级元素一般可嵌套块级元素或行内元素。块级元素一般作为容器出现，用来组织结构。
block（块）元素的特点:
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
inline元素的特点:
①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下:
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
3.学会了如何用div+css进行界面的布局。
div相当于一个盒子，可以往盒子加我们需要的东西。比如我们要设计输入框的样式的时候，里面有图片又有input输入框，就可以把他们放在一起。同属于行内元素的他们会在一行显示，之后再用css进行修饰就可以了。
4.学会了button按钮的默认样式修改。
默认的button按钮丑的一匹，用css可以进行默认样式的修改。一般的话会修改按钮的宽高，背景色，字体颜色，以及去除默认的border，以及包含在border内部的outline。范例如下：
button {
width: 100%; /*保证按钮全屏显示*/
height: 5rem;
background-color: #5ac0ce;
color: #fff;
font-size: 2.1rem;
border: none;
outline: none; /*去除边框内部默认的突出元素的线*/
}
5.学会了width：100%和width：auto；的区别
举个栗子详细说明一下：
<!DOCTYPE html>
<html>
<head>
<title>width：100%和width：auto区别</title>
<style type="text/css">
div{
width:600px;
overflow:auto;
}
p{
background-color: red;
}
p.p1{
width:100%;
padding:10px;
}
p.p2{
width:auto;
padding:10px;
}
</style>
</head>
<body>
<div>
<p class="p1">1</p>
</div>
<div>
<p class="p2">1</p>
</div></body>
</html>
效果如下：
通过效果可以看出width：100%；出现了横向的滚动条，而width：auto；却没有，所以我们知道width：100%；是在父级600px的基础上又加上了自己的padding，所以出现了滚动条。而width:auto则比较聪明，它是总体宽度（广义，包括width，margin,padding,border这些）等于父级宽度（狭义，内容区，仅指width），所以如果padding已经左右占去20px的空间，那么width给的值就是580px。
但无论是width:100%还是auto，其计算的参照都是父级内容区width值，而非总宽度值。
6.学会了导航栏布局方式
一开始导航栏的“登录”一直不能居中对齐，后来用了text-align:center；神奇的居中对齐了，后来分析了一下，应该是这样的，左右已经浮动脱离了文档流，所以整个框相当于只有“登录”一个元素在用，所以只要text-align：center；即可。另外要让行内文字上下居中可以先给块级元素一个高度，再让line-height=height即可垂直对齐。
7.学会了浮动清除的原理。
/*清除浮动*/
.clearfloat::after {
content: '';
display: block;
clear: both;
其实和在浮动元素的后面再加一个块级元素，然后浮动清除一样的道理。
遇到的问题：
1.导航栏布局总是不能很好地在一行上。一开始是使用的<p>标签进行包裹，后面发现总不能在一行上显示。
解决办法：把块级元素<p>换成行内元素<span>即可。
2.不知道input标签默认样式怎么修改。
解决办法：上面已经给出。
收获：知道了input默认标签修改，知道rem的用法，比较深刻的理解了响应式的布局效果。
明天计划的事：
开始任务五
返回列表
评论