发表于： 2018-09-19 20:21:58
1 372
今天完成的事情：
任务五
任务六的一部分
.this{
width: 202px;
padding: 15px;
border: 2px solid #5fc0cd;
border-radius: 15px;
text-align: center;
color: #5fc0cd;
font-size: 20px;
background-color: #ffffff;
}
.phone{
width: 206px;
padding: 15px;
background: #5fc0cd;
border-radius: 15px;
text-align: center;
color: aliceblue;
font-size: 20px;
}
.from{
width: 80px;
border: 25px solid #fff;
}明天计划的事情：继续任务六
遇到的问题：遇到底部遮挡其他元素的问题，听从了师兄的建议在百度上面找的了答案
收获：对于盒子模型和FLEX的运用又更进一步，套用师兄的话FLEX大法好啊！
任务四总结：
任务越做越考验基础，这可着实让我自己坑了自己，一开始想着看啥看，边做边做边学呗，可没想到越复杂月考验对基础的理解。其实任务四一眼看到的时候，觉得还是蛮简单的应该会很容易上手，当然我不出意料的卡在那里几个小时想不出办法，最后自己实在想不出办法请教了师兄，然后知道自己该在那里找资料，成功的解决了问题完成了任务。
深度思考：
1.position定位有哪几种？各有什么特点
POSITION是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。
正如position is everything.
position属性值:
position的属性值共有四个常用的：static、relative、absolute、fixed。
还有三个不常用的：inherit、initial、sticky
流中
Relative(相对）:相对定位。
特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的
位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
Absolute(绝对)：绝对定位
特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不
为static)，否则为html文档本身。
fixed(固定)：固定定位。
特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置
2.哪些css属性可以设置百分比，其计算原则是什么？
可以使用百分比的样式属性
定位属性：top, right, bottom, left;
盒模型属性：height, width, margin, padding;
背景属性：background-position;
文本属性：text-indent, line-height, vertical-align;
字体属性：font-size;
3.常见的表单元素有哪些？各有什么属性？
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
常用表单元素
form:定义供用户输入的表单。
fieldset:定义域。即输入区加有文字的边框。
legend：定义域的标题，即边框上的文字。
label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
input:定义输入域，常用。可设置type属性，从而具有不同功能。
textarea:定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
button:定义一个按钮。
select:定义一个选择列表，即下拉列表。
option:定义下拉列表中的选项。
4.如何理解HTML结构的语义化？
首先，语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。
怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。
其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如h标签，在HTML中就是就是用来定义标题，还有p标签，英文是paragraph段落，table表格标签,等等。
5.使用fixed的时候，在手机上查看是否会有问题，怎么解决？
移动端业务开发，iOS下经常会有fixed元素和输入框(input元素)同时存在的情况。但是fixed元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。
软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。
这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。
任务五总结：
这次好多了，不再像前几个任务一样，看见以后一脸的蒙蔽不知道该怎么下手，慢慢的开始有点构思了，开始会看着UI图先看一会，过程中会思考这个地方应该怎么布局应该用什么元素，又或者应该怎么样排列，比如用FLEX应该怎么用才能达到效果，不得不过这个FLEX的确是好用，没有盒子模型和FLEX解决不了的问题。
深度思考：
1.css可以绘制哪些常见的特殊形状？
在css绘制图形时，一般要使用到border-radius,transform（旋转:rotate,缩放:scale,倾斜:skew,移动:translate)等属性来实现
border-radius的值可以设定为具体的长度或者是百分比。当border-radius的值为百分比时，相对的是包含边框，padding后的尺寸。而不是单纯地相对于width/height值。
旋转 rotate
用法：transform: rotate(45deg);
共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
缩放 scale
用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数；
一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
倾斜 skew
用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度，单位deg
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
移动 translate
用法：transform: translate(45px) 或者 transform: translate(45px, 150px);
参数表示移动距离
圆形/椭圆形、三角形/梯形、平行四边形
2.如何理解vertical-align与line-height？
line-height基本概念定义：行高是指文本行基线baseline之间的垂直距离
line-height属性可赋值
设置固定长度(px,rem等固定单位)
设置数字:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
设置百分比:基于当前字体尺寸的百分比行距
注意：数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承
定义：使行内元素的基线相对于该元素所在行的基线的垂直对齐
默认值baseline:元素基线与父元素基线对齐
众所周知，vertical-align支持很多属性值；(关键字值:vertical-align等等: middle;长度值：vertical-align: 4px等等；百分比值：vertical-align: 10%...等等)
注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。
3.请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 项目默认沿主轴排列。
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。默认情况下，项目都排在一条线（又称”轴线”）上。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是以上三个的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
4.title与h1、b与strong、i与em、img的alt与title、src与href有什么区别？
定义：title是网站标题，h1是文章主题
作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的
b与strong,i与em的区别:
但从视觉上效果观看b与strong、i与em是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签
建议：为了符合CSS3的规范，b应尽量少用而改用strong ,i应尽量少用而改用em
img中的alt与title属性区别:
alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方
title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover
src与href的区别:
href，.是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。
src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用
5.如何使用IconFont？
首先在Iconfont上面找到你需要的图标然后加入你的购物车（这一步很简单，就像逛淘宝一样！）
然后就是点击一下购物车，它会出现‘下载代码’的按钮，点击下载保存到本地。
接着就是把下载好的文件解压出来，放到项目的css文件夹（方便之后在html中引用）。
文件放到项目后，只需要引用iconfont.css这个文件即可。
最后一步肯定是调用了。
6.HTML中dl、ul、ol用哪个比较好？
ul是无序列表，也就是说没有排列限制可以随意加li；
<ul>
<li>可以随意放置</li>
<li>可以随意放置</li>
<li>可以随意放置</li>
</ul>
.可以随意放置
.可以随意放置
.可以随意放置
2.ol就序列表，会按照你写的li前后依次排列；
<ol>
<li>我是第一</li>
<li>我是第二</li>
<li>我是第三</li>
</ol>
1.我是第一
2.我是第二
3.我是第三
3.dl是定义列表，会默认前后层级关系；
<dl>
<dt>我是头</dt>
<dd>我是内容</dd>
<dd>我是内容</dd>
</dl>
我是头
--我是内容
--我是内容
返回列表
评论