CSS面试

前言

近期学习东神老师课程，整理了一下前端面试题，分享给大家一起来学习。如有问题，欢迎指正！ 东神老师博客

一、防止高度坍塌

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）；

解决:

• 给父元素添加声明 overflow：hidden；
  【优点：代码少、简单；缺点: 不能和position定位配合使用，超出的尺寸会被隐藏】
  注：其实display:table也行，因为BFC；
• 在浮动元素下方添加空div，并给元素声明 clear：both，保险起见，再加height:0。
  清除个别块元素可能自带的height:16px;【缺点：需要添加多余的空标签并添加属性】
• 万能方式:

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

• 父元素添加浮动
  【缺点: 可能产生新的浮动问题】

二、BFC

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

• BFC定义
  

A、BFC(Block formatting context)直译为"块级格式化上下文"。
它是一个独立的渲染区域，只有块级元素参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。
外部元素也不会影响这个渲染区域内的元素。

B、简单说：
BFC就是页面上的一个隔离的独立渲染区域；
区域里面的子元素不会影响到外面的元素；
外面的元素也不会影响到区域里面的子元素；

C、Box，盒子， 是 CSS 布局的对象和基本单位，
直观点说，就是一个页面是由很多个盒子区域组成。元素的类型和 display 属性，决定了这个盒子区域的类型。

1. 不同类型的盒子区域内的子元素， 会以不同的 Formatting Context（一个决定如何渲染文档的容器）方式渲染。
2. 块级元素盒子，display 属性为 block, list-item, table 的元素，会生成 块级元素渲染区域。并且以BFC( block fomatting context)方式渲染；【inline-block: 既具有block的宽度高度特性又具有inline的同行特征；】
3. 行级元素盒子，display 属性为 inline, inline-block, inline-table 的元素，会生成 行级元素渲染区域。并且以IFC( inline formatting context)方式渲染；
4. 所以，CSS中最常见的渲染方式有两大类：BFC和IFC

总结BFC：（块级格式化上下文）
•独立渲染区域
•内部不影响外部，外部也不能入侵影响内部

• BFC的布局规则

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

• 如何创建BFC

1. float的值不是none；
2. position的值不是static或者relative。【absolute，fixed】
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex；
4. overflow的值不是visible 【hidden，auto，scroll】

• 可以解决哪些问题?

1. 避免垂直方向margin合并
   

**A、问题
垂直方向上，两个元素上下margin相遇，两元素的间的距离并不等于两个margin的和。 而是等于最大的margin。小的margin会被大的margin吞并。

**B、解决2种
(1)用一个外围块元素包裹下方元素，设置新外层元素overflow:hidden【变成一个BFC方式的渲染区域】
(2)父元素::before{ content:””; display:table}
【原理: display:table，在子元素之前形成平级的bfc渲染区域。
不允许子元素的margin进入::before范围内。
• 优点: 既不隐藏内容，又不添加新元素，又不影响高度。】

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

总结: 解决垂直方向margin合并
• Step1: 添加父元素包裹下方元素
• Step2: 
  • 父元素overflow:hidden
  • 父元素下第一个子元素前添加空<table>
  • 父元素padding代替子元素margin
  • 父元素+透明上边框
  • 父元素::before{ content:””; display:table }

2. 避免垂直方向margin溢出
   **A、问题
   子元素设置margin-top，会超出父元素上边的范围，变成父元素的margin-top。
   而实际上，子元素与父元素之间，依然是没有margin-top的——效果不是想要的。
   **B、解决共5种
   1设置新外层元素overflow:hidden；

变成一个BFC方式的渲染区域；
缺点：为如果父元素中部分自由定位的子元素，希望即使超出父元素范围，也能显示时，就冲突了。

**C、结果
子元素的margin-top受到外层父元素BFC渲染区域的阻隔，不会影响父元素以外的区域了。 子元素的margin-top，才真正成为子元素与父元素上边的间距

**D、其实还可以其他解决方法：

• 1为父元素添加上边框，颜色设置为透明（transparent）【原理: 这里不是bfc。而是因为边框本身可以阻隔margin溢出。• 缺点: 边框会增大父元素的实际大小，导致布局错乱。】
• 2用父元素的padding-top代替第一个子元素的margin-top【• 缺点: 对父元素高度有影响。 • 解决: 可以设置父元素box-sizing:border-box。】
• 3在父元素内第一个子元素之前添加一个空的【用平级BFC渲染区域阻隔下方元素的margin-top；】【原理: table的display属性默认相当于table，所以形成小的bfc渲染区域。其他元素的margin不能进入table范围内。就阻隔了margin向上溢出。 • 优点: 空table元素没有大小，不占用父元素控件。 • 缺点: 增加一个看不见的空元素，干扰查找元素】
• 4父元素::before{ content:""; display:table; }

总结: 解决垂直方向margin溢出
• 父元素overflow:hidden
• 父元素下第一个子元素前添加空<table>
• 父元素padding代替子元素margin
• 父元素+透明上边框
• 父元素::before{ content:””; display:table }

3. 自适应两栏布局

左固定，右自适应；
.left  { float:left; width:固定宽 }
.right { overflow:hidden; ...}
      //变成BFC渲染区域，就不会与float:left的左侧元素发生重叠了

4. 防止高度坍塌

三、弹性布局的几种方式

• 网页内容要可以随显示设备的大小而动态调整布局；
  
• 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：A、专门单独定义某一个项目在交叉轴上的对齐方式；
            B、与align-items属性对比：
            （1）align-items定义在父容器上约束所有项目的统一对齐方式；
            （2）align-self定义在项目上，只约束当前所在的一个项目。
            C、其取值和align-items完全一样。只是多了一个auto值，
            表示继承父元素的align-items效果。

四、水平和垂直居中

1. 水平居中

（1）前提

*A、父元素必须是块级盒子容器*
不可自由嵌套的元素就是里面只能放内联元素的；
它们包括有：
A、标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；
B、段落标记的<p>；
C、分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)

*B、父元素宽度必须已经被设定好*

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

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

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

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

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

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

• 通过计算指定父元素的padding-left或padding-right;
  (1)父元素和子元素都设定了box-sizing:border-box
  (2)(父宽-子宽)/2
  

• 计算得到子元素的margin-left或margin-right;
  (1)父元素和子元素都设定了box-sizing:border-box
  (2)(父宽-子宽)/2
  

• 通过子元素相对父元素绝对定位;
  (1)父相子绝;
  (2)子：left:50%; margin-left: -子宽一半;
  (3)子: left:50%; transform:translateX(-50%)

• 弹性布局;

父：{
    display:flex;
    flex-direction: row;
    justify-content:center;
}

2. 垂直居中

（1）前提
父元素是盒子容器

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

单行：设定父元素的line-height为其高度来使得子元素垂直居中；
多行：通过给父元素设定 display:inline/inline-block/table-cell;
     vertical-align:middle 来解决；

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

解法1：通过给父元素设定 display:inline/inline-block/table-cell; 
      vertical-align:middle来解决；
      
解法2：flexbox
      父元素：{  
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

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

解法1：计算子元素的margin-top或margin-bottom
     (1)给父元素和子元素都设定了box-sizing:border-box
     (2)(父高-子高)/2
    
解法2：计算父元素的padding-top或padding-bottom
     (1)给父元素和子元素都设定了box-sizing:border-box
     (2)(父高-子高)/2
    
解法3：利用绝对定位，让子元素相对于父元素绝对定位 [父相子绝]
     (1)子元素宽已知: 子：top:50%; margin-top: -子高一半
     (2)子元素宽未知: 子: top:50%; transform:translateY(-50%)
      
解法4：利用flexbox
      父元素：{
           display: flex;
            flex-direction: column;
            justify-content: center;
      }

3. 总结

父相子绝:
A、已知子元素宽高：
   top:50%; left:50%; margin-left:-子宽一半; margin-top:-子高一半
B、未知子元素宽高：
   top:50%; left:50%; transform:translate(-50%, -50%)

弹性布局:
.son{
	display: flex;
	justify-content: center;
	align-items: center;
 }

五、简述px，rpx，em，rem，%，vw，vh区别？

1. 设备物理像素-pt
   屏幕宽/分辨率，其中每一小份就是1pt;

2. css像素-px
   

• pc机大屏幕显示器，1px约等于0.76个物理像素;
• 手机小屏幕:以iPhone6为标准，物理像素750，分辨率375; 1px=2pt;
• 所以，px也是一个相对单位;
• px是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的;
• 但是，因为手机屏幕大小不一，差异较大，所以，反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放。所以，移动端不要用px;
• 通常PC端大屏浏览器的网页，使用px单位较多;
• 移动端少用，因为px的长度相对固定，无法根据大小不一的移动端设备自适应改变大小;

3. rem
   

• 以网页根元素元素上设置的默认字体大小为1rem;
• 用的多;
• 好处： (1)可以实现响应式布局了。
  (2)响应式布局指的是元素大小能根据屏幕大小随时变化。
  (3)因为 所有以rem为单位的位置、大小都跟着根元素字体大小而变化。
  (4)所以只要在屏幕大小变化的时候，改变根元素font-size就行了。
  

4. em
   父元素的字体大小为1em； 用的不多；

5. rpx-小程序专用
   

• 以iPhone6为标准，物理像素750，分辨率375；
• 无论屏幕大小，都将屏幕分成750份，每份就是1rpx。
• 1rpx=0.5px=1pt；
• 优点：通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配；

6. vm/vh
   

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

7. %
   

• 通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值；
• 子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位(默认定位)的父元素的高度；
• 子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位(默认定位的)父元素的宽度；
• 子元素的 padding/margin 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 padding/margin ，而与父元素的 height 无关。
• 因为%不总是相对于父元素的宽高或屏幕大小，所以，有坑，开发少用。

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

<meta name=”viewport” 
content=”width=device-width,user-scalable=no,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0”> 中每个属性的含义

1. 5种响应式布局方式

(1)flex布局

优点：代码简单，布局方便;
缺点：如果中间有内容，缩到最小就不会在小了; 且左右侧的宽度变小了;

(2)父相子绝

优点：结合使用media可以实现响应式布局;
缺点：代码写法复杂，布局较繁琐;
如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧;

(3)grid布局

• Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，
  
• Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局;
  
• Grid布局远比 Flex布局强大。(不过存在兼容性问题)
  
• 知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局!
  容器属性，项目属性......
  

参考链接：参考网址

(4)float布局

容易被挤压换行；

(5)使用rem作单位，等比缩放

• 首先，给根元素html设置一个字体大小;
• 然后，其他尺寸单位全部用 rem;
• 最后，监听屏幕的大小，根据屏幕的大小按比例改变根节点字体的大小;

因为 rem 的特性，其他的尺寸都是根据根节点字体的大小设定的，
所以，根节点字体大小一变，其他所有尺寸都会按比例变大、或小。

大部分浏览器的字体有个最小值：12px。 也就是缩小到 12px 后，字体不会继续缩小。

2. 媒体查询

通过媒体查询来设置样式(Media Queries)是响应式设计的核心。 它根据条件告诉浏览器如何为指定视图宽度渲染页面；

(1)媒体类型

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

(2)style

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

<style media="print">

(3)link

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

<link rel="stylesheet" href="common.css"> 
<!--common.css 没有指定媒体所以全局应用-->

<link rel="stylesheet" href="screen.css" media="screen"> 
<!--screen.css 应用在屏幕设备-->

<link rel="stylesheet" href="print.css" media="print"> 
<!--print.css 应用在打印设备-->

问题： 一个css文件，可能同时被多个页面通过link引入，所以只要用link，就加media，有点儿繁琐了;
推荐使用@import方式，代替link方式;

(4)@import

使用@import 可以引入指定设备的样式规则，文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件。

<link rel="stylesheet" href="style.css">

//style.css
@import url(screen.css) screen;
@import url(print.css) print;

(5)@media

可以使用 @media 做到更细的控制，即在一个样式表中为多个媒体设备定义样式。

//在 css文件/less文件 里也可以使用
<style>
    @media screen {
        h1 { font-size: 3em;color: blue; }
    }
    @media print {
        h1 { font-size: 8em;color: red;}
        h2, hr { display: none;}
    }
    </style>

(6)多设备支持（，分隔）

可以用 逗号分隔,同时支持多个媒体设备。

@import url(screen.css) screen,print;

<link rel="stylesheet" href="screen.css" media="screen,print">

@media screen,print {...}

(7)设备方向（orientation 属性）

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

orientation: landscape; [横屏，宽度>高度]
orientation: portrait;  [竖屏，高度>宽度]

(8)查询条件

可以使用不同条件限制使用的样式，条件表达式需要放在扩号中。 A、横屏显示--宽度不能超过600px

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

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

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

C、既不是横屏，宽度又不效于600时，才使用

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

(9)引入顺序

@import url(big.css)  only screen and (min-width:1200px);
@import url(medium.css)  only screen and (min-width:900px);
永远最后一个；
因为后一个范围包含前一个范围，而且后一个样式会覆盖前一个的样式；

(10)设备的划分情况

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

(11)父容器版心的尺寸划分

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

(12)响应式字体

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;}}

七、sass的常用功能？

1. 变量

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

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

2. 嵌套

举个例子：🌰

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

  li { display: inline-block; }

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

A、引用父级选择器"&"，如下：

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 =====*/
#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

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

B、嵌套属性

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

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

3. 引入

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


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

4. 混合

混合（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);
}

5. 继承

// 这段代码不会被输出到最终生成的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;
}

6. 算术运算符

.container { width: 100%; }

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

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

八、利用css构建三角形

1. 上三角

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

2. 下三角

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

3. 左三角

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

4. 右三角

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

5. 左上三角

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

6. 右上三角

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

7. 左下三角

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

8. 右下三角

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

九、缩放

1. 如何实现<12px的字

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

2. 0.5px的线如何实现

问题：不同设备、浏览器差异较大；

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

I、解决：

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

II、更好的解决: svg

.hr.svg {
    background: none;
    height: 1px;
    background: url("data:image/svg+xml;utf-8,
    <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
<line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
}

A、其中: svg图片是

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

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
    <line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
</svg>

但是在firefox挂了;

B、解决: 把svg转为base64

优点:可以利用svg画出各种图形的0.5px线条；

.hr.svg {
    background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
<line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}