发表于： 2019-11-04 18:52:37
1 999
今天做的事
写了小课堂的PPT
把任务1345的脑图和深度思考补齐
完善wiki登记
收获
无
问题
无
明天计划
任务5
任务一的脑图
以下是深度思考
一
DOCTYPE的作用?
DOCTYPE是document type(文档类型)的简写，在web设计中用来声明文档类型。
在所有 HTML 文档中规定 DOCTYPE 是非常重要的，这样浏览器就能了解预期的文档类型， 告诉浏览器要通过哪一种规范（DTD）解析文档（比如HTML或XHTML规范）。
DOCTYPE会影响代码验证，并决定了浏览器最终如何显示你的Web文档。
二.
1. 内容区域content
内容区域content area 是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，它的大小为内容宽度 或 content-box宽及内容高度或content-box高。
如果 box-sizing 为默认值， width, min-width, max-width, height, min-height 与 max-height 控制内容大小。
2. 内边距区域padding
内边距区域padding area 延伸到包围padding的边框。如果内容区域content area设置了背景、颜色或者图片，这些样式将会延伸到padding上(而不仅仅是作用于内容区域)。它位于内边距边界内部, 它的大小为 padding-box 宽与 padding-box 高。
内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。
3. 边框区域border
边框区域border area 是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 border-box 宽和 border-box 高。由 border-width 及简写属性 border控制。
4. 外边距区域margin
外边距区域margin area用空白区域扩展边框区域，以分开相邻的元素。它的大小为 margin-box 的高宽。
外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left 及简写属性 margin 控制。
注意:
在外边距合并 的情况下，由于盒之间共享外边距，外边距不容易弄清楚。
对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由 line-height 属性决定。
三
inline元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、宽度、行高及顶部和底部边距不可设置；
(3)、元素的宽度就是它包含的文字或图片的宽度，不可改变。
block元素:
(1)、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;
(2)、元素的高度、宽度、行高以及顶和底边距都可设置;
(3)、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
inline-block元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、宽度、行高以及顶和底边距都可设置
四
①如何在当前元素上修改？
选择某一个元素，在开发者工具底下会弹出一个当前元素样式 - 元素风格。可在该选择样式下更改，这样更改有一个好处，它不会影响其它位置相同元素的样式，只会影响当前你选取的这个元素的样式。这样优先级更高。
②如何在当前元素对应的类上修改样式？
在开发者工具最底下我框选出来的位置就是当前元素类，也可在这个位置进行更改样式，但是在这个位置修改样式需要注意页面当中所有同一种元素的样式都会发生改变，一牵动则动全身。
五
1.对于第一个问题，一般情况下通过对ul设置margin:0;padding:0;就能清除ul的默认间距。要去除去除li的默认间距至少有2种方法：
（1）.将li标签之间的间隙去除。
（2）.在body元素中添加font-size:0;。
2.对于第二个问题。因为要实现自适应。自适应是在通常情况下宽度充满屏幕的基础上进行的，通常不会对高度进行控制，如果高度固定，就不能起到自适应的效果。
六
IDE里面除了编辑器，还有很多其他东西。
编辑器的本质是可以写字符就行,像windows自带的写字板就是最简单的编辑器,他的识别级别在文字级,他只显示你想写入,和打开的文本内容.他不管你写什么内容.只提供接收与显示功能。
IDE是集合了sdk, 语言支持包, 函数库, 编辑器在一起的软件,或者集合.可以支持你要学的特定编程语言的. 他的"识别级别"比编辑器高一级, 可以识别到编程语言, 或者这种语言的库. 往往用起来更方便. 或者更专业。
集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE（如HomeSite、DreamWeaver等），因为很多项任务会自动生成。
七
在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的 viewport的宽度要小的
。
任务3
脑图：
任务耗时两天
如何利用PS切图以及从UI图中获取所需信息：
之前在学校里有过学习PS的基础，不过到现在基本上都忘得差不多了，甚至连快捷键F2截图这种都没记住，现在用的图片截图还是比较简单的，点击选中工具点击需要截取的图片上面，这样选中那个图层，然后用F2把这个图层单独的用另一个界面打开，然后快速导出到想要放入的文件夹里面就可以了，暂时还是比较简单的，这里就不放图了，浪费空间。
px、em、rem、%、vw、wh、vm等单位有什么区别？
px：是显示屏上显示的每一个小点,为显示的最小单位。这个长度与您正在看的显示屏中的文字屏幕像素没有任何关系。
px像素（Pixel）值是固定的，不会随着屏幕宽度变而变。
em:是相对单位。em其实就是一种排版的测试单位.
在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系，因此：如果字体大小是16px，那么1em=16px。在所有现代浏览器中，其默认的字体大小就是“16px”。但自身如果定义了font-size大小则按照自身来计算，也就是说整个页面内的em值并非完全一样。
rem:是一个相对的单位，像em，但它总是相对于“根”元素html的字体大小来计算。em和rem的区别：em相对于父元素，rem相对于根元素。这极大地简化了与相关长度单位的合作。
%(percentage)以百分比形式设置的长度基于父元素的相同属性的长度。例如，如果一个元素以450px宽度呈现，宽度设置为50％的子元素将呈现225px。
vw-这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何。
vh-这与vw（视口宽度）单位相同，只是它基于视口高度。vmin and vmax：关于视口高度vh和宽度vw两者的最小值或者最大值。
如何进行自适应网页设计？
1、在HTML头部增加viewport标签
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
2、不使用绝对宽度
3、流动布局
css有哪些选择器，优先级如何计算？
对于不同类别的选择器，以以下原则进行排序：
1、在属性后面使用！important会覆盖页面内任何位置定义的元素样式。
2、作为style属性写在元素内的样式
3、id选择器
4、类选择器
5、标签选择器
6、通配符选择器
7、浏览器自定义或子元素集成父类的样式
稍微总结一下就是：！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
什么时候用margin好，什么时候用padding好？
使用margin值的情况：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。(margin折叠）。
需要使用负值对页面布局时(margin值可以取负，padding不行)。
使用padding时的情况：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
手机分辨率和网页中的px是一回事吗？
分辨率（Resolution)，是一个表示平面图像精细程度的概念，它通常是以横向和纵向点的数量来衡量的，
表示为水平点数垂直点数的形式，例如1366px768px。
分辨率的概念在具体的划分中，有分为显示分辨率、打印分辨率、扫描分辨率等概念。
显示分辨率：显示器在显示图像时的分辨率，用点来衡量，在这里，点的概念其实就是物理像素。跟屏幕大小和显示部件的技术有关。
不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。 现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点， 也可以认为是打印机的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。
任务四深度思考：
任务四共耗时三天。
接下来讲讲任务中的问题
1.position定位有哪几种？各有什么特点。
3）DIV布局属性之position:fixed，相对于窗口的固定定位。
所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。
2. 哪些css属性可以设置百分比，其计算原则是什么？
可以使用百分比的样式属性:
定位：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. 常见的表单元素有哪些？各有什么属性？
常用表单元素
form:定义供用户输入的表单。
fieldset:定义域。即输入区加有文字的边框。
legend：定义域的标题，即边框上的文字。
label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
input:定义输入域，常用。可设置type属性，从而具有不同功能。
textarea:定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
button:定义一个按钮。
select:定义一个选择列表，即下拉列表。
option:定义下拉列表中的选项。
4. 如何理解HTML结构的语义化？
1、什么是html语义化
选择合适的html标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化？
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
- 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3、写HTML代码时应注意什么？
1. 尽可能少的使用无语义的标签div和span；
2. 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3. 不要使用纯样式标签和规范不支持的标签，如：b、font、u、center,strike,menu等，改用css设置。
4. 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
6. 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
7. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
8. 不要省略某些标签的属性,<img>标签的alt属性的作用是当图片不能正常显示的时候的替换文字，<a>标签的title属性可作为说明信息，并且当鼠标hover时显示为提示信息。
使用fixed的时候，在手机上查看是否会有问题，怎么解决？
在PC端的浏览器上，用如下的CSS设置，就可以将div固定在窗口底部：
position: fixed;bottom: 0;
但是这种设置在手机上浏览时，如果向下滚动视口，就会发现fixed的div并没有固定在底部，而是随着视口向上滚动了，这时就可以使用如下的解决办法：
在head中加这么一个声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no">
常见的移动端登录页header有哪些实现方式？
1：响应式布局。
可以用px作为像素，网页进行平铺。全屏的用100%。高度可以用px写死，宽度可以用百分比。不管网页怎么拉伸，高度不变，宽度会相应的扩大。
2：em/rem 方式布局。
可以设置好html，body的字体大小，然后用不同的尺寸手机访问的时候，我们可以去修改body的字体大小，网页（网页的内容用rem设置宽度、高度）的之内容会自动进行缩放。
任务五
上面的脑图是我在任务五的过程中学到的新知识点，比如说fiex布局和绝对定位。
这个是在任务一到四中没有接触过的新知识，在过程中首先就遇到了背景颜色的设置问题，我之前以为是单独的一张图片，然后在图片上面添加东西之类的，于是乎一直在想怎么把接下来的文字和图片放在上面，但是图片本身就是一个块级元素，所以怎么弄都不太顺利，后来请教师兄之后把最大的图片设置成背景图片，然后就可以在上面随心所欲的设置东西了。
然后就是头部和尾部用了绝对定位position: fixed;，固定了头部和尾部，然后在上下加了一个空盒子设置高度跟固定的高度一样，这样就把顶部和下面撑上去了。
接下来讲讲深度思考中的问题；
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？
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计算的。
3.常见问题
为什么在div内插入图片，会发现图片下面有一段空白间隙？
4.解决方案
1,图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等
2,直接修改line-heigh
3. 请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？
1. 什么是flex
flex 是 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 。
4.title与h1、b与strong、i与em、img的alt与title、src与href有什么区别
title与h1的区别:
定义：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 等元素上使用
src通常用作“拿取”（引入），href 用作 “连结前往”（引用）。
如何使用IconFont？
什么是 iconfont
iconfont就是字面上的意思，叫做“字体图标”，将一套图标集以字体文件的形式封装，并通过 CSS 的 @font-face 作为 Web Font 调用。
为什么要使用 iconfont
在互联网刚起步的时候，较多使用的是png图片，但是png图片更换起来很麻烦， 并且自适应效果很差，有时候会出现锯齿以及马赛克模糊的情况，加载起来也较慢，影响用户体验。
iconfont 的产生就是来解决上面的问题，将 icon 做为字体来使用，它具有很多优势：
对 web 和 app：
弹性，在网页或者 app 上，展示字体是很便捷的。用 iconfont 可以很方便的改变 icon 的颜色，或者加入一些其他的效果。
可缩放，可以很方便的改变图标的大小。
矢量，iconfont 是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊。
节省加载时间，iconfont 很小，每个小图标只有几 kb，大大节省了加载时间。
6.HTML中dl、ul、ol用哪个比较好？
ul，ol，dl标签是CSS网页布局中常用的列表元素。 列表将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来。
1.ul标签：无序列表始于 u l 标签。每个列表项始于l i标签，此列项目默认使用粗体圆点（典型的小黑圆圈）进行标记。
2.ol标签：有序列表始于ol标签，每个列表项始于li标签，列表项目使用数字进行标记。
3.dl标签：dl标签是定义列表，自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。
↑↑↑以上所有的列表项内部都可以使用段落、换行符、图片、链接以及其他列表等。
如何定义ul，ol，dl的样式?
在样式表中用list-style定义。
disc实心圆，默认值 circle空心圆 square实心方块 decimal阿拉伯数字 lower-roman小写罗马数字 upper-roman大写罗马数字 lower-alpha小写英文字母 upper-alpha大写英文字母
注：也可以去掉默认样式，设置list-style：none，然后根据自己需要添加不同的样式，比如添加特殊背景图片，使列表显示不一样的风格。
问题1:什么情况下用ul，什么情况下用ol？
回答：ul经常用来实现轮播的小按钮，下拉菜单的各种要用来排列的列表，多个a标签排列等，实用范围非常广。 而ol因为它的有序属性，用的范围就比较小了，不是一定要用有序来排列的情况下，一般都是用ul。
返回列表
评论