发表于: 2018-09-09 23:26:25

1 910


Today

复习css 知识,补一下css 任务深度思考:

1.HTML文件里开头的Doctype有什么作用:

DOCTYPE是document type的简写,它并不是 HTML 标签,也没有结束标签,它是一种标记语言的文档类型声明,即告诉浏览器当前 HTML 是用什么版本编写的。DOCTYPE的声明必须是 HTML 文档的第一行,位于html标签之前。大多数Web文档的顶部都有doctype声明,它是在新建一个文档时,由Web创作软件草率处理的众多细节之一。很少人会去注意 doctype ,但在遵循标准的任何Web文档中,它都是一项必需的元素。doctype会影响代码验证,并决定了浏览器最终如何显示你的 Web文档。


DOCTYPE声明中指出阅读程序应该用什么规则来解释文档中的标记。在Web文档的情况下,阅读程序通常是浏览器或者校验器这样的一个程序,规则是W3C所发布的一个文档类型定义 DTD 中包含的规则。制作一个符合标准的网页,DOCTYPE声明是是不可缺少的,它在Web设计中用来说明你用的XHTML或者HTML是什么版本,如果不做DOCTYPE声明或声明不正确的情况下,将有可能导致你的标识与CSS失效,从而令你网页的布局变乱,造成网页在浏览器中不能正常的显示。我们还可以通过W3C提供的验证工具来检查页面的内容是否符合在DOCTYPE中声明的标准。

常见的inline元素、block元素、inline-block元素有哪些?它们之间有什么区别

如果只用一句话描述:inline是内联元素,block是块级元素,inline-block是内联块元素。

inline元素全称Inline Elements,英文原意:An inline element does not start on a new line and only takes up as much width as necessary.一个内联元素不会开始新的一行,并且只占有必要的宽度。

常见的块元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote、form。

block元素全称Block-level Elements,英文原意:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).一个块级元素总是开始新的一行,并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)

常见的块元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form。

inline-block元素,英文释义:inline-block elements are like inline elements but they can have a width and a height.它像内联元素,但具有宽度和高度。

img、input标签就是这种内联块元素标签



inline元素:

(1)、和其他元素都在一行上;

(2)、元素的高度、宽度、行高及顶部和底部边距不可设置;

(3)、元素的宽度就是它包含的文字或图片的宽度,不可改变。


block元素:

(1)、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行);

(2)、元素的高度、宽度、行高以及顶和底边距都可设置;

(3)、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

inline-block元素:

(1)、和其他元素都在一行上;

(2)、元素的高度、宽度、行高以及顶和底边距都可设置

由于基线的原因,图片底部到块底部会有一段空白,解决,图片display:block


加和不加meta的viewport有什么区别?

在解释视口之前,我们先回顾一下CSS的基础:

css中,在没有声明任何宽度时,每个块级元素的默认宽度都是100% 。那这个100% 是相对于什么的100% 呢? 对了,是它父元素的100% 。 每一个css百分比都是根据它的父元素的宽度来进行计算的,所以宽度为父元素 宽度的100% ,本质是:

这里,div.aside占用了它的父元素 body 宽度的100%,但我们没有给body 定义宽度,因此,它占用了它的父元素,也就是html 宽度的100% 。但,我们同样也没有给它定义宽度。因此,它占用的是它的父元素宽度的100% ;

那html 的父元素是谁呢 ?

这就是要说的 视口了。

在CSS文档中,它叫做 初始包含块。

这是百分比计算的根源,它给css布局限制了最大宽度。

在pc 浏览器中,视口的宽度 和浏览器窗口的宽度是一致的(先不管margin 和padding),html ,body 元素的宽度都和浏览器窗口的宽度一致。

meta 视口标签存在的目的主要是:让布局视口的尺寸和理想视口的尺寸匹配。


svn和git有什么区别?

 最核心的区别Git是分布式的,而Svn不是分布的。

 2)Git把内容按元数据方式存储,而SVN是按文件

3) Git没有一个全局版本号,而SVN有:目前为止这是跟SVN相比Git缺少的最大的一个特征。

 9)分支(Branch)在SVN,分支是一个完整的目录。且这个目录拥有完整的实际文件。如果工作成员想要开啟新的分支,那将会影响“全世界”!每个人都会拥有和你一样的分支。如果你的分支是用来进行破坏工作(安检测试),那将会像传染病一样,你改一个分支,还得让其他人重新切分支重新下载,十分狗血。而 Git,每个工作成员可以任意在自己的本地版本库开啟无限个分支。举例:当我想尝试破坏自己的程序(安检测试),并且想保留这些被修改的文件供日后使用, 我可以开一个分支,做我喜欢的事。完全不需担心妨碍其他工作成员。只要我不合并及提交到主要版本库,没有一个工作成员会被影响


如何配置nginx,实现在手机上查看页面

1、静态HTTP服务器                首先,Nginx是一个HTTP服务器,可以将服务器上的静态文件(如HTML、图片)通过HTTP协议展现给客户端。

2、反向代理服务器                什么是反向代理?                客户端本来可以直接通过HTTP协议访问某网站应用服务器,网站管理员可以在中间加上一个Nginx,客户端请求Nginx,Nginx请求应用服务器,然后将结果返回给客户端,此时Nginx就是反向代理服务器。


6.如何在手机端访问

首先,电脑和手机连接上同一个wifi然后查看电脑ip:win+R→cmd→ipconfig→回车, 找到无限局域网适配器wlan中的ip地址,例如我的是192.168.0.119然后手机浏览器中输入192.168.01.119/task1.html 就可以看到自己的代码


px、em、rem、%、vw、wh、vm等单位有什么区别?

1、px

px就是pixel的缩写,意为像素。px就是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。

2、em

参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

3、rem

css3新单位,相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。

4、%

一般宽泛的讲是相对于父元素,但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于 ViewPort(可视窗口)

3、vw

css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。

举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

4、vh

css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。

举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。

4、vm

css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度, 1 vm = 900px/100 = 9 px。



如何进行自适应网页设计?

自适应网页设计模式正在快速发展,但只有少数几种成熟的模式可以跨桌面设备和移动设备流畅运行。

自适应网页所用的大部分布局可以归类为五种模式之一:mostly fluid、column drop、layout shifter、tiny tweaks 和 off canvas。在某些情况下,页面可能使用组合模式,例如 column drop 和 off canvas。这些模式最初由 Luke Wroblewski 确定,为任何自适应页面提供了可靠的起点。


css有哪些选择器,优先级如何计算?

Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序:

1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul < li)6.后代选择器(li a)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child

问:a:link、a:visited、a:hover、a:active顺序为什么要遵循love/hate 顺序?

答:a :link、a:hover、a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同,原因就在于浏览器解释CSS时遵循的“就近原则”。

一句话:在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。

这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果

从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表。

Tomorrow

1.继续 学习css 任务后深度思考

2.js 学习

3.js任务1

Gain 

1.css 基础内容学习

2.js 知识学习

Pain

1.今日没有


返回列表 返回列表
评论

    分享到