发表于: 2018-08-01 22:23:55

1 605


今天完成的事情

 1、css可以绘制哪些常见的图形

        简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标

2、如何理解vertical-align与line-height?

          

 (1) line-height基本概念

定义:行高是指文本行基线baseline之间的垂直距离

  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. 请解释一下CSS3的Flexbox(弹性盒布局模型)以及适用场景?


Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局,行内元素也可以使用Flex布局。注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。


采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。


该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。


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属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了


src与href的区别: 

href,.是超文本引用,指向需要连结的地方,是与该页面有关联的,是引用。在 link和a 等元素上使用。 

src是指向物件的来源地址,是引入。在 img、script、iframe 等元素上使用 

src通常用作“拿取”(引入),href 用作 “连结前往”(引用) 


5.如何使用IconFont?

http://www.iconfont.cn/

github快捷登录——找到需要的图标——下载


6.HTML中dl、ul、ol用哪个比较好?  

  ul :无序列表   ol :有序列表   dl :定义列表

这个看需求:

不需要分清楚顺序的用无序列表,


需要分清楚12345顺序的就用有序列表


定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。


明天计划  task6


问题 无


收获  学习了理论和概念


















返回列表 返回列表
评论

    分享到