发表于: 2018-09-09 23:26:25
1 911
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.今日没有
评论