发表于： 2019-06-04 16:22:16
1 874
大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务4，深度思考中的知识点
任务四深度思考：
今天打算做任务四的深度思考，之前因为急于做任务没时间做。
首先先上刚做的脑图吧，
任务四共耗时三天。
接下来讲讲任务中的问题
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设置宽度、高度）的之内容会自动进行缩放。
任务四总结：
之前任务一到三的时候用的是最基本的padding，margin，用这些比较简单的东西，只是对盒子模型有了最简单的概念，让我初步的了解了怎么使用的，起到了什么效果，而任务四就比较有要求了，对盒子模型的要求感觉会更高一点，还用到了新的元素，比如说input框，收获还是比较多的，对盒子模型有了更深层次的理解。
任务五深度思考：
大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务5，深度思考中的知识点；
首先还是先放个人脑图吧：
上面的脑图是我在任务五的过程中学到的新知识点，比如说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。
任务五总结：
任务五学到了很多新的东西，比如说flex布局，然后是绝对定位，感觉任务的难度是一次比一次高，但是每次都能学到新的东西，这个可能也是我基础比较差，啥都可以拿来学的缘故，每次都能学到新的东西比较令人欣喜，但是必须要记得牢，然后还要融会贯通，这个是最重要的，不能学着忘着，最后啥都看过啥都不懂，这个是最气人了。
返回列表
评论