20181207_Second_小结

Posted 2021-01-25 tianxiaxuange

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20181207_Second_小结相关的知识，希望对你有一定的参考价值。

1. 上下 200*200 盒子的重叠，切记用 absolute 绝对定位为最佳解决方案

2. 移动端多使用粘连布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <meta name="viewport"
              content="user-scalable=no,
                       width=device-width,
                       initial-scale=1.0,
                       minimum-scale=1.0,
                       maximum-scale=1.0"/>
        
        <style rel="stylesheet" type="text/css">
            html, body, div {
                margin: 0;
                padding: 0;
            }
            
        html, body {
          width: 100%;
          height: 100%;    /* 参照屏幕区域的高 */
                min-width: 600px;
          overflow: hidden;
            }
            
        #wrap {
          width: 100%;
          min-height: 100%;    // 使 footer 始终在屏幕的底部
                
                background: cadetblue;
            }
            
        #content {
          width: 100%;
                
          padding-bottom: 50px;
                
                font-size: 14px;
                background: darkgrey;
            }
            
        #footer {    // 必须放在 wrap 的外面
          width: 100%;
          height: 50px;
                
          margin-top: -50px;
                
                background: chocolate;
                text-align: center;
                line-height: 50px;
            }
        
        </style>
    </head>
    
    <body>
        
        <!-- 模拟屏幕区域 -->
        <div id="wrap">
            <!-- 内容区域 -->
            <div id="content"></div>
        </div>
        
        <!-- 底部区域 -->
        <div id="footer"></div>
    </body>
</html>

3. 浏览器有两个滚动条

单独给 html 或者 body 加 overflow: scroll; 都会作用在 document 上，生成一个滚动条
同时给 html、body 加 overflow: scroll; 会出现两个滚动条
html 的 overflow: scroll; 会作用于 document
body 的 overflow: scroll; 会作用于 body

4. 在子元素浮动时，解决父元素高度塌陷

(1) 给父元素设置固定 height

(2) 使父元素开启 BFC

①父元素 overflow: hidden;

② 父元素也浮动 float

③ 绝对定位 position: absolute;

④ 固定定位 position: fixed;

IE6 开启 BFC : zoom: 1;

(3) 使用块元素隔离父、子元素

⑤ 添加一个换行

<div id="wrap">
    <div id="box"></div>
    <br clear="all">    
</div>

⑥ 添加一个空的 <div> 清除浮动 clear: both;

⑦ 伪元素 before 转换为块

.clearfix:after {    /* 伪元素默认是 inline 行内元素 */
    content:"";    /* 充当父元素的最后一个子元素，默认是 inline 行内元素, 相当一个 <span></span> */
    display: block;   /* 将 伪元素设置为 block 块级元素  */
    clear: both;
}

5. 初始包含块

根元素的包含块 // 大多数情况 <html>就是根元素

初始包含块由用户代理建立

大多数浏览器中，初始包含块就是一个视窗大小的矩形，但不等同于视窗 // 视窗就是浏览器窗口

对于非根元素，
若 position: relative/static，包含块是最近的行内块祖先元素的内容边界构成
若 position: relative/absolue/fixed，包含块是最近的开启了定位的祖先元素
若没有祖先元素，则元素的包含块为初始包含块 <html>

2222

以上是关于20181207_Second_小结的主要内容，如果未能解决你的问题，请参考以下文章

python20181207

[AndroidStudio]_[初级]_[配置自动完成的代码片段]

VSCode 配置用户自定义代码片段自定义自动代码补充

[AndroidStudio]_[初级]_[配置自动完成的代码片段]

这些 C++ 代码片段有啥作用？