CSS奇淫技巧一网打尽--面试点

浦东大花菜
187 阅读13分钟

本文集中梳理一下那些CSS中容易被问到的面试点

Chrome小于12px的字体

其实可以通过修改Chrome的默认设置，设置成允许小于12px的字体，而我们在实际项目中，不能奢求用户更改浏览器设置

scale缩放

使用缩放transform:scale()，使用较为广泛

优点：单行、多行文本都可使用
缺点：只是视觉效果变小，并不会改变盒子的实际占位，在对齐其他盒子时不太友好

文本
文本嵌套块标签，这是因为缩放只对有宽高的标签有效，缩放的时候也是将标签一起缩放，而不仅仅是缩放文本，所以如果使用span等行内标签时，还需要将行内标签进行元素转换为块元素（display:block;）

font-size：12px； 给文本设置字体12px，并设置缩放值为10/12=0.83333，也就是transform:scale(0.83)；如果要设置8px，那就是8/12=0.66666

transform-origin：0 0； 默认缩放中心点是在盒子的正中心，所以如果我们需要文本左对齐，就需要改变中心点，也就是transform-origin：0 0；该值有两个参数值，第一个是水平方位值，第二个是垂直方位值，对应的如果需要右对齐、或者是有缩进，那就改变对应的参数值即可。

white-space: nowrap; 文本进行缩放后，并不会改变其原来盒子的大小，只是视觉上改变了大小，也就是说如果文本有换行的时候，它进行缩放后仍然是折行显示，这显然不符合我们要求，所以我们还需要强制文本在一行显示，也就是 white-space: nowrap;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 30px;
            margin-bottom: 5px;
            background: rgb(206, 151, 151);
        }
        .box1 {
            font-size: 12px;
        }
        .box2 {
            font-size: 10px;
            transform: scale(0.83333);
            transform-origin: 0 0;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="box1">我是正常的12px的文字大小 Hello world!</div>
    <div class="box1">我是正常的12px的文字大小 Hello world!</div>
    <div class="box2">我是正常的10px的文字大小 Hello world!</div>
    <div class="box2">我是正常的10px的文字大小 Hello world!</div>
</body>
</html>

svg

使用SVG 矢量图设置text
优点： 1px-12px任意字号均可设置，可对设计界面进行对齐调整
缺点：不支持多行文本

  • 在svg包含text标签，给svg设置宽高，文本内容写在text标签中； 因为svg是矢量图的概念，也就是说svg其实是一个图片，给图片内容进行缩放。实际的文本字号大小由text标签设置生效，但内容显示多少要看svg设置的宽高是多少，超出区域外的内容不会显示。

  • text标签的x y值这里必须用到的； text的x和y值默认为0，x值表示文字左下角开始的x坐标；y值表示文字左下角开始的y坐标，一般文本显示都是左对齐，所以x值为0，y值为字号大小。当然，如果是右对齐或者居中对齐的x y的值则需要另外设置对应的值。注意：x y的值是写在标签后面，并且无单位！

  • text文本设置样式的方法和普通标签设置的方法不一样，例如文本颜色填充是用fill设置，并不是color；如果需要文本缩进，或者是距离顶部有多宽的间隙，需要使用dx和dy； dx:文本在水平方向上移动的像素大小 dy:文本在垂直方向上移动的像素大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{font-size: 12px;}
    svg{width: 100px;height: 100px;background-color: chocolate;}
    svg text {font-size: 8px;}
  </style>
</head>
<body>
  <div>我是最小12px字体大小 hello world！</div>
  <svg>
    <!-- svg是矢量图的概念方法，这里的文本并不支持换行显示，即使你设置的svg的宽高足够大 -->
    <!-- text文本设置样式的方法和普通标签设置的方法不一样，例如文本颜色填充是用fill设置，并不是color -->
    <text x="0" y="8" >我是10px字体大小 hello world！</text>>
  </svg>
</body>
</html>

移动端1px边框

在移动端，css中的1px并不等于移动设备的1px，因为手机屏幕有不同的像素密度。window中的devicePixelRatio就是反应css中像素与真实像素的比例，也就是设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。所以造成了通过css设置1px，在移动端屏幕上会变粗

子元素替代

/* 下边框 */
.one-px-border2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid red;
    transform: scaleY(.5);
    transform-origin: left bottom;
}
/* 全边框 */
.one-px-border3:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid red;
    transform-origin: left bottom;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    /* box-sizing要设置为border-box，否则伪元素上下左右各会多1px */
    box-sizing: border-box;
    /* 设置圆角border等 */
    border-radius: 10px;
}

使用box-shadow模拟

.box-shadow-1px {
    width: 100px;
    height: 100px;
    box-shadow: inset 0px -1px 1px -1px red;
}

使用图片

切图，使用图片结合border-image进行css样式设置

vertical align

参考这边文章

画三角形

使用border

不设置宽高，用边框大小控制三角型大小，

<style>
    #triangle{
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: orangered skyblue gold yellowgreen;
    }
</style>

image.png

留下想要指向方向相反的边框设定，其他方向的边框设为transparent透明

.Up{
    width: 0;
    height: 0;
    border-top: 100px solid transparent; 
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 100px solid orangered;
}

使用liner-gradient

两色渐变，调为实色，一色透明，通过旋转 rotate 或者 scale，也能得到各种角度，不同大小的三角形

.second{
    background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

image.png

使用clip-path

裁剪多边型的方式，创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

<style>
    div{
        width: 100px;
        height: 100px;
        background: gold;
        clip-path: polygon(0 0, 0 100%, 100% 100%);
    }
</style>

利用字符

三角形形状的字符的十进制 Unicode 表示码

<div class="one">&#9658; </div>
<div class="two">&#9660; </div>
<div class="three">&#9650; </div>
<div class="four">&#8895; </div>
<div class="five">&#9651; </div>

image.png

flex: 1

flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写

flex：1 即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间

flex-grow

flex-grow：定义项目的的放大比例； • 默认为0，即 即使存在剩余空间，也不会放大； • 所有项目的flex-grow为1：等分剩余空间（自动放大占位）； • flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍

flex-shrink

flex-shrink：定义项目的缩小比例； • 默认为1，即 如果空间不足，该项目将缩小； • 所有项目的flex-shrink为1：当空间不足时，缩小的比例相同； • flex-shrink为0：空间不足时，该项目不会缩小； • flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

flex-basis

flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值 • 默认值为auto，即 项目原本大小； 设置后项目将占据固定空间

居中

水平居中的 margin：0 auto;

关于这个，大家也不陌生做网页让其居中用的比较多,前提是父元素宽度确定 这个是用于子元素上的，前提是不受float影响

<style>
  *{
      padding: 0;
      margin: 0;
  }
      .box{
          width: 300px;
          height: 300px;
          border: 3px solid red;
          /*text-align: center;*/
      }
      img{
          display: block;
          width: 100px;
          height: 100px;
          margin: 0 auto;
      }
  </style>
<!--html-->
<body>
  <div class="box">
      ![](img1.jpg)
  </div>
</body>

水平居中 text-align：center；

img的display：inline-block；类似一样在不受float影响下进行 实在父元素上添加效果让它进行水平居中

<style>
  *{
      padding: 0;
      margin: 0;
  }
      .box{
          width: 300px;
          height: 300px;
          border: 3px solid red;
          text-align: center;
      }
      img{
          display: inline-block;
          width: 100px;
          height: 100px;
          /*margin: 0 auto;*/
      }
  </style>
<!--html-->
<body>
  <div class="box">
      ![](img1.jpg)
  </div>
</body>

水平垂直居中（一）定位和需要定位的元素的margin减去宽高的一半

这种方法的局限性在于需要知道需要垂直居中的宽高才能实现，经常使用这种方法

<style>
  *{
      padding: 0;
      margin: 0;
  }
  .box{
      width: 300px;
      height: 300px;
      background:#e9dfc7; 
      border:1px solid red;
      position: relative;
  }
  img{
      width: 100px;
      height: 150px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -75px;
      margin-left: -50px;
  }
</style>
<!--html -->
<body>
<div class="box" >
  ![](2.jpg)
</div>
</body>

水平垂直居中（二）定位和margin:auto;

这个方法也很实用，不用受到宽高的限制,也很好用

<style>
  *{
      padding: 0;
      margin: 0;
  }
  .box{
      width: 300px;
      height: 300px;
      background:#e9dfc7; 
      border:1px solid red;
      position: relative;
  }
  img{
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
  }
</style>
<!--html -->
<body>
<div class="box" >
  ![](3.jpg)
</div>
</body>

水平垂直居中（三）绝对定位和transfrom

<style>
  *{
      padding: 0;
      margin: 0;
  }
  .box{
      width: 300px;
      height: 300px;
      background:#e9dfc7; 
      border:1px solid red;
      position: relative;
  }
  img{
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  }
</style>
<!--html -->
<body>
  <div class="box" >
      ![](4.jpg)
  </div>
</body>

水平垂直居中（四）diplay：table-cell

其实这个就是把其变成表格样式，再利用表格的样式来进行居中，很方便

<style>
  .box{
          width: 300px;
          height: 300px;
          background:#e9dfc7; 
          border:1px solid red;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
      }
      img{
          width: 100px;
          height: 150px;
          /*margin: 0 auto;*/  这个也行
      }
</style>
<!--html -->
<body>
  <div class="box" >
      ![](5.jpg)
  </div>
</body>

水平垂直居中（五）flexBox居中

<style>
  .box{
          width: 300px;
          height: 300px;
          background:#e9dfc7; 
          border:1px solid red;
          display: flex;
          justify-content: center;
          align-items:center;
      }
      img{
          width: 150px;
          height: 100px;
      }
</style>
<!--html -->
<body>
  <div class="box" >
      ![](6.jpg)
  </div>
</body>

清除浮动/BFC

浮动

浮动是一种特殊得css定位方式，通过设置float: left这种形式来设置；

  • 浮动使元素脱离文档流，但是绝对定位得完全脱离文档流不同。
  • 会影响页面布局，可以通过清除浮动来解决。同时浮动会造成父元素高度塌陷，影响和父元素同级的Dom布局，可以触发父元素的BFC解决。

布局影响

  • 块级元素认为浮动元素不存在
  • 浮动元素会影响行内元素
  • 浮动元素会间接影响了包含块的布局

布局特点

其中，浮动元素的摆放会遵循如下的规则：

  • 尽量靠上
  • 尽量靠左
  • 尽量一个挨着一个
  • 不能超出包含块，除非元素比包含块更宽
  • 不能超过所在行的最高点
  • 不能超过它前面浮动元素的最高点
  • 行内元素绕着浮动元素摆放：左浮动元素的右边和右浮动元素的左边会出浮动元素

示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style>
.border {
  border: 2px solid;
}
.common-div {
  width: 160px;
  height: 50px;
  background-color: red;
}
.float-red {
  width: 100px;
  height: 50px;
  background-color: #fcc;
  float: left;
}
.float-blue {
  width: 100px;
  height: 50px;
  background-color: #09c;
  float: left;
}
</style>
<body>
    <div class="border">
        <div class="float-red"></div>
        <div class="common-div"></div>
        <div class="float-blue"></div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</body>
</html>
  • 块级元素认为浮动元素不存在：红色的块级元素没有受到粉色浮动元素的影响，还展示在左上角的位置，但是被粉色元素盖住了左边的部分
  • 浮动元素会影响行内元素：文字部分被蓝色浮动元素影响，空出了蓝色浮动元素的部分
  • 浮动元素会间接影响了包含块的布局：浮动元素影响了文字部分吗，使之多出了一行，文字部分撑高了最外面的border框，所以间接影响了包含块的布局

清除浮动

为什么要清除

浮动元素脱离正常布局流，当一个容器内有浮动元素时，其高度可能会坍缩，当一个容器内全部都是浮动元素时，高度塌陷为 0

怎么清除

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both

clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来

如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。 优点：通俗易懂，方便 缺点：添加无意义标签，语义化差

2.使用after伪元素清除浮动
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>
3.触发BFC

父级添加overflow属性（父元素添加overflow:hidden）

BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC(block formatting context)块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局

简短的总结：BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响

BFC的布局规则

  • 内部的Box会在垂直方向一个接着一个地放置。
  • Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
  • 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
  • 计算BFC的高度时，浮动子元素也参与计算

触发BFC

  • 根元素（）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
  • overflow 值不为 visible 的块元素
  • contain 值为 layout、content 或 paint 的元素
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
  • 除了这些同时会触发BFC的操作，W3C 提供了一个属性设置 BFC：display:flow-root
avatar
文章
阅读
粉丝