前端面试-CSS面试题-1

CSS面试题

  1. BFC

    BFC 全称为块级格式化上下文 (Block Formatting Context) 。它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，
Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局，可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个
容器里box的布局与这个容器外的box毫不相干。

**触发条件：**

* 根元素或其它包含它的元素
* 浮动元素 (元素的 float 不是 none)
* 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
* 内联块 (元素具有 display: inline-block)
* 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
* 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
* 具有overflow 且值不是 visible 的块元素
* 弹性盒（flex或inline-flex）
* `display: flow-root`
* `column-span: all`

#### BFC的约束规则

* 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）
* 处于同一个BFC中的元素相互影响，可能会发生外边距重叠
* 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
* BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
* 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
* 浮动盒区域不叠加到BFC上

**BFC可以解决的问题**

* 垂直外边距重叠问题
* 去除浮动
* 自适用两列布局（`float + overflow`）

  2. 水平居中

    * 元素为行内元素，设置父元素`text-align:center`
* 如果元素宽度固定，可以设置左右`margin`为`auto`;
* 绝对定位和移动: `absolute + transform`： position: absolute;left: 50%;transform: translateX(-50%);
* 使用`flex-box`布局，指定`justify-content`属性为center
* `display`设置为`tabel-cell`

  3. 垂直居中

    * 将显示方式设置为表格，`display:table-cell`,同时设置`vertial-align：middle`
* 使用`flex`布局，设置为`align-item：center`
* 绝对定位中设置`bottom:0,top:0`,并设置`margin:auto`
* 绝对定位中固定高度时设置`top:50%，margin-top`值为高度一半的负值
* 文本垂直居中设置`line-height`为`height`值
* `inline-block`兄弟元素：通过在父元素中插入一个`inline-block`元素，并设置其垂直对齐方式为`middle`来实现垂直居中
* 表格布局：将父元素的display属性设置为table，并将子元素的display属性设置为table-cell，然后使用vertical-align属性将子元素垂直居中

  4. 层叠上下文

    当两个元素为正常流时，默认情况下后一个元素比前一个元素层级高，并且允许后面的元素透上来。
如果两个元素是块级元素，文字比背景层级高（因此不管是否设置背景文字始终会透上来）。
如果是行内或行内块，背景比文字层级高（因此只要设置背景，后一个元素将透不上来）。

**创建层叠上下文的层级比其他元素高**

触发条件：

* 根层叠上下文(`html`)
* `position`
* `css3`属性

  * `flex`
  * `transform`
  * `opacity`
  * `filter`
  * `will-change`
  * `webkit-overflow-scrolling`

  5. flex布局

    • 采用Flex​​​布局的元素，称为flex​​​容器container​​​
    • 它的所有子元素自动成为容器成员，称为flex​​​项目item​​​

    ​​

    容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction​​​来决定主轴的方向

    每根轴都有起点和终点，这对于元素的对齐非常重要

    关于flex常用的属性，我们可以划分为容器属性和容器成员属性

    容器属性有：

    • ​flex-direction: row | row-reverse | column | column-reverse;​​​ 决定主轴的方向(即项目的排列方向)

      • ​row​​​（默认值）：主轴为水平方向，起点在左端
      • ​row-reverse​​​：主轴为水平方向，起点在右端
      • ​column​​​：主轴为垂直方向，起点在上沿。
      • ​column-reverse​​​：主轴为垂直方向，起点在下沿 ​

    • ​flex-wrap: nowrap | wrap | wrap-reverse;​​​ 弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap​​​决定容器内项目是否可换行

      • ​nowrap​​​（默认值）：默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩
      • ​wrap​​​：换行，第一行在下方
      • ​wrap-reverse​​​：换行，第一行在上方

    • ​flex-flow: <flex-direction> || <flex-wrap>;​​​ 是flex-direction​​​属性和flex-wrap​​​属性的简写形式，默认值为row nowrap​​​

    • ​justify-content: flex-start | flex-end | center | space-between | space-around;​​​ 定义了项目在主轴上的对齐方式

      • ​flex-start​​​（默认值）：左对齐
      • ​flex-end​​​：右对齐
      • ​center​​​：居中
      • ​space-between​​​：两端对齐，项目之间的间隔都相等
      • ​space-around​​​：两个项目两侧间隔相等 ​

    • ​align-items: flex-start | flex-end | center | baseline | stretch;​​​ 定义项目在交叉轴上如何对齐

      • ​flex-start​​​：交叉轴的起点对齐
      • ​flex-end​​​：交叉轴的终点对齐
      • ​center​​​：交叉轴的中点对齐
      • ​baseline​​​: 项目的第一行文字的基线对齐
      • ​stretch​​​（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

    • ​align-content: flex-start | flex-end | center | space-between | space-around | stretch;​​​ 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

      • ​flex-start​​​：与交叉轴的起点对齐
      • ​flex-end​​​：与交叉轴的终点对齐
      • ​center​​​：与交叉轴的中点对齐
      • ​space-between​​​：与交叉轴两端对齐，轴线之间的间隔平均分布
      • ​space-around​​​：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
      • ​stretch​​​（默认值）：轴线占满整个交叉轴 ​

    容器成员属性如下：

    • ​order: <integer>;​​​ 定义项目的排列顺序。数值越小，排列越靠前，默认为0​​​

    • ​flex-grow: <number>;​​​ 上面讲到当容器设为flex-wrap: nowrap;​​​不换行的时候，容器宽度有不够分的情况，弹性元素会根据flex-grow​​​来决定

      • 定义项目的放大比例（容器宽度>元素总宽度时如何伸展）
      • 默认为0​​​，即如果存在剩余空间，也不放大
      • 如果所有项目的flex-grow​​​属性都为1​​​，则它们将等分剩余空间（如果有的话） ​
      • 如果一个项目的flex-grow​​​属性为2​​​，其他项目都为1​​​，则前者占据的剩余空间将比其他项多一倍 ​
      • 弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow​​​是什么值都不会生效

    • ​flex-shrink: <number>; /* default 1 */​​​ 定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1​​​，即如果空间不足，该项目将缩小

      • 如果所有项目的flex-shrink​​​属性都为1​​​，当空间不足时，都将等比例缩小
      • 如果一个项目的flex-shrink​​​属性为0​​​，其他项目都为1​​​，则空间不足时，前者不缩小
      • 在容器宽度有剩余时，flex-shrink​​​也是不会生效的 ​

    • ​flex-basis: <length> | auto; /* default auto */​​​ 设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow​​​和flex-shrink​​​生效前的尺寸

      • 浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto​​​，即项目的本来大小，如设置了width​​​则元素尺寸由width/height​​​决定（主轴方向），没有设置则由内容决定
      • 当设置为0​​​的是，会根据内容撑开
      • 它可以设为跟width​​​或height​​​属性一样的值（比如350px​​​），则项目将占据固定空间

    • ​flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]​​​ 属性是flex-grow​​​, flex-shrink​​​ 和 flex-basis​​​的简写，默认值为0 1 auto​​​，也是比较难懂的一个复合属性

      • ​flex: 1 = flex: 1 1 0%​​​
      • ​flex: 2 = flex: 2 1 0%​​​
      • ​flex: auto = flex: 1 1 auto​​​
      • ​flex: none = flex: 0 0 auto​​​，常用于固定尺寸不伸缩
      • ​flex:1​​​ 和 flex:auto​​​ 的区别，可以归结于flex-basis:0​​​和flex-basis:auto​​​的区别
      • 当设置为0​​​时（绝对弹性元素），此时相当于告诉flex-grow​​​和flex-shrink​​​在伸缩的时候不需要考虑我的尺寸
      • 当设置为auto​​​时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑
      • 注意：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

    • ​align-self: auto | flex-start | flex-end | center | baseline | stretch;​​​ 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items​​​属性

      • 默认值为auto​​​，表示继承父元素的align-items​​​属性，如果没有父元素，则等同于stretch​​​ ​

    应用场景

    • ​flex​​​简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex​​​完成
    • 在移动端、小程序这边的开发，都建议使用flex​​​进行布局

  6. grid布局

    ​Grid​​​ 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列

    擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系

    ​​

    这与flex​​​一维布局不相同

    设置display:grid/inline-grid​​​的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法

    <div class="container">
    <div class="item item-1">
        <p class="sub-item"></p >
 </div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div> 
 
        @程序员poetry: 代码已经复制到剪贴板

    上述代码实例中，.container​​​元素就是网格布局容器，.item​​​元素就是网格的项目，由于网格元素只能是容器的顶层子元素，所以p​​​元素并不是网格元素

    这里提一下，网格线概念，有助于下面对grid-column​​​系列属性的理解

    网格线，即划分网格的线，如下图所示：

    ​​

    上图是一个 2 x 3​​​ 的网格，共有3​​​根水平网格线和4​​​根垂直网格线

    Grid 布局属性可以分为两大类

    • 容器属性
    • 项目属性

    关于容器属性有如下：

    • ​display​​​ 在元素上设置display：grid​​​ 或 display：inline-grid​​​ 来创建一个网格容器

      • ​display：grid​​​ 则该容器是一个块级元素
      • ​display: inline-grid​​​ 则容器元素为行内元素

    • ​grid-template-columns​​​ 属性，grid-template-rows​​​ 属性

      • ​grid-template-columns​​​ 属性设置列宽，grid-template-rows​​​ 属性设置行高
      .wrapper {
  display: grid;
  /*  声明了三列，宽度分别为 200px 200px 200px */
  grid-template-columns: 200px 200px 200px;
  grid-gap: 5px;
  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}

        @程序员poetry: 代码已经复制到剪贴板

      • 以上表示固定列宽为 200px 200px 200px​​​，行高为 50px 50px​​​

      • 上述代码可以看到重复写单元格宽高，通过使用repeat()​​​函数，可以简写重复的值

        • 第一个参数是重复的次数
        • 第二个参数是重复的值

      • 所以上述代码可以简写成

      .wrapper {
    display: grid;
    grid-template-columns: repeat(3,200px);
    grid-gap: 5px;
    grid-template-rows:repeat(2,50px);
  }

        @程序员poetry: 代码已经复制到剪贴板

      • 除了上述的repeat​​​关键字，还有：

        • ​auto-fill​​​：示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格

          • ​grid-template-columns: repeat(auto-fill, 200px)​​​ 表示列宽是 200 px​​​，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素

        • ​fr​​​：片段，为了方便表示比例关系

          • ​grid-template-columns: 200px 1fr 2fr​​​ 表示第一个列宽设置为 200px​​​，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3​​​ 和 2/3​​​

        • ​minmax​​​：产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。第一个参数就是最小值，第二个参数就是最大值

          • ​minmax(100px, 1fr)​​​表示列宽不小于100px​​​，不大于1fr​​​

        • ​auto​​​：由浏览器自己决定长度

          • ​grid-template-columns: 100px auto 100px​​​ 表示第一第三列为 100px​​​，中间由浏览器决定长度

    • ​grid-row-gap​​​ 属性， grid-column-gap​​​ 属性， grid-gap​​​ 属性

      • ​grid-row-gap​​​ 属性、grid-column-gap​​​ 属性分别设置行间距和列间距。grid-gap​​​ 属性是两者的简写形式
      • ​grid-row-gap: 10px​​​ 表示行间距是 10px​​​
      • ​grid-column-gap: 20px​​​ 表示列间距是 20px​​​
      • ​grid-gap: 10px 20px​​​ 等同上述两个属性

    • ​grid-template-areas​​​ 属性：用于定义区域，一个区域由一个或者多个单元格组成

      .container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a b c'
                        'd e f'
                        'g h i';
  }

        @程序员poetry: 代码已经复制到剪贴板
      • 上面代码先划分出9​​​个单元格，然后将其定名为a​​​到i​​​的九个区域，分别对应这九个单元格。
      • 多个单元格合并成一个区域的写法如下
      grid-template-areas: 'a a a'
                   'b b b'
                   'c c c';

        @程序员poetry: 代码已经复制到剪贴板
      • 上面代码将9​​​个单元格分成a、b、c​​​三个区域
      • 如果某些区域不需要利用，则使用"点"（.​​​）表示

    • ​grid-auto-flow​​​ 属性

      • 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
      • 顺序就是由grid-auto-flow​​​决定，默认为行，代表"先行后列"，即先填满第一行，再开始放入第二行 ​
      • 当修改成column​​​后，放置变为如下 ​

    • ​justify-items​​​ 属性， align-items​​​ 属性， place-items​​​ 属性

      • ​justify-items​​​ 属性设置单元格内容的水平位置（左中右），align-items​​​ 属性设置单元格的垂直位置（上中下）
      • 两者属性的值完成相同
      .container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

        @程序员poetry: 代码已经复制到剪贴板

      • 属性对应如下：

        • ​start​​​：对齐单元格的起始边缘
        • ​end​​​：对齐单元格的结束边缘
        • ​center​​​：单元格内部居中
        • ​stretch​​​：拉伸，占满单元格的整个宽度（默认值）
        • ​place-items​​​属性是align-items​​​属性和justify-items​​​属性的合并简写形式

    • ​justify-content​​​ 属性， align-content​​​ 属性， place-content​​​ 属性

      • ​justify-content​​​属性是整个内容区域在容器里面的水平位置（左中右），align-content​​​属性是整个内容区域的垂直位置（上中下）
      .container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

        @程序员poetry: 代码已经复制到剪贴板
      • 两个属性的写法完全相同，都可以取下面这些值：
      • ​start​​​ - 对齐容器的起始边框
      • ​end​​​ - 对齐容器的结束边框
      • ​center​​​ - 容器内部居中 ​
      • ​space-around​​​ - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
      • ​space-between​​​ - 项目与项目的间隔相等，项目与容器边框之间没有间隔
      • ​space-evenly​​​ - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
      • ​stretch​​​ - 项目大小没有指定时，拉伸占据整个网格容器 ​

    • ​grid-auto-columns​​​ 属性和 grid-auto-rows​​​ 属性

      • 有时候，一些项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格
      • 比如网格只有3​​​列，但是某一个项目指定在第5​​​行。这时，浏览器会自动生成多余的网格，以便放置项目。超出的部分就是隐式网格
      • 而grid-auto-rows​​​与grid-auto-columns​​​就是专门用于指定隐式网格的宽高

    关于项目属性，有如下：

    • ​grid-column-start​​​ 属性、grid-column-end​​​ 属性、grid-row-start​​​ 属性以及grid-row-end​​​ 属性

      • 指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
      • ​grid-column-start​​​ 属性：左边框所在的垂直网格线
      • ​grid-column-end​​​ 属性：右边框所在的垂直网格线
      • ​grid-row-start​​​ 属性：上边框所在的水平网格线
      • ​grid-row-end​​​ 属性：下边框所在的水平网格线
        <style>
    #container{
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    .item-1 {
        grid-column-start: 2;
        grid-column-end: 4;
    }
  </style>

  <div id="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
  </div>

        @程序员poetry: 代码已经复制到剪贴板
      • 通过设置grid-column​​​属性，指定1​​​号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线 ​

    • ​grid-area​​​ 属性

      • ​grid-area​​​ 属性指定项目放在哪一个区域
      item-1 {
  grid-area: e;
}

        @程序员poetry: 代码已经复制到剪贴板
      • 意思为将1​​​号项目位于e​​​区域

    • ​justify-self​​​ 属性、align-self​​​ 属性以及 place-self​​​ 属性

      • ​justify-self​​​属性设置单元格内容的水平位置（左中右），跟`justify-items属性的用法完全一致，但只作用于单个项目。
      • ​align-self​​​属性设置单元格内容的垂直位置（上中下），跟align-items​​​属性的用法完全一致，也是只作用于单个项目
      .item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

        @程序员poetry: 代码已经复制到剪贴板

      • 这两个属性都可以取下面四个值。

        • ​start​​​：对齐单元格的起始边缘。
        • ​end​​​：对齐单元格的结束边缘。
        • ​center​​​：单元格内部居中。
        • ​stretch​​​：拉伸，占满单元格的整个宽度（默认值）

    应用场景

    Grid是一个强大的布局，如一些常见的 CSS 布局​​​，如居中​​​，两列布局​​​，三列布局​​​等等是很容易实现的

    ​​

    总体兼容性还不错，但在 IE 10​​​ 以下不支持

    目前，Grid​​布局在手机端支持还不算太友好

  7. 页面导入样式时，使用link和@import有什么区别

    • ​link​​属于HTML​​标签，而@import​​是css​​提供的；
    • 页面被加载时，link​​会同时被加载，而@import​​引用的css会等到页面被加载完再加载；
    • ​@import​​只在IE5​​以上才能识别，而link​​是XHTML​​标签，无兼容问题；
    • ​link​​方式的样式的权重高于@import​​的权重。

  8. property 和 attribute 区别

    • ​property​​是DOM​​中的属性，是JavaScript​​里的对象;

    • ​attribute​​是HTML​​标签上的特性，它的值只能够是字符串;

      简单的理解就是：Attribute​​就是DOM​​节点自带的属性，例如html​​中常用的id​​、class​​、title​​、align​​等；而Property​​是这个DOM​​元素作为对象，其附加的内容，例如childNodes​​、firstChild​​等。

  9. position设置

    首先，使用position​​的时候，应该记住一个规律是‘子绝父相’。

    ​relative​​（相对定位）： 生成相对定位的元素，定位原点是元素本身所在的位置；

    ​absolute​​（绝对定位）：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position​​设置为absolute​​或者relative​​的父元素的左上角为原点的。

    ​fixed​​ （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。

    ​static​​：默认值。没有定位，元素出现在正常的流中（忽略 top​​, bottom​​, left​​, right​​、z-index​​ 声明）。

    ​inherit​​：规定从父元素继承 position​​ 属性的值。

    更新一个属性

    ​sticky​​: (新增元素，目前兼容性可能不是那么的好)，可以设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可。

    注意：

    • 使用sticky​​时，必须指定top、bottom、left、right4个值之一，不然只会处于相对定位；
    • ​sticky​​只在其父元素内其效果，且保证父元素的高度要高于sticky​​的高度；
    • 父元素不能overflow:hidden​​或者overflow:auto​​等属性。

  10. 纯CSS绘制三角形

    1.首先保证元素是块级元素；2.设置元素的边框；3.不需要显示的边框使用透明色

    css: 
    * {margin: 0; padding: 0;}
    .content {
        width:0;
        height:0;
        margin:0 auto;
        border:50px solid transparent;
        border-top: 50px solid pink;
    }

html: 
    <div class="content"></div>

  11. display：inline-block出现间隙

    - 有空格时候会有间隙， 可以删除空格解决；
- `margin`正值的时候， 可以让`margin`使用负值解决；
- 使用`font-size`时候，可通过设置`font-size:0`、`letter-spacing`、`word-spacing`解决；

  12. 什么是外边距重叠？重叠结果是什么

    首先，外边距重叠就是 `margin-collapse`。相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距。

折叠结果遵循下列计算原则：

- 两个相邻的外面边距是正数时，折叠结果就是他们之中的较大值；
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值；
- 两个外边距一正一负时，折叠结果是两者的相加的和

  13. 隐藏元素方式

    - `visibility: hidden;` 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；
- `opacity: 0;``CSS3`属性，设置0可以使一个元素完全透明；
- `position: absolute;` 设置一个很大的 left 负值定位，使元素定位在可见区域之外；
- `display: none;` 元素会变得不可见，并且不会再占用文档的空间；
- `transform: scale(0);` 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留；
- `<div hidden="hidden">` `HTML5`属性,效果和`display:none;`相同，但这个属性用于记录一个元素的状态；
- `height: 0;` 将元素高度设为 0 ，并消除边框；
- `filter: blur(0);` `CSS3`属性，括号内的数值越大，图像高斯模糊的程度越大，到达一定程度可使图像消失`（此处感谢小伙伴支持）`；

  14. position，display，float，都设置了，如何设置

    有点类似于优先机制。`position`的值-- `absolute/fixed`优先级最高，有他们在时，`float`不起作用，`display`值需要调整。`float`或者`absolute`定位的元素，只能是块元素或者表格。

  15. 盒子模型

    有两种，IE盒子模型、W3C盒子模型；
    盒模型：内容(content)、填充(padding)、边框(border)、边界(margin) ；
    区 别： IE的content部分把border和padding`计算了进去;

    盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)
    IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
    标准(W3C)盒模型：元素宽度 = width + padding + border + margin
    怪异(IE)盒模型：元素宽度 = width + margin
    标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高
    box-sizing 常用的属性有哪些？分别有什么作用
    box-sizing属性用于控制元素的盒模型类型，常用的属性值有：
    content-box：默认值，使用标准的W3C盒模型，元素的宽度和高度仅包括内容区域（content），不包括填充、边框和外边距。
    border-box：使用怪异的IE盒模型，元素的宽度和高度包括内容区域（content）、填充（padding）和边框（border），但不包括外边距（margin）。即元素的宽度和高度指定的是内容区域加上填充和边框的总宽度和高度。
    inherit：继承父元素的box-sizing属性值。
    通过设置不同的box-sizing属性值，可以控制元素的盒模型类型，进而影响元素的布局和尺寸计算。使用border-box可以更方便地处理元素的宽度和高度，特别适合响应式布局和网格系统的设计

  16. 如何实现响应式布局

    通过媒体查询检测屏幕尺寸，为了移动端处理头部必须有meta声明viewport

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

    • 媒体查询

      CSS3通过媒体查询，来适配不同媒体条件

      @media screen and (max-width: 1920px) { ...}

    • VM/VW

    • rem

    • 百分比

  17. 两栏布局

    <div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>


    利用float + margin实现
.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  margin-left: 200px;
  background-color: red;
}
利用float + overflow实现
.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  overflow: hidden;
  background-color: red;
}
使用flex布局
.box {
  height: 200px;
  display: flex;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: blue;
}

.box-right {
  flex: 1; // 设置flex-grow属性为1，默认为0
  background-color: red;
}

  18. 三栏布局

    <div class="wrap">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

    .wrap {
  width: 100%;
  height: 200px;
}
.wrap > div {
  height: 100%;
}
/* 方案1：两边使用 float，中间使用 margin */
.left {
  width: 120px;
  float: left;
}
.right {
  float: right;
  width: 120px;
}
.center {
  margin: 0 120px; 
}
/* 方案2：两边使用 float，中间使用 calc */
.left {
  width: 120px;
  float: left;
}
.right {
  float: right;
  width: 120px;
}
.center {
  width: calc(100% - 240px);
  margin-left: 120px;
}
/* 方案3：flex实现 */
.wrap {
  display: flex;
}
.left {
  width: 120px;
}
.right {
  width: 120px;
}
.center {
  flex: 1;
}
/* 方案4：grid网格布局 */
.wrap {
  display: grid;
  width: 100%;
  grid-template-columns: 300px auto 300px;
}
.left {
  background: coral;
}
.right {
  background: lightblue;
}
.center {
  background: #555;
}
.left,.right,.center {
  height: 100px;
}

  19. 文本溢出处理

    • 单行文本

      单行文本溢出* 涉及的css属性有：

      • ​text-overflow​：规定当文本溢出时，显示省略符号来代表被修剪的文本

      • ​white-space​：设置文字在一行显示，不能换行

      • ​overflow​：文字长度超出限定宽度，则隐藏超出的内容

      • ​overflow​设为hidden​，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略

      • ​white-space:nowrap​，作用是设置文本不换行，是overflow:hidden​和text-overflow：ellipsis​生效的基础

      • ​text-overflow​ 属性值有如下

        • ​clip​：当对象内文本溢出部分裁切掉
        • ​ellipsis​：当对象内文本溢出时显示省略标记（...）

      • ​text-overflow​只有在设置了overflow:hidden​和white-space:nowrap​才能够生效的

      <style>
    p{
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >

    • 多行文本

      基于行数截断：纯css实现也非常简单，核心的css代码如下：* -webkit-line-clamp: 2​：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit​属性）

      • ​display: -webkit-box​：和1结合使用，将对象作为弹性伸缩盒子模型显示
      • ​-webkit-box-orient: vertical​：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
      • ​overflow: hidden​：文本溢出限定的宽度就隐藏内容
      • ​text-overflow: ellipsis​：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

‍

posted @ 2024-03-16 16:39  black-world  阅读(20)  评论(0)    收藏  举报