补漏-1

时间 2019-11-09

标签补漏繁體版

原文原文链接

HTML5文档类型声明？

<!DOCTYPE html>，注意叹号和后面不留空格。

必须写文档类型声明，不写的话每每会让浏览器工做在混杂模式。

兼容性：全兼容（包括IE6）。

内联样式和外联样式？

用style属性写在标签内的是内联样式，好比：

<h1 style="color:#F00">猜猜是什么颜色？</h1>

外联样式用link标签引入，好比：

<link rel="stylesheet" type="text/css" href="css/base.css">

内联样式的优先级较高。

使用外联样式的优势是表现与结构分离，便于维护，代码重用。

那内联样式的使用情景是什么呢？当特殊的样式须要应用到个别元素时，就可使用内联样式。

选择器优先级？

优先级逐级增长的选择器列表：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important

让一段文本垂直居中的办法？

若是父元素高度不肯定，能够给父容器设置相同的上下内边距。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            border: 1px solid #000;
            padding: 50px 0;
        }
    </style>
</head>
<body>
    <div>
        <p>
            父级高度不肯定
            多行文本垂直居中
        </p>
    </div>
</body>
</html>

 
    若是父级元素高度肯定的话，使用vertical-align:middle;，由于只有元素为th或td的时候才能使用，因此才能对块级元素使用display:tabel-cell，注意不兼容IE6和IE7。 
   

 
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            border: 1px solid #000;
            height: 300px;
            display: table;
            width: 200px;
        }
        p{
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <p>
            父级高度不肯定
            多行文本垂直居中
        </p>
    </div>
</body>
</html> 
    

盒模型问题

盒子在页面占据的大小包括了margin，border，padding以及content。而盒子的实际大小（这里的实际大小，经过调试工具inspect能够看出来）包括border，padding以及内容区域content，可是不包括margin。

注意，咱们经过JavaScript代码获取某一个元素的大小时，所获得的width和height实际上是盒子模型中的content的大小。

JS闭包理解

DOM加载顺序

首先浏览器会解析静态的html结构好比 head body footer等html标签
当html结构加载完成咱们须要渲染页面使其美观，所以此时须要加载各类样式表文件。
而后再解析并执行js或者其余脚本代码。
构造html DOM对象，也就是 ready 操做
加载html和css中引用的外部资源文件。
页面加载完成(load操做)，js进行一些事件的绑定和处理。

多的大型的内容型网站会把图片等静态资源放在一个单独的域名下, 请问这样作是为何呢？

动静分离，静态资源方便作CDN。
cookie free，即这些域名下请求不会发cookie，节省流量，这也是不放二级三级域名的缘由。（牵扯到HTTP协议，之后要深刻学习）