CSS_细节总结

2022-08-09 12:34:30

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 {
                width: 100%;

                padding-bottom: 50px;

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

            #footer {
                width: 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-width: ; // 左边*2 + 右边
  - 在缩小浏览器时，出现布局混乱。

- 浮动实现 不推荐使用
  - 左边盒子与中间盒子 float: left;
  - 右边的盒子 float: right;
  - 如果有文字出现，则出现布局混乱。

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

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

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

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

- 最终解决方案：
  - 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

码农公寓

相关文章