【CSS】笔试题精讲

1、防止高度坍塌

问题描述：父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）
问题解决

1.1 给父元素添加声明overflow：hidden

优点：代码少、简单
缺点: 不能和position定位配合使用，超出的尺寸会被隐藏

• 其实display:table也行
• 因为BFC

1.2 在浮动元素下方添加空div，并给元素声明 clear：both

保险起见，再加height:0。清除个别块元素可能自带的height:16px;
缺点：需要添加多余的空标签并添加属性

1.3 万能方式:

box::after{
	content: "";
	display: block;
    clear: both;
	height: 0; /*为了清楚个别块元素自带的16px高度*/
}
1
2
3
4
5
6

1.4 父元素添加浮动

缺点: 可能产生新的浮动问题

• 因为BFC
• 其实，父元素定义display:table也行

2、BFC

2.1 BFC定义

• BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有块级元素参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。外部元素也不会影响这个渲染区域内的元素。
• 简单说：BFC就是页面上的一个隔离的独立渲染区域，区域里面的子元素不会影响到外面的元素。外面的元素也不会影响到区域里面的子元素。
• Box，盒子， 是 CSS 布局的对象和基本单位， 直观点说，就是一个页面是由很多个盒子区域组成。元素的类型和 display 属性，决定了这个盒子区域的类型。
  • 不同类型的盒子区域内的子元素， 会以不同的 Formatting Context（一个决定如何渲染文档的容器）方式渲染。
  • 块级元素盒子，display 属性为 block, list-item, table 的元素，会生成 块级元素渲染区域。并且以BFC( block fomatting context)方式渲染；
  • 行级元素盒子，display 属性为 inline, inline-table 的元素，会生成 行级元素渲染区域。并且以IFC( inline formatting context)方式渲染；
  • 所以，CSS中最常见的渲染方式有两大类：BFC和IFC

2.2 BFC的布局规则

• 默认，内部的块元素会在垂直方向，一个接一个地放置。每个块元素独占一行
• 块元素垂直方向的总距离由margin决定。属于同一个BFC的两个相邻块元素在垂直方向上的margin会发生重叠/合并。但水平方向的margin不会
• 左侧BFC渲染区域的margin，必须与右侧BFC渲染区域的margin相衔接，不能出现重叠
• BFC渲染区域不会与float浮动定义的元素区域重叠。
• BFC就是页面上的一个隔离的独立渲染区域，渲染区域里面的子元素不会影响到外面的元素。反之外面的元素也不会影响到渲染区域里边的子元素。
• 计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须算在内。

2.3 如何创建BFC

• float的值不是none
• position的值不是static或者relative。
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible

2.4 可以解决哪些问题?

避免垂直方向margin合并
问题: 垂直方向上，两个元素上下margin相遇，两元素的间的距离并不等于两个margin的和。而是等于最大的margin。小的margin会被大的margin吞并。
解决:

• 用一个外围块元素包裹下方元素
• 设置新外层元素overflow:hidden
• 变成一个BFC方式的渲染区域

结果：下方元素的margin-top受到新外层元素BFC渲染区域的阻隔，不会影响外部上方的元素的margin-bottom了。同理，外部上方元素的margin-bottom，因为在BFC渲染区域之外，所以，也无法影响其内部元素的margin-top了。

避免垂直方向margin溢出
问题：子元素设置margin-top，会超出父元素上边的范围，变成父元素的margin-top。而实际上，子元素与父元素之间，依然是没有margin-top的——效果不是想要的。
解决:

设置新外层元素overflow:hidden
变成一个BFC方式的渲染区域
结果：子元素的margin-top受到外层父元素BFC渲染区域的阻隔，不会影响父元素以外的区域了。子元素的margin-top，才真正成为子元素与父元素上边的间距

其实还可以

• 为父元素添加上边框，颜色设置为透明

• 用父元素的padding-top代替第一个子元素的margin-top

• 在父元素内第一个子元素之前添加一个空的

  • 用平级BFC渲染区域阻隔下方元素的margin-top

• 父元素::before{ content:“”; display:table; }

  • 用平级BFC渲染区域阻隔下方元素的margin-top
  • 自适应两栏布局

• 左固定，右自适应

  • .left{ float:left; width:固定宽 }
  • .right{overflow:hidden; …}

• 变成BFC渲染区域，就不会与float:left的左侧元素发生重叠了

• 防止高度坍塌

3、弹性布局

• 网页内容要可以随显示设备的大小而动态调整布局

• float属性，的确可以实现根据显示设备大小，自动换行显示。但是，浮动定位float提供的可控制的属性太少了，以至于难于随心所欲的控制布局。

  • 比如：多个元素浮动在一行中时，无法保证屏幕变小时，一行中的每个元素都自动等比例缩小。而是每个元素依然保持固定的宽度。就会导致，原本处在一行的元素，被挤压换行。

• 弹性布局就很好的解决了多种设备下自适应和灵活定制布局的目的

  • 弹性布局主要定义父元素中子元素的布局方式，让布局能适用多种情况提供最大灵活性

• 概念：

  • 容器

    • 父元素

  • 项目

    • 多个子元素

  • 主轴

    • 子元素排列方向上的轴

      • 默认从左向右

  • 交叉轴

    • 与主轴方向垂直的轴

      • 默认从上到下

• 父元素上设置的属性

  • display:flex

    • 父元素变成弹性布局渲染区域

  • flex-direction

    • 指定容器主轴的排列方向

      • row

        • 默认从左向右

      • row-reverse

        • 从右向左

      • column

        • 从上到下

      • column-reverse

        • 从下到上

  • flex-wrap

    • 当主轴排列不下所有元素时，是否自动换行

      • 默认nowrap

        • 父元素空间不够，也不换行！所有子元素项目自动等比缩小。

      • wrap

        • 当内容放不下时，自动换行，不缩小

  • flex-flow

    • flex-direction + flow-wrap的简写形式
    • 语法: flex-flow: flex-direction flex-wrap

  • justify-content

    • 定义项目在主轴上的对齐方式

    • 取值

      • flex-start

        • 以主轴起点对齐

          • 默认左对齐，从左向右排列

      • flex-end

        • 以主轴终点对齐

          • 默认右对齐，从右向左排列

      • center

        • 在主轴上居中对齐

      • space-between，表示两端对齐

        • 第一个元素紧贴最左边，最后元素紧贴最右边。中间多个元素在剩余空间中等间距排列

      • space-around，表示每个项目两端间距相同

        • 所有元素均分空白间距，包括第一个元素左边间距和最后一个元素右边间距，均是等距离分布

  • align-items

    • 定义所有子元素在交叉轴上的对齐方式

    • 取值

      • flex-start，表示让项目以交叉轴的起点方向对齐

        • 默认置顶对齐

      • flex-end，表示让项目以交叉轴的终点方向对齐

        • 默认置底对齐

      • center，表示让项目以交叉轴的中线居中对齐

        • 垂直方向居中对齐

      • baseline，表示让项目以交叉轴的基线对齐

        • 以内容文字的基线对齐

      • stretch，表示如果项目未设置尺寸，就让项目在交叉轴上占满所有空间

        • 所有子元素项，垂直方向拉伸，默认沾满高度

• 每个子元素项目可单独设置的属性

  • order

    • 专门定义项目在主轴上的排列顺序
    • 其值为整数数字，无需单位。
    • 值越小，越靠近起点；值越大，越靠近结尾，默认值都是0。

  • flex-grow

    • 专门定义项目的放大比例

    • 如果容器有足够的空间，项目可以放大

    • 其值为整数数字，无需单位。

    • 默认情况，项目不放大。

      • 默认值都是0

    • 取值越大，占据剩余的空间越多。

    • 取值都一样，则占据空间始终一样大

  • flex-shrink

    • 专门定义项目的缩小比例
    • 如果容器空间不足时，项目可以缩小。
    • 缩小的比例取决于flex-shrink的值。
    • 其默认值为1，表示空间不足时，则等比缩小。
    • 可改为0，表示不缩小。

  • align-self

    • 专门单独定义某一个项目在交叉轴上的对齐方式

    • 与align-items属性对比

      • align-items定义在父容器上约束所有项目的统一对齐方式
      • align-self定义在项目上，只约束当前所在的一个项目。

    • 其取值和align-items完全一样。只是多了一个auto值，表示继承父元素的align-items效果。

4、水平居中和垂直居中的总结

• 水平居中

  • 前提

    • 父元素必须是块级盒子容器

      • 不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的

        、

        、

        、

        、

        、

        、；段落标记的

        ；分隔线

        ---

        和一个特别的元素 (它只存在于列表元素

        的子一级)。

    • 父元素宽度必须已经被设定好

  • 场景1: 子元素是块级元素且宽度没有设定

    • 不存在水平居中一说，因为子元素是块级元素没有设定宽度，那么它会充满整个父级元素的宽度，即在水平位置上宽度和父元素一致

  • 场景2：子元素是行内元素，子元素宽度是由其内容撑开的

    • 这种情况下解决方案是给父元素设定text-align:center;

  • 场景3：子元素是块级元素且宽度已经设定

    • 给子元素添加margin:0 auto;

    • 通过计算指定父元素的padding-left或padding-right

      • 给父元素和子元素都设定了box-sizing:border-box
      • (父宽-子宽)/2

    • 计算得到子元素的margin-left或margin-right

      • 给父元素和子元素都设定了box-sizing:border-box
      • (父宽-子宽)/2

    • 通过子元素相对父元素绝对定位

      • 父相子绝

        • 子：left:50%; margin-left: -子宽一半
        • 子: left:50%; transform:translateX(-50%)

    • 弹性布局

      • 父

        • display:flex;
          flex-direction: row;
          justify-content:center;

• 垂直居中

  • 前提:

    • 父元素是盒子容器

  • 场景1：子元素是行内元素，高度是由其内容撑开的

    • 单行

      • 设定父元素的line-height为其高度来使得子元素垂直居中

    • 多行

      • 通过给父元素设定display:inline/inline-block/table-cell;vertical-align:middle来解决

  • 场景2：子元素是块级元素但是子元素高度没有设定

    • 解法1：通过给父元素设定display:inline/inline-block/table-cell; vertical-align:middle来解决

    • 解法2：flexbox

      • 父元素

        • display: flex;
          flex-direction: column;
          justify-content: center;

  • 场景3：子元素是块级元素且高度已经设定

    • 解法1：计算子元素的margin-top或margin-bottom

      • 给父元素和子元素都设定了box-sizing:border-box
      • (父高-子高)/2

    • 解法2：计算父元素的padding-top或padding-bottom

      • 给父元素和子元素都设定了box-sizing:border-box
      • (父高-子高)/2

    • 解法3：利用绝对定位，让子元素相对于父元素绝对定位

      • 父相子绝

        • 子元素宽已知

          • 子：top:50%; margin-top: -子高一半

        • 子元素宽未知

          • 子: top:50%; transform:translateY(-50%)

    • 解法4：利用flexbox

      • 父元素

        • display: flex;
          flex-direction: column;
          justify-content: center;

• 总结：垂直和水平方向同时居中

  • 父相子绝

    • 已知子元素宽高

      • top:50%; left:50%; margin-left:-子宽一半; margin-top:-子高一半

    • 未知子元素宽高

      • top:50%; left:50%; transform:translate(-50%, -50%)

  • 弹性布局

    • .son{
      display: flex;
      justify-content: center;
      align-items: center;
      }

5、简述 rpx、px、em、rem、%、vh、vw的区别

• 设备物理像素

  • pt

    • 屏幕宽/分辨率，其中每一小份就是1pt

• css像素

  • px

    • pc机大屏幕显示器，1px约等于0.76个物理像素

    • 手机小屏幕

      • 以iPhone6为标准，物理像素750，分辨率375
      • 1px=2pt

    • 所以，px也是一个相对单位

    • px是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。

    • 但是，因为手机屏幕大小不一，差异较大，所以，反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放。所以，移动端不要用px

    • 通常PC端大屏浏览器的网页，使用px单位较多

    • 移动端少用，因为px的长度相对固定，无法根据大小不一的移动端设备自适应改变大小

• rem

  • 以网页根元素元素上设置的默认字体大小为1rem

    • 默认1rem=16px

  • 用的多

  • 好处

    • 可以实现响应式布局了！
    • 响应式布局指的是元素大小能根据屏幕大小随时变化。
    • 因为 所有以rem为单位的位置、大小都跟着根元素字体大小而变化。
    • 所以只要在屏幕大小变化的时候改变根元素font-size就行了。

• em

  • 父元素的字体大小为1em

    • 用的不多

• rpx

  • 小程序专用

    • 以iPhone6为标准，物理像素750，分辨率375

    • 无论屏幕大小，都将屏幕分成750份，每份就是1rpx。

    • 1rpx=0.5px=1pt

    • 优点

      • 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

• vw/vh

  • CSS3 特性 vh 和 vw：
  • vh ，无论视口高度多少，都将视口高均分为100份，每1小份就是1vh，所以，也是相对单位，可随视口大小变化而自动变化。
  • vw ，无论视口宽度多少，都将视口宽均分为100份，每1小份就是1vw，所以，也是相对单位，可随视口大小变化而自动变化。
  • 所以vw和vh，本质就是%
  • 这里是视口指的是浏览器内部的可视区域大小

• %

  • 通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值
  • 子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位(默认定位)的父元素的高度
  • 子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位(默认定位的)父元素的宽度
  • 但是，绝对定位时，就不一定参照父元素的宽和高了。而是参照最近的定位元素的包含padding的宽和高
  • 因为%不总是相对于父元素的宽高或屏幕大小，所以，有坑，开发少用。

6、响应式布局的方式，几种，媒体查询原理

• 中每个属性的含义

  • viewport

    • 视口

      • 显示设备内部，真正实际可用于显示网页的区域大小

  • width

    • 视口宽

      • device-width

        • 等于物理设备宽

  • user-scalable

    • 是否允许用户手工缩放网页

  • initial-scale=1.0

    • 加载页面时，页面的缩放比例是1，表示不缩放，原网页大小展示

  • maximum-scale=1.0,minimum-scale=1.0

    • 允许用户缩放网页的最大缩放比例和最小缩放比例
    • 都是1，表示不允许用户使用过程中，中途缩放网页

• 5种响应式布局方式

  • flex布局

    • 优点: 代码简单，布局方便

    • 缺点

      • 如果中间有内容，缩到最小就不会在小了
      • 且左右侧的宽度变小了

  • 父相子绝

    • 优点

      • 结合使用media可以实现响应式布局

    • 缺点

      • 代码写法复杂，布局较繁琐
      • 如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧

  • grid布局

    • Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，

    • Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局

    • Grid布局远比 Flex布局强大。(不过存在兼容性问题)

    • 知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局!

    • 如何

      • 容器属性

        • grid-template-columns
          grid-template-rows

          • 规定共有几行，几列，每行，每列宽多少？

          • grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px

          • grid-template-columns:repeat(3,100px); //同上

          • 也可以固定格大小，然后优先占满整个宽度

            • grid-template-columns: repeat(auto-fill,100px);
            • .auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充

          • 也可以按份数规定列宽

            • fr，比例关系，fraction ，意为"片段”，表示某一行或列在总宽度和总高度中占的份数
            • grid-template-columns:repeat(4,1fr); // 宽度平均分成四等份
            • grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份 效果如下图

          • 还可以设置最小和最大的大小范围:

            • grid-template-columns: 1fr minmax(150px，1fr); // 第一个参数最小值,第二个最大值,表示第二列最小150px，最大1fr。

          • 还可以请浏览器自己决定长度

            • auto，表示由浏览器自己决定长度
            • grid-template-columns: 100px auto 100px;

          • 还可以定义网格线

            • 网格线．可以用方括号定义网格线名称，方便以后给盒子定位使用
            • grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];

        • column-gap和row-gap

          • 定义格与格之间的间距
          • 如果column-gap和row-gap间距一致，可简写为: gap:xxx

        • grid-auto-flow

          • 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列".即先填满第一行，再开始放入第二行(就是子元素的排放顺序)

          • grid-auto-flow： row

            • 先行后列

          • grid-auto-flow： column

            • 先列后行

        • justify-items(水平方向)/ align-items(垂直方向)

          • 设置单元格内容的水平和垂直的对齐方式

          • 值为:

            • start | end | center | stretch

          • 同时设置两个属性: 简写

            • place-items : start end； 这是两个属性的简写

        • justify-content (水平方向)/ align-content(垂直方向)

          • 设置整个内容区域（所有的项目的总和）的水平和垂直的对齐方式
          • 取值: start | end | center | stretch | space-around | space-between | space-evenly;

      • 项目属性

        • grid-column-start / grid-column-end grid-row-start / grid-row-end

          • 一句话解释，用来指定item的具体位置，根据在哪根网格线

          • grid-column-start:1;
            grid-column-end:3;

            • 表示从第一个网格线，跨到第三个网格线之前，也就是横跨1、2两列
            • grid-column: span 2;
              grid-column-end:3;
            • 简写: grid-column: 1 / 3;

          • grid-column-start:1;
            grid-column-end:3;
            grid-row-start:1;
            grid-row-end:3;

            • 跨两行，跨两列的方形区域
            • 简写: grid-area: 1 / 1 / 3 / 3

        • justify-self / align-self

          • 当前单元格内容的水平和垂直对齐方向

          • place-self

            • 同时设置一个单元格内容的水平和垂直方向对齐方式

    • https://www.jianshu.com/p/3762f214cd6f

  • float布局

    • 容易被挤压换行

  • 使用rem作单位，等比缩放

    • 首先，给根元素html设置一个字体大小
      然后，其他尺寸单位全部用 rem
      然后，监听屏幕的大小
      然后，根据屏幕的大小按比例改变根节点字体的大小
    • 因为 rem 的特性，其他的尺寸都是根据根节点字体的大小设定的，所以，根节点字体大小一变，其他所有尺寸都会按比例变大、或小。
    • 大部分浏览器的字体有个最小值：12px。也就是缩小到 12px 后，字体不会继续缩小。

• 媒体查询

  • 通过媒体查询来设置样式(Media Queries)是响应式设计的核心。

  • 它根据条件告诉浏览器如何为指定视图宽度渲染页面

  • 媒体类型

    • print（打印机）
      screen（所有屏幕设备的统称：各种电脑屏幕、各种手机屏幕、各种平板屏幕，主要使用的就是这个）
      all（所有媒体设备，默认值）
      speech（应用于屏幕阅读器等发声设备）

  • style

    • 在 style 标签中通过 media属性 可以设置样式使用的媒体设备。

    •   - 在 css文件/less文件 里也可以使用
      1

    • 多设备支持（，分隔）

      • 可以用 逗号分隔 同时支持多个媒体设备。
      • @import url(screen.css) screen,print;
      • @media screen,print {…}

    • 设备方向（orientation 属性）

      • 使用 orientation 属性可以定义设备的方向

      • orientation: landscape

        • 横屏，宽度>高度

      • orientation: portrait

        • 竖屏，高度>宽度

    • 查询条件

      • 可以使用不同条件限制使用的样式，条件表达式需要放在扩号中

      • 比如

        • 横屏显示
          宽度不能超过600px

          • @media screen and (orientation: landscape) and (max-width: 600px) {
            body {
            background: #8e44ad;
            }
            h1 {
            font-size: 3em;
            color: white;
            }
            }

        • 横屏显示或宽度不超过600px

          • @media screen and (orientation: landscape),
            screen and (max-width: 600px) {
            body {
            background: #8e44ad;
            }
            h1 {
            font-size: 3em;
            color: white;
            }
            }

        • 既不是横屏，宽度又不小于600时，才使用

          • @media not screen and (orientation: landscape) and (max-width:600px) {
            body {
            background: #8e44ad;
            }
            h1 {
            font-size: 3em;
            color: white;
            }
            }
          • not必须写在开头，表示后续条件都不满足，才能应用

    • 引入顺序

      • @import url(big.css) only screen and (min-width:1200px);
        @import url(medium.css) only screen and (min-width:900px);

        • 永远后一个
        • 因为后一个范围包含前一个范围，而且后一个样式会覆盖前一个的样式

    • 设备的划分情况：

      • 小于768的为超小屏幕（手机）
        768~992之间的为小屏设备（平板）
        992~1200的中等屏幕（桌面显示器）
        大于1200的宽屏设备（大桌面显示器）

    • 父容器版心的尺寸划分

      • 超小屏幕（手机，小于 768px）：设置宽度为 100%
      • 小屏幕（平板，大于等于 768px）：设置宽度为 750px
      • 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
      • 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

    • 响应式字体

      • rem是相对于根元素的，不要忘记重置根元素字体大小：
        html{font-size:100%;}
        完成后，你可以定义响应式字体：
        @media (min-width:640px){body{font-size:1rem;}}
        @media (min-width:960px){body{font-size:1.2rem;}}
        @media (min-width:1200px){body{font-size:1.5rem;}}
      • 一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。

7、sass的常用功能

• 变量

  • $font-stack: Helvetica, sans-serif;
    $primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

• 嵌套

  • nav {
    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

  li { display: inline-block; }

  a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  }
  }

  • 引用父级选择器"&"

    • a {
      font-weight: bold;
      text-decoration: none;
      &:hover { text-decoration: underline; }
      body.firefox & { font-weight: normal; }
      }

    • 无论CSS规则嵌套的深度怎样，关键字"&"都会使用父级选择器级联替换全部其出现的位置：

      • /===== SCSS =====/
        #main {
        color: black;
        a {
        font-weight: bold;
        &:hover { color: red; }
        }
        }

/===== CSS =====/
#main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover {
color: red;
}

	- "&"必须出现在复合选择器开头的位置，后面再连接自定义的后缀

		- /*===== SCSS =====*/
1
2
3

#main {
color: black;
&-sidebar { border: 1px solid; }
}

/===== CSS =====/
#main {
color: black; }
#main-sidebar {
border: 1px solid;
}

- 嵌套属性

	- /*===== SCSS =====*/
1
2
3

.demo {
// 命令空间后带有冒号:
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}

/===== CSS =====/
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }

• 引入

  • // _reset.scss
    html, body, ul, ol {
    margin: 0;
    padding: 0;
    }

// base.scss
@import ‘reset’;
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

• 混合

  • 混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，
  • 该特性在添加浏览器兼容性前缀的时候非常有用，
  • SASS目前使用@mixin name指令来进行混合操作。
  • @mixin border-radius($radius) {
    border-radius: $radius;
    -ms-border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    }

.box {
@include border-radius(10px);
}

• 继承

  • // 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
    %other-styles {
    display: flex;
    flex-wrap: wrap;
    }

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}

.message {
@extend %message-common;
}

.success {
@extend %message-common;
border-color: green;
}

.error {
@extend %message-common;
border-color: red;
}

.warning {
@extend %message-common;
border-color: yellow;
}

• 算术运算符

  • .container { width: 100%; }

article[role=“main”] {
float: left;
width: 600px / 960px * 100%;
}

aside[role=“complementary”] {
float: right;
width: 300px / 960px * 100%;
}

8、利用css构建三角形（正三角，倒三角，左/右三角）

• 上三角

  • #triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    }

• 下三角

  • #triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    }

• 左三角

  • #triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
    }

• 右三角

  • #triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
    }

• 左上三角

  • #triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    }

• 右上三角

  • #triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
    }

• 左下三角

  • #triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
    }

• 右下三角

  • #triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
    }

9、缩放

• 如何实现<12px的字

  • display:inline-block; /scale只能缩放行内块或块元素/
    -webkit-transform: scale(0.5); /定义2D缩放/
    -webkit-transform-origin:left top; /定义缩放源点为左上角/

• 0.5px的线如何实现

  • 问题:

    • .hr.half-px {
      height: 0.5px;
      }

      • 不同设备，不同浏览器差异较大

  • 解决:

    • .hr.scale-half {
      height: 1px;
      transform: scaleY(0.5);
      transform-origin: 50% 100%; /为了防止线模糊/
      }

  • 更好的解决: svg

    • .hr.svg {
      background: none;
      height: 1px;
      background: url(“data:image/svg+xml;utf-8, ”);
      }

    • 其中: svg图片是

  
  
  - 使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width=“1”，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，另外还可以使用svg的rect等元素进行绘制。

    - 但是在firefox挂了
    - 解决: 把svg转为base64
  
    	- .hr.svg {
  1
  2
  3
  4

  background: url(“data:image/svg+xml;utf-8, ”);
  background: url(“data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==”);
  }

    - 优点，可以利用svg画出各种图形的0.5px线条
  1