• CSS_细节总结

    1. 负外边距

    • 上下200*200盒子的重叠，切记用 absolute 绝对定位 为最佳解决方案。
      • 定位 position : fixed    absolute    relative( top 为 -200px )
        • 如果元素有文字，会覆盖元素
      • 浮动 float ：  需要使得要浮动的元素，作为被覆盖元素的兄弟元素，且在上
        • 浮动元素怎么浮，都不会浮出父级元素
        • 始终不会超过前面的兄弟元素
        • 本旨解决文字环绕浮动元素，即如果被覆盖元素有文本，文本会被挤出来
      • 负外边距 margin 设置一个负值
        • margin-top: -200px;
        • 如果被覆盖元素有文本，文本依旧可视。
        • 不会脱离文档流

     

     

     

    • 粘连布局

    • 大部分使用在移动端
    • 第一件事 F12 开发者模式，选择Iphone 
      • <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    • 画一个盒子模拟屏幕，避免操作 <html>，<body> 
      • html,
body {
    height: 100%;
    /* overflow: hidden; */
}

#wrap {
    width: 100%;
    min-height: 100%;
    
    background-color: #96b377;
}

#content {
    width: 100%;
    padding-bottom: 50px;
    
    font-size: 14px;
    background: darkgrey;
}

#footer {
    width: 100%;
    height: 50px;
    margin-top: -50px;
    
    background: chocolate;
    text-align: center;
    line-height: 50px;
}
      • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
                <title></title>
        
        <meta name="viewport"
              content="user-scalable=no,
                       width=device-width,
                       initial-scale=1.0,
                       minimum-scale=1.0,
                       maximum-scale=1.0" />
        
        <meta gttp-equiv="X-UA-Compatible" content="ie=edge" />

        <style rel="stylesheet" type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            html,body {
          height: 100%;    /* 参照屏幕区域的高 */
          /* overflow: hidden;     禁止浏览器的 2 个滚动条 */
            }
             
            #wrap {
                width: 100%;
                /* height: 100%; */
                        
                        /* min-height: 100%; */   /* 元素最小高度设置 100% */
                        max-height: 100%;    /* 元素最大高度设置 100% */
        
                backgroound: pink;
            }

                    #content {
                         100%;

                        padding-bottom: 50px;

                        font-size: 20px;
                        background: yellow;
                    }

                    #footer {
                         100%;
                        height: 50px;
                        margin-top: -50px;

                        background: green;
                        line-height: 50px;
                        text-align: center;
                    }
        </style>
    </head>
    <body>

                <!-- 模拟屏幕区域 -->
        <div id="wrap">

                    <!-- 内容区域 -->
                    <div id="content">
                        
                    </div>
                    
                </div>
                
                <!-- 底部区域 -->
                <div id="footer">
                </div>
        
    </body>
</html>
      • 百分比的参照点
        • width，height 参照父级元素
      • <html>，<body> 的默认高度为 0
      • wrap 高，是一个范围值，大于等于 100%
        • 内容 content 少的时候，wrap 高为 100%，即 wrap 的最小值为 100%
        • 内容 content 多的时候，wrap 高被内容撑开。
        • 解决：给 wrap 设置 min-height: 100%;
      • 文字覆盖在了 footer 上方
        • 利用 盒子模型( content，padding，border，margin ) 解决
        • 即 padding-bottom: 50px;

     

    • 整个 footer 的结构要放在 wrap 的外面，即 wrap 与 footer 是兄弟元素
    • footer 必须采用 margin 为 - px ，使结构上去
    • wrap 区域必须被自己的子元素撑开 [100%，最大内容撑开)： min-height: 100%;
    • 如果想在 wrap 外添加其他元素，必须使用定位 position: absolute; 以防干扰 wrap 粘连布局造成影响。

     

     2. 禁止系统滚动条

    overflow: hidden;

    overflow: auto;

    overflow: scroll;    // 始终显示 2 个滚动条

     

    html body 只有一个 overflow 时 ，会传递 overflow 给document

     

    • 浏览器的滚动条 到底是谁的滚动条
      • 单独给 <html> 加 overflow: scroll; ，document 会显示 xy 滚动条
      • 单独给 <body> 加 overflow: scroll; ，document 会显示 xy 滚动条
      • 给 <html> 和 <body> 加 overflow: scroll; ，document 会显示 xy 滚动条，body 自己也会显示 xy 滚动条
        • 此时，<body> 的 overflow: scroll; 作用于 <body>
        • 而 <html> 的 overflow: scroll; 作用于 document 

     

    • 浏览器有 2 个滚动条
      • <body> 的滚动条
      • <html> 的滚动条
        • 当内容过多时，是 <html> 从屏幕溢出，所以此时滚动条是 document

     

    • 禁止浏览器的滚动条 
      • html,body {
    height: 100%；    // 让 html 和 body 的高始终是可视屏幕区的大小，禁止高度被内容撑开
    overflow: hidden;    // 禁止浏览器的 2 个滚动条
}
      • 使用情况

     

    3. 清除浮动

    • 解决子元素浮动时，父元素的高度塌陷
      • 1. 给父元素一个固定的高度 height
      • 开启 BFC（IE6 7 下，没有 BFC "而叫 haslayout"）
        • 2. overflow: hidden;    // 开启了 BFC    块级格式化环境
          • 解决子元素从父元素溢出
          • 开启 BFC
          • IE7 开启 haslayout    （IE6 不起作用）
        • 以下三种会导致水平外边距 margin 失效
          • 3. 给父元素也加浮动    // 开启了 BFC    但是父元素的父元素可能高度塌陷
          • 4. 绝对定位 position: absolute;    // 开启了 BFC
          • 5. 固定定位 position: fixed;    // 开启了BFC
      • 6. 父元素添加一个空的div  <div class="clearfix"></div> 
        • .clearfix {
    clear: both;
}
      • 7. 父元素添加一个换行 
        • <div id="wrap">
    <div id="box"></div>
    <br clear="all">
</div>
      • 8. 父元素加 class = "clearfix" 
        • .clearfix:after {    // 伪元素默认是 inline 行内元素
    content:"";    // 充当父元素的最后一个子元素，默认是 inline 行内元素, 相当一个 <span></span>
    display: block;    // 将 伪元素设置为 block 块级元素 
    clear: both;
}
      • IE6 清除浮动需要 开启 haslayout 
        • .clearfix {
    zoom: 1;
}

     

    4. 定位

    top，right，bottom，left 默认值是 auto。所以开启定位时，必须写两个值

    • position: fixed;    // 固定定位
      • top，right，bottom，left 参照于浏览器窗口

     

    • position: relative;    // 相对定位
      • top，right，bottom，left 参照自身在文档流的位置
        • 文档流：元素顺序排列，自上而下，自左而右

     

    • position: absolute;    // 绝对定位
      • top，right，bottom，left 参照最近的开启了定位的祖先元素
        • 如果没有定义 开启了定位的父元素，则参照 初始包含块

     

      • 包含块
        • 对于浮动元素，包含块为最近的块级祖先元素，即最近的 display: block; 的祖先元素

     

      • 初始包含块
        • 根元素的包含块        // 大多数情况 <html>就是根元素
        • 初始包含块 由用户代理建立
        • 在大多数浏览器中，初始包含块就是一个视窗大小的矩形，但不等同于视窗        // 视窗就是浏览器窗口
        • 对于 非根元素 ，若 position: relative/static，包含块是最近的行内块祖先元素的 内容边界 构成
        • 对于 非根元素 ，若 position: relative/absolue/fixed，包含块是最近的开启了定位的祖先元素
        • 若没有祖先元素，则元素的包含块为初始包含块 <html>

     

    • 三列布局       

    两边固定，中间自适应

     

      • 定位实现        不推荐使用
        • 左右盒子设置 position: absolute;
        • 中间的盒子加 padding:  0 200px;    // 水平内边距
        • 给 <body> 加 min- ;    //  左边*2 + 右边
        • 在缩小浏览器时，出现布局混乱。

     

      • 浮动实现        不推荐使用
        • 左边盒子与中间盒子 float: left;
        • 右边的盒子 float: right;
        • 如果有文字出现，则出现布局混乱。
      • 圣杯布局        要求能手写
        • 需求：
          • 两边固定，中间自适应
          • middle 内容先加载         // 中间盒子写在最上边
          • 等高布局（圣杯布局未实现，即文字过多时溢出，覆盖在其他元素的上方）
        • 编写步骤
          • 有头，有尾，有内容，middle 内容先加载
          • 浮动让三者在一行
            • 解决高度塌陷
            • 中间盒子加 100%;    // 其实三者还是在一行，只是被中间盒子挤到了下面
          • 操作 左边盒子的 margin-left: -100%;    // 参照父级元素
            •  
          • 操作 右边盒子的 margin-left: -200px;    // 左移自身的宽度
            •  
          • 给 outer 衣服 加 padding: 0 200px;    // 切记不是给 中间的盒子加 padding，且 outer 不可以设置宽度
            •  
          • 用相对定位使 左右盒子 归位 left，right     设置 -200px
            •  
          • <body> 设置 min- ;    // 左边*2 + 右边 

     

      • 等高布局
        • 与圣杯布局的区别：
          • 高度塌陷：给 outer 衣服 使用 overflow: hidden;    // 开启 BFC解决高度塌陷；  子元素从父元素溢出
          • 给 left，middle，right 设置 padding-bottom: 10000px;，margin-bottom: -10000px;    // 溢出已经被 overflow 解决了
        • 即 圣杯布局的溢出问题解决后，就是等高布局 

     

      • 双飞翼布局        // 坑： 是 middle_box 浮动
        • 有头，有尾，有内容，middle 盒子先加载
        • 浮动让三者在一行
          • 解决高度塌陷
          • 中间盒子加 100%;    // 其实三者还是在一行，只是被中间盒子挤到了下面
        • 操作 左边盒子的 margin-left: -100%;    // 参照父级元素
        • 操作 右边盒子的 margin-left: -200px;    // 左移自身的宽度
        • 在 middle 内部 inner 嵌套一个 div ，然后给 inner 加左右外边距 margin
        •  
        • <body> 设置 min- ;    // 左边*2 + 右边 

     

      • 圣杯布局与双飞翼布局的对比
        • 相同点
            • 都是把 middle 盒子放在最前面，优先加载
            • 都是让三列浮动，使三者处于同一行
            • 都是使用负外边距形成三列布局

     

        • 不同点，处理 middle 内容显示
            • 圣杯布局，给父元素 outer 加左右内边距，然后加定位来使 左右盒子 归位
            • 双飞翼布局，在 middle 内部 inner 嵌套一个 div ，然后给 inner 加左右外边距 margin 

    5. 绝对定位模拟固定定位

    • 需求： 兼容IE6 及一些低版本的浏览器不支持 fixed
    • document 的滚动条移动 导致 初始包含块移动。
      • 为了使初始包含块不动，document 的滚动条就不能动
        • 禁止 <html> 作用 document 出现滚动条
        • 即 给 <html> 设置 overflow: hidden;    // document 的滚动条被hidden

     

      • 为了出现滚动条，正常浏览，给 <body> 设置 overflow: auto; 
        • 此时滚动条的滑动，与初始包含块互不影响。

     

      • body 必须设置 100%，是为了出现滚动条，否则 body 的高度 将被内容撑开

     

    6. 文本样式   

    • text-transform: ;    // 控制元素中的字母（transform 变形）
      • capitalize
      • lowercase
      • uppercase

     

    • letter-spacing: ;    // 字符与字符之间的距离，对中英文都有影响

     

    • word-spacing: ;    // 单词与单词之间的距离，中文无影响。

     

    • white-space: ;    // 控制文本是否换行
      • white-space: nowrap;    // 文本永不换行

     

    • 使用省略号的四个条件
      • 必须是 块元素 或者是 行内块元素 display: ;
      • 文本必须设置 white-space: nowrap; 永不换行
      • 多余文本截掉 overflow: hidden;
      • 设置省略号 text-overflow: ellipsis;    // 默认值为 "" 无省略号

     

    7. 行高 line-height: ;

    行高高度 = 字体大小 + 行间距

    行高区域 = 字体区域 + 上一半行间距高度 + 下一半行间距高度

    浏览器 默认字体大小 16px

    浏览器 支持最小字体 12px

    chrome 浏览器 默认行高 21px    （大多以 chrome 为标准）

    FireFox 浏览器 默认行高 22px

    IE 浏览器 默认行高 18px

    • 文字垂直居中
    • 行高可以设置倍数    // 参照文本字体大小

     

    8. 典型的 inline-block 行内块元素        inline-block 实质上是 inline 元素

        • input
          •  
        • img
          • 图片下方 会产生若干像素留白
            • 改变默认基线的位置：
              • font-size    字体大小的改变
              • line-height    行高的改变
          • 基线    （中文无基线问题）    英文字母文本下方边界，由四线格衍生
        • button

     

    • inline-block 元素由于基线造成的底部缝隙    
      • vertical-align:        // 控制基线的位置（四线格的厚度），只能给 inline-block 元素设置，其他类型的元素设置不生效
        • baseline;    默认值 baseline 基线
        • bottom;    // 此方法会使文本上移一点点
        • top;      // 会使文本下移到基线以下
        • middle;       在字符的中部 ， 即 文本分成上下一半  

     移动的是文字，基线是固定的。

      • 最终解决方案：
        • display: inline-block;
        • vertical-align: middle;

     

    • inline-block 元素之间的 间隔    （由代码行的 换行造成）
      • 给父元素设置 font-size: 0;    // 换行符大小为 0     不仅解决了 间隔，还解决了底部留白

     

      • 给 inline-block 元素 设置浮动 float: ;        （定位也可以，很少使用）
        • 记得解决父元素高度塌陷

     

    9. 居中总结

    • inline 行内元素居中
      • 文本水平居中    text-align: center;
      • 文本垂直居中    line-height:    ;

     

    • inline-block 行内块元素
      • 父元素
        • 子元素水平居中 text-align: center;
        • 子元素垂直居中ling-height:    ;
      • inline-block 元素（子元素）
        • display: inline-block;
        • vertical-align: middle;

     

    • 块元素（三个实现方式）
      • 第一种实现方式
        • 父元素
          • position: relative;
        • 块元素
          • position: absolute;
          • top: 50%;
          • left: 50%;
          • margin-top:   -50% ;        // 不适用宽高不确定的元素
          • margin-left:    -50%;        // 不适用宽高不确定的元素

     

      • 第二种实现方式
        • 父元素
          • position: relative;
        • 块元素
          • position: absolute;
          • top: 0;
          • left: 0;
          • bottom: 0;
          • right: 0;
          • margin: auto;    // 如果不加这个 auto，则 top 和 left 生效。
      • css3 实现第三种方式
        • 父元素
          • position: relative;
        • 块元素
          • position: absolute;
          • top: 50%;
          • left: 50%;
          • transform: translate(-50%, -50%);
      • 区别：
        • 如果当前元素，宽高固定的，则以上三种方案任意选择。
        • 如果当前元素的宽高不确定，则只能使用第三种方案。

     

    10. 如何给 定位元素 内的元素 设置宽度和高度

    • 直接写 width 和 height

     

    • 给元素开启绝对定位 position: absolute; 
      • top: 0;
      • left: 0;
      • bottom: 0;
      • right: 0;
      • 此时，当前元素的宽度和高度 = 定位的父元素的高度和宽度
        • 如果不想元素等于父元素了，可以按需求更改 top，left，bottom，right
        • 如果此时取消祖先元素的定位，则元素的大小等于初始包含块。

     

    • 让元素 浮动 float:
      • 此时，高度与宽度 由子元素的大小撑开

     

    11. BFC

    • Box
      • CSS 布局的基本单位（页面由若干 BOX 盒子组成）
      • 元素类型 和 display 决定了不同类型的 BOX
      • 不同类型的 BOX 参与不同的 Formatting Context 
      • 分为
        • block-leve box 块盒子
          • display 为 block，table，list-item 等的元素
          • 会参与 Block Formatting Context
        • inline-leve box 行内盒子
          • display 为 inline，inline-block，inline-table 的元素
          • 会参与 Inline Formatting Context

     

    • Formatting Context
      • W3C CSS2.1 的概念，一个决定如何渲染文档的容器。
      • 它是页面中的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
      • 常见的 Formatting Context
          • BFC  （Block Formatting Context）  规定 block 盒子的
          • IFC   （Inline Formatting Context） 规定 inline 盒子的

     

    • BFC
      • 块级格式化上下文
      • 它是一个独立的渲染区域，只有 块元素参与。
        • 规定了内部的 Block-leve Box 如何补救，并且与这个区域外部毫不相干
      • 这个属性是隐藏的，默认是关闭的
      • 当开启了元素的 BFC 以后，父元素就可以包含浮动的子元素（解决子元素浮动引起的父元素高度塌陷）。

     

    • BFC 布局规则
      • 内部的 Box 会在垂直方向，一个接一个地放置。
      • 内部的 Box 垂直方向的距离由 margin 决定。。。属于同一个 BFC 的内部的两个相邻的 Box 会发生垂直外边距重叠。
      • BFC 的区域不会与 float Box 重叠
        • 单纯用 BFC 实现 两列布局。    （左边固定，右边自适应） 
          • #outer {
    width: 500px;
    margin: 100px auto;
    border: 10px solid #000;
}

/* float 盒子 */
#left_box {
    float: left;
    width: 100px;
    background: skyblue;
}

/* BFC区域 */
#right_box {
    overflow: hidden;
    background: yellow;
}
    
            <body>
    <div id="outer">
        <div id="left_box"></div>
        <div id="right_box"></div>
    </div>
</body>
      • BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之亦如此。
      • BFC 只控制子元素，而不能控制子元素内的元素。

     

    • BFC 什么时候出现（哪些元素会生成 BFC）？
      • <html> 根元素。
      • float 属性不为 none 的元素。
      • position: absolute;    开启了绝对定位的元素。
      • position: fixed;    开启了固定定位的元素。
      • overflow 属性不为默认值 visible 的元素。

     

    • IE 6 / 7 下没有 BFC，而类似的，有 haslayout
      • zoom 控制元素缩放，除了 normal以外的任何值可以开启 haslayout
      • float: left / right;
      • display: inline-block;
      • position: absolute;
      • width / height
    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    1. cocos creator 连接服务端
    cocos creator 中的粒子效果
    cocos creator
    5.4 笔记
    事后诸葛亮
    PHP之魔术方法
    结队编程--作业一
    团队作业9——事后分析（Beta版本）
    团队作业8——测试与发布（Beta阶段）
    Beta版本冲刺计划
  • 原文地址：https://www.cnblogs.com/tianxiaxuange/p/9854600.html
Copyright © 2020-2023  润新知