3.11面经学习

url回车后发生了什么

域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求，浏览器得到html代码 –> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） –> 浏览器对页面进行渲染呈现给用户

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：

   <br> <hr> <img> <input> <link> <meta>

鲜为人知的是：

    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

页面可见性（Page Visibility API） 可以有哪些用途？

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

多列等高

align-item:stretch

.container{margin: 0 auto;width: 600x;border: 3px solid #00c;overflow: hidden;}
.left{float: left;width: 150px;background: #b0b0b0;padding-bottom: 100px;margin-bottom: -100px;}
.right{float: left;width: 450px;background: #6cc;padding-bottom: 100px;margin-bottom: -100px;}
<div class="container">
    <div class="left">ssss</div>
    <div class="right">ssss<br><br/><br/>dfdkjij</div>
</div>

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

ul{list-style-type: none;font-size: 0;padding: 0;margin: 0}
li{width: 50px;height: 50px;background: red;display: inline-block;font-size: 12px;vertical-align: top}
<ul>
    <li>sss</li>
    <li></li>
    <li>dd</li>
    <li>gg</li>
    <li>gg</li>
</ul>

一个元素的 containing block 按以下方式定义：

• 用户代理（比如浏览器）选择根元素作为 containing block（称之为初始 containing block）。
• 对于其它元素，除非元素使用的是绝对位置，containing block 由最近的块级祖先元素盒子的内容边界组成。
  
  • 如果元素有属性 ‘position:fixed’，containing block 由视口建立。
  • 如果元素有属性 ‘position:absolute’，containing block 由最近的 position 不是 static 的祖先建立，按下面的步骤：
• 如果祖先是块级元素，containing block 由祖先的 padding edge 形成。
• 如果祖先是内联元素，containing block 取决于祖先的 direction 属性。
  
  • 如果 direction 是 ltr（左到右），祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方，祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。
  • 如果 direction 是 rtl（右到左），祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方，祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。
• 如果没有祖先，根元素盒子的内容边界确定为 containing block。

visibility的collapse

当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。