发表于： 2019-04-22 18:59:37
1 939
task4总结
脑图：
耗时：1天
总结：做任务4的时候更熟练的运用了ps的切图 了解了浮动 了解了relative,absoult fixed分别对应的是
相对定位和绝对定位还有固定定位
relative：生成相对定位的元素，相对于其正常位置进行定位。
元素的位置通过left、right、top、button属性进行规定，
可以通过z-index进行层次分级。
元素元素仍保持其未定位前的形状，原本所占的空间仍将保留。
如果没有定位偏移量，对元素本身没有任何影响
absolute：生成绝对定位元素。使元素脱离文档流，并相对于其包含块进行定位，包含块可能是文档中的另一个元素或者是初始包含块，
元素原先在正常文档流中所占的空间会会被后面元素占据；
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；
绝对定位元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。只要父级元素设置了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。如果都没有定义，那么就相对于整个文档body定位（注意不是相对于浏览器窗口定位）
相对定位一般都是配合绝对定位元素使用
fixed：生成绝对定位元素，相对于浏览器窗口的定位。通常配合z-index一起来使用。
第一次用了Input框
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
| type |
| 规定 input 元素的类型。 |
class="img-iphone">
<img class="img-iphone-number" src="../img/iphone.png" >
<input class="input-number" type="text"id="phone" maxlength="11"
onkeyup="this.value=this.value.replace(/\D/g,'')"
placeholder=" 请输入手机号">
</div>
<div class="img-key">
<img class="img-key-number" src="../img/locked 2.png"/>
<input class="input-key" type="password" maxlength="18"
placeholder=" 请输入密码"></div>
1.position定位有哪几种？各有什么特点
定位常用的有三种 绝对定位，相对定位 和固定定位
各自的特点 绝对定位
俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终将以 html 元素进行位置偏移。
absolute的特点
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为第一个定位祖先或根元素（<html> 元素）
relative
俗称的相对定位，重点在于对相对的理解。我们都知道每个元素在页面的文档流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。
relative的特点
- 仍在文档流之中，并按照文档流中的顺序进行排列。
- 参照物为元素本身的位置。
设置relative最常用的目的为改变元素层级和设置为绝对定位的参照物。
fixed
俗称的固定定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display值变更为block。
2.会让元素脱离普通流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的参照物是可以被设置的，而fixed的参照物固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
fixed的特点
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为视窗
2.哪些css属性可以设置百分比，其计算原则是什么？
CSS 的属性值中经常会出现百分比，并且百分比是实现页面自适应很重要的一种方法。但是有哪些属性可以用百分比来进行设置呢？设置的原则又是什么呢？
2.知识剖析
可以使用百分比的样式属性:
定位：top,right,bottom,left;
盒模型：height,width,margin,padding,
背景：background-position,background-size(css3),
文本：text-indent，
字体：font-size;
各个属性使用详细：
top,right,bottom,left:全兼容,
height：基于包含它的块级对象的百分比高度。
width：基于包含它的块级对象的百分比宽度。
margin：百分数是相对于父元素的 width 计算的。
padding：百分数是相对于父元素的 width 计算的。
3.常见问题
1.怎么让字体设置进行自适应？
2.宽度设置为百分比是怎么使用的?
3.使用百分比要注意什么？
4.解决方案
1.利用媒体查询和字体的百分比设置。
2.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义，而非百分比)，div用百分比是无效的。如果坚持要用百分比，请换成table标签。
3.认清子元素的父元素
3.常见的表单元素有哪些？各有什么属性？
form: 定义供用户输入的表单。
2. fieldset: 定义域。即输入区加有文字的边框。
3. legend：定义域的标题，即边框上的文字。
4. label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
5. input: 定义输入域，常用。可设置type属性，从而具有不同功能。
6. textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
7. button: 定义一个按钮。
8. select: 定义一个选择列表，即下拉列表。
9. option: 定义下拉列表中的选项。
<form name="" action="" method="get">……</form>
name : 表单名称；action : 用来指定表单处理程序的位置（url）；method : 定义表单结果从浏览器传送到服务器的方式，默认为"get"（也可以是post）
<input type="" name="" value="" size="">
name:控件名称；value:input控件默认文本值；size:input控件在页面中的显示宽度（必须是正整数）
input常用type属性如下：
1. text：单行文本输入框，可以通过正整数的size控制框长度。
2. password：密码输入框。
3. radio：单选按钮，同一组的单选按钮必须要有相同的name。
4. checkbox：复选框，同一组的单选按钮必须要有相同的name。
5. button：普通按钮。
6. submit：提交按钮，每出现一次，一个 Submit 对象就会被创建。
7. reset：重置按钮，会重置当前表单中全部的内容。
8. image：图像形式的提交按钮，写法是“”。
9. hidden：隐藏域，隐藏字段对于用户是不可见的。
</select>
size：下拉菜单的可见选项数；multiple：多选。
在最新的html5中，有一些表单的新增属性，多用于js，如
datalist : 定义填写一个input时，提示几个option用于提示。可通过input的list特性与此元素作关联。
output : 表示计算的结果。可通过for特性与其它能够影响运算的元素（如input）作关联。
还有一些新增的type属性：
1. search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。
2. tel：编辑电话号码的控件，提交时换行符会自动从输入框中去掉。
3. url：编辑url的控件，提交时换行符与首位的空格都将自动去除。
4. email：可输入一个邮件地址。
5. color : 选择颜色的控件。
6. date : 选择年月日的控件。
此外，还有time、datetime、datetime-local、month、week、number、range类型。
html5中input新增的一些较常用的特性：
1. list：关联datalist所用的该datalist的id（即datalistform外建立，通过list关联即可）。
2. pattern：一个正则表达式，用于检查控件的值，可作用于text、search、tel、url、email类型的input。
3. form：一个字符串(为关联的form表单的id)，用于表明该input属于哪个form表单（作用类似list）。
4. formmethod：表明使用GET还是POST，能覆盖form表单的method。仅在type为image或submit，且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。
5. readonly：一个boolean值，表明该input值是否能被用户修改，可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。
6. maxlength：type为text、emal、search、password、tel或url（都为文本）时允许输入的最大字符个数。
7. autocomplete：浏览器是否根据之前提交的输入情况对此input自动填值（即以option形式匹配之前的输入值），取值on或off，默认on。如在登陆页面不想显示上一个登陆的用户名等时，可设置为off。
4.如何理解HTML结构的语义化？
1.首先，语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。
怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。
2.其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如h标签，在HTML中就是就是用来定义标题，还有p标签，英文是paragraph段落，table表格标签,等等。
5.使用fixed的时候，在手机上查看是否会有问题，怎么解决？
6.常见的移动端登录页header有哪些实现方式？
flex 绝对定位 33.33% PADDING等
task5总结
耗时2天
脑图：
总结：通过任务5我又更加深入的了解了盒子模型 又加深了对定位的运用绝对定位和固定定位
在做任务的时候用到了插入背景图片
说道插入背景图片就要说一下插入图片的路径了
1、当当前文件与目标文件在同一目录下，直接书写目标文件文件名+扩展名；
2、当当前文件与目标文件所处的文件夹在同一目录下，写法如下： 文件夹名/目标文件全称+扩展名；
3、当当前文件所处的文件夹和目标文件所处的文件夹在同一目录下，写法如下： ../目标文件所处文件夹名/目标文件文件名+扩展名。
background的几种属性background-image: ;
background-repeat: ;
background-size: ;
background-position:
对齐的方法
flex text-align :center
linn-height等于他的高度
vertical-align：center等
又熟练的运用了flex新接触的背景图片 no-repeat不重复
1.css可以绘制哪些常见的特殊形状？
可以画圆 ，正方形， 矩形， 椭圆，三角形平行西四边形等
2.如何理解vertical-align与line-height？
vertical-align支持很多属性值，
/* 关键字值 */vertical-align: baseline;vertical-align: sub;vertical-align: super;vertical-align: text-top;vertical-align: text-bottom;vertical-align: middle;vertical-align: top;vertical-align: bottom;/* <长度> 值 */vertical-align: 10em;vertical-align: 4px;/* <百分比> 值 */vertical-align: 10%;/* 全局值 */vertical-align: inherit;vertical-align: initial;vertical-align: unset;
其中，有个属性值暴露了vertical-align和line-height之间的关系 百分比
哇塞，好厉害！居然被大家一眼就看出来了，没错，就是“百分比值”。
vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。
1.line-height基本概念
定义：行高是指文本行基线baseline之间的垂直距离
1.1 line-height属性可赋值
设置固定长度(px,rem等固定单位)
设置数字:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
设置百分比:基于当前字体尺寸的百分比行距
注意：数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承
2.vertical-align基本概念与应用
定义：使行内元素的基线相对于该元素所在行的基线的垂直对齐
默认值baseline:元素基线与父元素基线对齐
众所周知，vertical-align支持很多属性值；(关键字值:vertical-align等等: middle;长度值：vertical-align: 4px等等；百分比值：vertical-align: 10%...等等)
注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。
1,图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等
2,直接修改line-height值
3.请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？
ex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。
2.基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 项目默认沿主轴排列。
3.容器属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。默认情况下，项目都排在一条线（又称”轴线”）上。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
4.项目属性
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
flex:direction设置主轴方向,确定子元素主轴排列方式
flex:wrap主轴宽度不够时是否换行显示
flex-flow上2复合属性
justify-content主轴上子元素对齐方式
align-items侧轴子元素对齐方式
align-content侧轴上有剩余空间时,侧轴对齐方式
4 .子级属性
order子元素排列顺序
flex-shrink子元素收缩比率
flex-grow子元素扩展比率
flex-basisflex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex上3简写,复合属性
align-self允许独立的弹性子元素覆盖弹性容器的默认的侧轴对齐方式(align-items)
5. 属性详解
flex-direction
row默认值,水平方向左至右
row-reverse水平方向右至左column垂直方向,上至下排列
ccolumn-reverse垂直方向,下至上排列
flex-wrap
nowrap默认值,不换行
wrap换行显示
wrap-reverse逆序换行显示
justify-content
center水平居中对齐
flex-start水平靠左对齐
flex-end水平靠右对齐
space-around水平均匀分布
space-between水平两端对齐
align-items
stretch默认值，拉伸等高,占满容器高度
flex-start垂直顶部对齐
flex-end垂直底部对齐
center垂直居中对齐
baseline项目的第一行文字的基线对齐
align-content
stretch默认值,拉伸,占满容器高度，项目高度由项目内容决定
flex-start垂直顶部对齐
flex-end垂直底部对齐
center垂直居中对齐
space-between垂直两端对齐
space-around垂直轴均匀分布
order子元素排列顺序（默认值为0）
设置的值越小越靠前
flex-grow子元素扩展比例
剩余宽度 * 占比值/总比值
默认值为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
盒子1设置flex-grow:1的时候单独分配剩下的所有空间
flex-shrink子元素收缩比例
溢出宽度 * 占比值/总比值
默认值为1,即如果空间不足，该项目将缩小。都为1的话，均匀缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
父级宽度为300px,子级为100px,收缩后宽度为300*1/4=75px
flex-basis
属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
4.title与h1、b与strong、i与em、img的alt与title、src与href有什么区别
2.1 title与h1的区别
定义：title是网站标题，h1是文章主题
作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，
2.2 b与strong的区别
定义：b(bold)是实体标签，用来给文字加粗，而strong是逻辑标签，作用是加强字符语气。
区别：b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、评测文章中的产品名称、文章的导言； 而strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通过CSS添加样式
建议：为了符合CSS3的规范，b应尽量少用而改用strong。
2.3 i与em的区别
定义：i(italic)是实体标签，用来使字符倾斜，而em(emphasis)是逻辑标签，作用是强调文本内容
区别：i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语（比如「de facto」这样的英语里常用的拉丁语短语）；而em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。
建议：为了符合CSS3的规范，i应尽量少用而改用em
2.5 src与href的区别
定义：href指定网络资源的位置建立链接或关系，用在link和a等元素上。src将外部资源嵌入到当前标签所在位置，如img图片和js脚本等。
区别：我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个关系。 浏览器解析src属性时，会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕。 浏览器解析到href的时候会识别该链接内容，对其进行下载不会
5.如何使用IconFont？
找到需要的图片然后放到需要的地方。
6.HTML中dl、ul、ol用哪个比较好？
什么是dl标签
dl标签就是定义列表，英文的单词是 definition list
接下来还有definition title dt 列表的标题 这个标签是必须要的
definition description 列表的列表项，如果不需要它，可以不加 dd
就是说，dt、dd只能在dl里面；dl里面只能有dt、dd。
什么是ul标签
无序列表 unordered list，“无序列表”的意思。
无序列表中的每一项是li标签
li：list item，“列表项”的意思。
什么是ol标签
有序列表ol 英文单词：Ordered List。
里面的每一项都是li标签
dl标签的作用非常大，在很多的大型网站上面都用它
上图可以看出，定义列表表达的语义是两层：
（1）是一个列表，列出了几个dd项目
（2）每一个词儿都有自己的描述项。
ul标签
li不能单独存在，必须包裹在ul里面；反过来说
ul的“儿子”不能是别的东西，只能有li。
我们这里再次强调，ul的作用，并不是给文字增加小圆点的，
而是增加无序列表的“语义”的。
ol标签
和无序列表一样，有序列表也是可以嵌套的哦
ol和ul就是语义不一样，怎么使用都是一样的
ol里面只能有li，li必须被ol包裹。li是容器级。
返回列表
评论