知识整理CSS

CSS选择器

标签：p{}
class: .class{}
id：#id {}
同一标签，多个类：p.class1{} .class2{
集体选择器：p,.class1,#id1 {}
后代选择器(选择子孙代)：p em a {}
子代选择器(只能选择子代)：div > p
相邻选择：div + p
通配符选择：*
否定选择：not(.link) {}
属性选择器：[title] {}
伪类选择：:link {}
链接伪类 ``:link``:未访问的链接 ``:visited``：已访问的链接 ``:hover``：鼠标悬停状态 ``:active``：鼠标点击到松开的阶段 （hover和active可用于任何标签）
伪元素选择：::before {}

权重

• !important 优先级最高，但也会被权重高的important所覆盖
• 行内样式总会覆盖外部样式表的任何样式(除了!important)
• 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则，以与元素距离近的选择器为最后规则

一句话总结： !important > 行内样式 > ID选择器 > (类选择器 | 属性选择器 | 伪类选择器 ) > 元素选择器 | 伪元素选择弃 > *

css3 属性选择器

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
`[attribute	=value]`	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

伪类和伪元素区别

伪类值一种状态，用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；
伪类将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

伪元素是DOM树没有定义的虚拟元素，是一个真实存在的元素，他可以有样式有内容
伪元素在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

换句话说伪类和伪元素的区别就是伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。

浏览器解析CSS

.wrapper div > p CSS中，浏览器查找元素是通过选择权从后往前找的， 这样做的目的是加快CSS解析速度，从后往前，排除法

盒子模型

盒模型有两种， W3C标准盒子模型、IE 怪异盒子模型；

盒模型是由： 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。

标准模型的宽高是指的content区宽高； IE盒模型的宽高是指的content+padding+border的宽高。

• 盒子模型类型 box-sizing: border-box | content-box
  • border-box：width的值为width=width
  • content-box：width的值为width=border+padding+content
• height：长度/百分比/auto
• width：
• border边框
  • 边框粗细border-(top/l/r/bottom)-width: thin/medium/thick/长度值
  • 边框颜色 border-color:
  • 样式border-style: none/solid实线/dotted点状
  • 简写: 粗细-样式-颜色
• padding内边距 主要用来设置空隙 盒子与边框的距离
  • padding粗细padding-(top/l/r/bottom): thin/medium/thick/长度值
  • padding粗细简写：全/上下 左右/上 左右 下/上 右 下 左
• margin外边距 边框与外界的距离
  • 可以为负值
  • 设置为auto：实现水平方向居中

bfc

W3C对BFC定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC作用：

• 利用BFC避免外边距折叠
• 清除内部浮动 （撑开高度）
• 原理: 触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内
• 避免文字环绕
• 分属于不同的BFC时，可以阻止margin重叠
• 多列布局中使用BFC

如何生成BFC：（脱离文档流，满足下列的任意一个或多个条件即可）

• 根元素，即HTML元素（最大的一个BFC）
• float的值不为none
• position的值为absolute或fixed
• overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
• display的值为inline-block、table-cell、table-caption

非布局样式

文字粗细：font-weight: normal/bold
文字斜度：font-style: normal/italic/oblique
文字粗细：font-weight: 600
字重（粗体）font-weight
斜体 font-style
下划线 text-decoration
指针 cursor

滚动

• visible 滚动条隐藏, 文字超出显示
• hidden 滚动条隐藏, 文字超出不显示
• scroll 滚动条一直显示，无论文字是否够多
• auto 滚动条自动隐藏

文本对齐方式

文本水平对齐方式：text-align: left/right/center/justify
左对齐/右对齐/居中对齐/两端对齐 只对块级元素有效

行高

首行缩进：text-indent: 2em
行高：line-height: 120em 最好用em防止字体过大导致显示不全
注意：图片是按照inline元素做的排版，会涉及字体对齐，默认按照baseline对齐，和底线有空隙。 为了删除这个空隙，可以直接vertical-align: bottom或者display: block

行高的构成

行高是由 line-box 组成的
line-box 是由一行里的 inline-box 组成的
inline-box中最高的那个，或字体最大的拿个决定行高

你对 line-height 是如何理解的？

• line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
• 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
• 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
• line-height 和 height 都能撑开一个高度，height 会触发 haslayout（一个低版本IE的东西），而 line-height 不会

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
• 百分比：将计算后的值传递给后代

浮动

• 可以让行内元素形成块级元素
• 元素”浮动”
• 脱离文档流
• 不脱离文本流
• 位置尽量靠上，并靠左或右
• 脱离文档流，只能左右 float:left/right/none
• 对自己的影响
  • 形成”块”(BFC)
  • 这个块会负责自己的布局，宽高由自己决定。比如 span 中用 float 这个span就形成了一个BFC，就可以设置宽高了
• 浮动后出现的问题：
  • 浮动溢出（高度塌陷）

• 解决：清除浮动

  • clear:none/left/right/both
  • 1.给父元素添加overflow:hidden 使父元素变成一个bfc，同时需要父元素指定宽度

  • 2.css3 clearfix :after 使用伪元素

      .clearfloat:after{
         display:block;
         clear:both;
         content:"";
         visibility:hidden;
         height:0}
     .clearfloat{zoom:1}
    

  • 3.结尾添加一个空行

      <div class="parent">
      <div class="left">Left</div>
      <div class="right">Right</div>
      <div class="clearfloat"></div>
    </div>
    <style>
      .left {float:left}
      .clearfloat{clear:both}
    </style>
    
    

inline-block的间隙

两个并列的inline-block中间会有一条裂缝，这个的原因是两个标签之间有空格，浏览器把这些空格当成文字中空格，所以这两个块中间多少有间隙。

解决办法：

1. 删除两个标签间的空格，但是这样html排版不好
2. 容器元素font-size: 0 然后再在里面再重新设置字体大小

元素内容的垂直方式

只对行内元素有效
vertical-align: sub/supper/文字向上向下对齐

单行文本溢出显示省略号

• overflow: hidden;
• text-overflow: ellipsis;
• white-space: no-wrap;

多行文本溢出显示省略号

• overflow: hidden;
• text-overflow: ellipsis;
• display: -webkit-box;
• -webkit-line-clamp: 3;
• -webkit-box-orient: vertical;

display属性

将元素显示为内联元素: inline
将元素显示为块级元素: block
将元素显示为内联元素具有快级属性可以设置宽高: inline-block
inherit 规定应该从父元素继承 display 属性的值
none 此元素将显示为块级元素，此元素前后会带有换行符。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示

ps：宽高设为100%，表示和父元素相同

display: none; 与 visibility: hidden; 的区别

结构：

• display:none
  • 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
• visibility: hidden
  • 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
• opacity: 0
  • 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承

• display: none和opacity: 0
  • 非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
• visibility: hidden
  • 继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能

• display:none
  • 修改元素会造成文档回流。读屏器不会读取display: none元素内容，性能消耗较大
• visibility:hidden
  • 修改元素只会造成本元素的重绘,性能消耗较少。读屏器读取visibility: hidden元素内容
• opacity: 0
  • 修改元素会造成重绘，性能消耗较少

相同点： 它们都能让元素不可见、他们都依然可以被 JS 所获取到

CSS预处理器

• 嵌套
  • 反映层级和约束
• 变量和计算
  • 减少冗余代码
• entend和mixin
  • 代码片段重用
  • mixin是直接把CSS代码每个地方重复写一份
  • extend是使用逗号分割的选择器来为多个不同的地方使用同一段CSS
• 循环
  • 适用于复杂有规律的样式
• import
  • CSS模块化
• 常见三种css预处理器：sass less stylus

CSS单位

1. px 绝对单位。传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。

2. % 父元素宽度的比例。

   • 如果对 html 元素设置 font-size 为百分比值，则是以浏览器默认的字体大小16px为参照计算的（所有浏览器的默认字体大小都为 16px），如62.5%即等于10px（62.5% * 16px = 10px）。

3. em 相对单位。 不同的属性有不同的参照值。

   • 对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小
   • border, width, height, padding, margin, line-height）在这些属性中，使用em单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。

4. rem 是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。

   • 好处：rem 只需要修改 html 的 font-size 值即可达到全部的修改，即所谓的牵一发而动全身。

5. vw, vh, vmin, vmax 相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。

   • vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
   • vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
   • vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一
   • vmax：基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一

CSS 优化、提高性能的方法有哪些？

• 多个 css 合并，尽量减少 HTTP 请求
• css 雪碧图
• 抽象提取公共样式，减少代码量
• 选择器优化嵌套，尽量避免层级过深 （用‘>’替换‘ ’）
• 属性值为 0 时，不加单位
• 压缩CSS代码
• 避免使用 CSS 表达式
  • 它们要计算成千上万次并且可能会对你页面的性能产生影响。

position 定位模型

• static：常规流 忽略跑偏移量（忽略 top, bottom, left, right - z-index 声明）
• inherit 规定从父元素继承 position 属性的值
• relative：
  • 相对相对于其正常位置进行定位。设置偏移量 top/bottom/left/right:10px
  • 常规流的位置会留下，不会影响其他元素;也就是如果因为它的移动空出来了区域，其他的元素不会填充
• absolute：绝对定位
  • 相对于值不为 static 的第一个父元素进行定位。
  • 常规流的位置会被占据，会影响其他元素；也就是如果因为它的移动空出来了区域，其他的元素会填充
  • 如果设置上下左右偏移量为0，margin：autoauto，子元素就会相对于父元素居中
• 常用： 父元素设置为relative，子元素设置为absolute，子元素就可以设置相对于父元素的偏移量
• fixed：相对定位
  • 相对于浏览器窗口进行定位。不会随着视图滚动而滚动，其余和absolute一样
• 后三者可以设置z-index

DOM层级顺序与z-index

DOM层级顺序，大概来说就是DOM节点在z轴方向（垂直于屏幕向外的方向）的显示优先级。为了调整DOM层级顺序，我们想到的往往就是用CSS的z-index属性来控制。
dom层级顺序规则：

1. 顺序规则
   • 在不设置position属性（或设置成static）的情况下，文档流后面的DOM节点会覆盖前面的DOM节点。
2. 定位规则
   • 定位节点（position属性设置为relative，absolute或fixed的节点）会覆盖非定位节点（不设置position属性或position属性设为static的节点）
3. 参与规则
   • z-index属性仅对定位节点生效。（使用position的节点）
   • 有三个DOM节点，其定位为static。但是A的z-index最大，但是依旧是在最底部，C的z-index最小，而在最顶部，因此可知z-index并未生效，此时为顺序规则在生效。
4. 默认值规则
   • z-index设为0和没有设置z-index的节点在同一层级内没有高低之分。在IE6和7种，z-index的默认值为0，其他浏览器中默认值为auto。
5. 从父规则
   • 两个节点A和B都是定位节点，如果节点A的z-index值比节点B的大，那么节点A的子元素都会覆盖在节点B以及节点B的子节点上。

link 与 @import 的区别

• link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;
• 页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
• import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;
• link 支持使用 js 控制 DOM 去改变样式，而@import 不支持;

CSS 有哪些继承属性

• 关于文字排版的属性如：
  • font
  • word-break
  • letter-spacing
  • text-align
  • text-rendering
  • word-spacing
  • white-space
  • text-indent
  • text-transform
  • text-shadow
• line-height
• color
• visibility
• cursor

CSS3新特性

• 新增的选择器：
  • 元素选择器
    • 子元素选择器：father > son1 {}
    • 相邻兄弟元素选择器:father > son1 + son2 {}
    • 通用兄弟选择器: father > son1 ~ son5 {}
    • 群组选择器: father > son1, father > son2, father > son3 {}
  • 属性选择器
    • a[href] {}
  • 伪类选择器
    • 动态伪类（之前有）：
      • 锚点伪类 a:link{} a:visited{}
      • 用户行为伪类 :hover :active :focus
    • UI元素状态伪类
      • input:enabled {} :disabled :checked
  • 结构类选择器
    • first/last子类选择器section:fi<div class="a2">123 </div><div class="a2">123 </div><div class="a2">123 </div><div class="a2">123 </div>rst-child {}
    • 父元素的第N个子元素ul>li:nth-child(3){}
      • 选择多个： nth-child(n){}
• 弹性盒模型 display: flex;
• 边框与圆角
  • 圆角 border-radius:10px/10rem/10%
  • 盒阴影 box-shadow:水平偏移 垂直偏移 模糊 扩展 颜色
  • 边界图片 border-image:source
• 文本
  • 文本阴影 text-shadow:h v blur color
  • 自动换行 word-break
  • 文本属性
• 字体 @font-face
  • @font-face {font-familt:<name> src:<source> [<format>]}
• transform 转换
  • 旋转transform:rotate(<angle>)
  • 平移trandform:translate(x,y)
    • trandform:translateX(200px)
    • trandform:translateY(200px)
  • 缩放：水平 垂直 都有
    • trandform:scaleX(.5)
  • 扭曲: 三种
    • skewX(<angle>)``
  • 3D transform
    • rotateX
    • translate3d(x,y,z)
    • scale3d(x,y,z) scaleZ(z)
• 动画
  • transition 补间动画 两个状态
  • keyframe 关键帧动画 有很多状态
  • 逐帧动画 没有补间

如何水平/垂直居中一个元素？

• 水平居中

  • 如果需要居中的元素为inline或inline-block，为父元素设置 text-align: center;即可实现

  • 如果要居中的元素为一个块级元素的话，一般使用 margin: 0 auto; 进行居中。

• 垂直居中

  • 对于绝对定位元素，直接宽高减去一半

      #d1 {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        background: red
      }
    

  • 用css3的transform，无需知道宽高

        width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate( -50%, -50%);
      background: red
    

  • 相对定位元素，先水平居中再垂直

li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？(也称幽灵字符)

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符, 这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了

display:inline-block 什么时候会显示间隙？(携程)

• 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
• 非 inline-block 水平元素设置为 inline-block 也会有水平间距
• 可以借助 vertical-align:top; 消除垂直间隙
• 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
• 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

用纯 CSS 创建一个三角形的原理是什么？

把border的其他三条边设为透明 注意，这里要把 border-width 、border-style、 border-color 分开写。

.tri {
  width: 0px;
  height: 0;
  border-style: solid;
  border-width: 100px;
  border-color: transparent transparent red transparent;
}

常用布局方式

表格布局

    <table>   
        <tr>   
            <td class="left">left</td>   
            <td class="right">right</td>   
        </tr>      
    </table>

float+margin

    <style>
        .container {
            width: 500px;
            height: 500px;
        }
        .left {
            width: 100px;
            height: 100%;
            float: left;
            background: green;
        }
        .middle {
            margin-left: 100px; /*空出和左边width一样*/
            margin-right: 200px; /*空出和右边width一样*/
            background: #000
        }
        .right {
            height: 100%;
            width: 200px;
            float: right;
            background: yellow;
        }
    </style>

    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>  <!--先写right，right写在最后会因为float上靠-->
        <div class="middle">middle</div>
    </div>

inline-block

• 像文本一样排block元素
• 问题:中间有间隙：
  • 解决方法：把父元素字体大小设为0，并在子元素中设置字体大小

    <style>
        .container {
            width: 500px;
            height: 500px;
        }
        .left {
            width: 100px;
            height: 100%;
            display: inline-block;
            background: green;
        }
        .right {
            height: 100%;
            width: 200px;
            display: inline-block;
            background: yellow;
        }
    </style>

    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div> 
    </div>

flexbox

参考

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

• 弹性盒子的属性：

• flex-direction：属性决定主轴的方向（即项目的排列方向）。

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。
• flex-wrap: 定义，如果一条轴线排不下，如何换行。
  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
• 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（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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

• 项目的属性

• order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

    <style>
        .a1 {
            display: flex;
            height:100px;
            width: 500px;
            background: #000
        }
        .a2 {
            flex: 1;
            background: red
        }
    </style>

    <div class="a1">
        <div class="a2">123
        </div>
    </div>

响应式设计和布局

• 响应式设计就是网站能够兼容多个不同大小的终端，而不是为每个终端做一个特定的版本
• 基本原理是利用 CSS3 媒体查询，为不同尺寸的设备适配不同样式
• 对于低版本的 IE，可采用 JS 获取屏幕宽度，然后通过监听window.onresize 方法来实现兼容
• 主要考虑屏幕大小
• 主要方法：
  • 隐藏：隐藏导航栏等不重要的东西
  • 折行：pc端一行显示多个的在移动端一行显示少一些
  • 自适应空间：多留出自适应空间

• 方式：

  • rem：通过html的字体大小确定元素大小
    • html默认的样式字体大小为16px，1rem=16px，不同屏幕在mediaquery中改html的字体大小即
  • viewport：在meta中手工确定屏幕大小content="width=320"

  • 媒体查询：为不同屏幕写样式

      @media (max-width: 640px) {
          .left{display: none} /*为移动端隐藏样式*/
      }
    

请列举几种隐藏元素的方法

• visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
• opacity: 0; CSS3 属性，设置 0 可以使一个元素完全透明
• position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
• display: none; 元素会变得不可见，并且不会再占用文档的空间。
• transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
• height: 0; 将元素高度设为 0 ，并消除边框
• filter: blur(0); CSS3 属性，将一个元素的模糊度设置为 0

css 属性 content 有什么作用？

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

元素竖向的百分比设定是相对于容器的高度吗？

元素竖向的百分比设定是相对于容器的宽度，而不是高度

a 标签上四个伪类的使用顺序是怎么样的？

link > visited > hover > active 简称 lvha(love-ha)

伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）

在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色

设置元素浮动后，该元素的 display 值会如何变化？

设置元素浮动后，该元素的 display 值自动变成 block

请解释 CSS sprites，以及你要如何在页面或

• CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。
• CSS Sprites 为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片。

margin叠加几种情况

margin叠加的意思是：当两个或者更多的margin相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距中高度较大者。

1. 当一个元素出现在另一个元素上面时，第一个元素的底边外边距与第二个元素的顶边外边距发生叠加。如图：
   

2. 一个元素在另一个元素中时，它们的顶边距和低边距也会发生叠加
   

3. 果一个元素是空元素（即一个元素没有内容，内边距和边框），这种情况外边距的顶边距和低边距碰在一起也会发生叠加
   

4. 在上面那种空元素的情况，如果该空元素与另一个元素的外边距碰在一起，也会发生叠加。
   

以上4种外边距叠加情况只会发生在普通文档流的垂直方向。行内框、浮动框、绝对定位框之间的外边距不会发生叠加，同样水平方向也不会发生叠加。

水平居中和垂直居中

css问题

• css优先级
  • 权重：id>class>tag
  • !important: 最高
  • 内联样式高
  • 后写的优先级高
• 伪类和伪元素的区别
  • 伪类表状态 hoover等
  • 伪元素是真的元素 before after 在页面中会显示
  • 前者单冒号 后者双冒号
• 实现两栏（三栏）布局的方法
  • 表格布局
  • float+margin 清楚浮动
  • inline-block 处理间隙
  • flexbox 兼容性差
• absolute和fix有什么区别
  • absolute相对于最近的absolute/relative来定位
  • fix相对于屏幕/viewport定位
• inlineblock为什么有间隙
  • 空白字符
  • 解决：消灭字符；父元素字体设为0
• 清除浮动
  • 为什么有浮动：浮动的元素不会占据父元素的布局空间，父元素不会管浮动元素，所以可能会高度塌陷
  • 清除：给父元素加定高宽；父元素加overflowhidden；给父元素加:after{clearboth}；最后加一行空行clearboth
• 如何适配移动端页面
  • viewport
  • rem/viewport/media query
  • 设计上：隐藏/折行/自适应
    visibility: hidden;
    display: block;
    font-size: 0;
    content: “ “;
    clear: both;
    height: 0;