发表于： 2018-09-09 23:26:25
1 913
Today
复习css 知识，补一下css 任务深度思考：
1.HTML文件里开头的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缺少的最大的一个特征。
如何配置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.今日没有
返回列表
评论