CSS高频重点

最新推荐文章于 2022-10-31 21:11:15 发布

小牲口online

最新推荐文章于 2022-10-31 21:11:15 发布

阅读量229

点赞数 3

分类专栏：面试相关前端开发文章标签： css3

本文链接：https://blog.csdn.net/M_Edison/article/details/119361521

版权

前端开发同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

面试相关

12 篇文章 1 订阅

订阅专栏

文章目录

1. CSS选择器以及优先级

标签选择器、伪元素选择器：1

类选择器、属性选择器、伪类选择器：10

id选择器：100

内联样式：1000

注意：

!important声明的样式优先级最高
优先级相同时，最后出现的样式生效
继承得到的样式优先级最低
通用选择器(*)、子选择器(>)、相邻同胞选择器(+)并不在这四个等级中，所以它们的权值为0

2. display的属性值及其作用

none：元素不显示，并且从文档流中移除该元素

block：块类型，可设置宽高，换行显示（默认宽度为父元素宽度）

inline：行内元素类型，不可设置宽高，同行显示（默认宽度为内容宽度）

inline-block：默认宽度为内容宽度，可以设置宽高，同行显示

inherit：规定应该从父元素继承display属性的值

list-item：像块元素一样显示，并添加样式列表标记

table:作为块级标签来显示

3. display的block、inline和inline-block的区别

block：会独占一行，可以设置元素的宽高等

inline：不会独占一行，不能设置元素的宽高，但可以设置水平方向的margin和padding，不能设置垂直方向的padding和margin

inline-block：元素不会独占一行，并且可以设置宽高等。

对于行内元素和块级元素，特点如下：

行内元素：

设置宽高无效
可以设置水平的边距，不能设置垂直的边距
不会自动换行

块级元素：

可以设置宽高
可以设置边距
可以自动换行
多个块状，默认排列从上到下

4.隐藏元素的方法

display:none :渲染树不会包含该渲染对象，因此该元素不会出现在页面中，也不会占据位置。会引起回流与重绘
visibility:hidden：元素仍然在页面中占据空间，但是不会响应绑定的事件，不会引起回流，但是会引起重绘
opacity:0 ：将元素的透明度设置为0，元素在页面中依然占据空间，并且可以响应元素绑定的监听事件，此操作单独使用会引起回流与重绘，与图层结合使用不会引起。（引起生成图层的will-change属性）
position:absolute：使用绝对定位将元素移除到可视区域外，以此来实现元素的隐藏
**z-index:**负值：使用其他元素将其遮挡，以此实现隐藏
transform:scale(0,0)：将元素缩放为0，来实现元素的隐藏。

5. link和@import的区别

两者都是引入外部css样式的方法，它们的区别如下：

link属于XHTML的标签，可以引入RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引用CSS时，随着页面的加载而加载；@import需要页面网页完全载入以后再去加载（闪屏现象）
link没有兼容性的问题；@import低版本浏览器不支持
link支持使用JavaScript控制DOM去改变样式；而@import不支持

6.伪元素和伪类的区别

伪元素：在内容元素的前后插入额外的元素的和样式，但是这些元素实际上并不在文档上生成。它们只在外部显示可见，但不会在文档的源代码中找到它们因此成为伪元素。例如：

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

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

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

7.对盒子模型的区别

CSS3的盒模型有以下两种：标准盒模型、IE盒模型

盒模型都是由四部分组成：margin外边距，border边框、padding内边距、content内容

标准的盒模型和IE的盒模型区别在于设置width和height时，所对应的范围不同：

标准的盒模型的width和height属性的范围只包括了content
IE盒模型的width和height属性的范围包括了content、border、padding的距离

注：我们可以通过修改box-sizing属性来改变元素的盒模型：

box-sizing:content-box 表示标准的盒模型(默认值)
box-sizing:border-box 表示IE的盒模型

8. CSS3新特性

圆角(border-radius)
阴影（box-shadow）
旋转,缩放，平移(transform)
图片边框（border-image）
文字阴影(text-shadow)
文字自动换行(word-wrap)
transition过渡动画
animation帧动画

9.单行、多行文本溢出隐藏

单行文本溢出

{
overflow:hidden;
text-overflow:ellipsis
white-space:nowrap;
}

多行文本溢出

{
overflow:hidden;//超出部分隐藏
text-overflew:ellipsis;//超出的文字替换为省略号
display:-webkit-box;//作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical//设置伸缩盒子的子元素排列的方式：垂直排列
-webkit-line-clamp:3//显示的行数
}

10.两栏布局的实现

两栏布局一般就是指左边一栏宽度固定，右边一栏宽度自适应。

三种方式实现：分别是使用浮动，使用flex，使用定位：

使用浮动：左边元素使用浮动，右边使用overflew:hidden触发BFC。BFC的区域不会和浮动的元素重叠。

.left {
      width: 200px;
      height: 100px;
      float: left;
      background: #000;
    }

    .right {
      height: 100px;
      overflow: hidden;
      background: red;
    }

使用flex：左边顶宽，右边元素设置为flex:1实现自适应

  .outer{
      display: flex;
      height: 100px;
    }
    .left{
      width: 100px;
      background: red;
    }
    .right{
      background: #000;
      flex: 1;
    }

使用定位：左边不动，右边为绝对定位，左边定位为左边元素的宽，其余方向为0

  .outer {
      position: relative;
      height: 100px;
    }

    .left {
      width: 200px;
      height: 100px;
      background: #000;
    }

    .right {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 200px;
      background: red;
    }

11.三栏布局的实现

三栏布局一般就指的是左右固定，中间自适应。

主要有以下具体实现：

利用绝对定位：左右布局采用绝对定位，中间设置响应的margin值（margin值为左右的宽度）

 .outer{
      position: relative;
    }
    .left{
      width: 200px;
      height: 100px;
      position: absolute;
      left: 0;
      top: 0;
      background: red;
    }
    .right{
      background: red;
      width: 200px;
      height: 100px;
      position: absolute;
      right: 0;
      top: 0;
    }
    .center{
      margin-left: 200px;
      margin-right: 200px;
      height: 100px;
      background: pink;
    }

利用flex布局：左右定宽，中间为flex：1

.outer {
      display: flex;
      height: 100px;
    }

    .left {
      width: 200px;
      background: rebeccapurple;
    }

    .right {
      width: 200px;
      background: rebeccapurple;
    }

    .middle {
      flex: 1;
      background: black;
    }

利用浮动：左右浮动，中间margin，注意布局顺序middle在最后

.left{
    width: 200px;
    height: 100px;
    float: left;
    background: rebeccapurple;
  } 
  .right{
    width: 200px;
    height: 100px;
    float: right;
    background: rebeccapurple;

  }   
  .middle{
    height: 100px;
    background: #000;
    margin-right: 200px;
    margin-left: 200px;
  }

圣杯布局与双飞翼布局：这两种方式都是用来实现三栏布局的方式，但是不同于前面几种的是我两种方式是将middle主体部分放在前面渲染，这样在网络加载不流畅是可以实现优先加载主体部分的效果。

圣杯布局：主要是使用浮动的方式+父布局padding+margin负值+相对定位

 .container {
    padding-left: 200px;
    padding-right: 200px;
    
  }

  .middle {
    width: 100%;
    height: 100px;
    background: coral;
  }

  .left {
    position: relative;
    left: -200px;
    width: 200px;
    height: 100px;
    background: red;
    margin-left: -100%;
  }

  .right {
    position: relative;
    right: -200px;
    margin-left: -200px;
    width: 200px;
    height: 100px;
    background: pink;
  }

  .flew {
    float: left;
  }
  
   <div class="container">
    <div class="middle flew">123</div>
    <div class="left flew">1</div>
    <div class="right flew">3</div>
  </div>

双飞翼布局：主要使用的是将主体部分包裹进行margin外边距设置，在进行将左右两部分设置margin负值：

.container {
      width: 100%;
      height: 100px;
      background: yellow;
    }

    .main {
      margin-left: 200px;
      margin-right: 200px;

    }

    .left {
      width: 200px;
      height: 100px;
      background: rebeccapurple;
      margin-left: -100%;
    }

    .right {
      width: 200px;
      height: 100px;
      background: pink;
      margin-left: -200px;
    }

    .flew {
      float: left;
    }
    
    
    <div class="container flew">
    <div class="main">123</div>
  </div>
  <div class="left flew">1</div>
  <div class="right flew">1</div>

12.水平垂直居中的实现

绝对定位：，先将元素的左上角通过top:50%和left%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心

.box{
      width: 100px;
      height: 100px;
      background: #000;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

2.绝对定位：设置四个方向值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平垂直的居中

  .box{
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background: #000;
      margin: auto;
    }

3.绝对定位：设置top和left为50%，然后我们如果知道盒子的宽高的话再去通过margin去移动盒子的中心点

 .box{
      width: 100px;
      height: 100px;
      background: #000;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }

4.flex布局：align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

  .container{
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box{
      width: 100px;
      height: 100px;
      background: pink;
    }

13.对flex布局的理解以及使用场景

flex弹性布局，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。需要注意的是当父元素被设定为flex布局时，子元素的float、clear和vertical-align属性将失效。

flex默认存在两根轴：水平的主轴和垂直的交叉轴，项目默认沿水平的主轴排列。

下面的属性一般用在flex的容器上：

flex-direction属性决定了主轴的方向
flex-wrap 属性决定了换行情况
justify-content属性决定子元素在主轴的对齐方式
align-item：定义了子元素在交叉轴如何对其

下面的属性一般用在flex的元素上：

order属性定义子元素的排列顺序。数值越小，排列越靠前
flex-grow属性定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据主轴的空间。默认为auto
align-self属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-item属性。默认为auto

14.为什么需要清除浮动？清除浮动的方式

因为元素设置浮动以后我们当前的元素就会脱离文档流，所以这时如果我们父元素没有设置对应的高，就会导致父元素塌陷，导致父元素的样式无法展示。并且如果我们上一个元素浮动的话，那么很有可能我们当前的元素就会被浮动元素遮盖。因为浮动的元素是不在当前的文档流中的。所以当前的元素会直接顶上去。

清除浮动的方式：

给最后一个浮动元素之后添加一个空的div标签并且添加clear:both样式，或者直接给后面的元素添加这个样式
给当前的父元素添加伪元素::after，将伪元素设为块级标签，再为其添加clear:both样式
为父元素添加overflow:hidden样式，触发BFC
为其父元素添加一个固定的高度

15. 对BFC的理解，如何创建BFC

BFC是一个独立的布局环境，可以理解为一个将布局内的元素与外部元素隔离开的容器，这个容器按照一定的规则进行物品的摆放，并且不会影响其他环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不会受外部元素的影响。

创建BFC的条件：

根元素：body
元素设置浮动：float（除none以为的值）
元素设置绝对定位：position（absolute，fixed）
display值为：inline-block、flex等
overflex:hidden,auto,scroll

BFC的特点：

垂直方向上，自上而下排列，和文档流的排列方式一致
在BFC中上下相邻的两个容器的margin会重叠
计算BFC的高度时，需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠（清除浮动）
BFC是独立的容器，容器内部元素不会影响外部元素

BFC的作用：

解决margin的重叠问题：首先我们知道margin重叠是一个很常见的css问题，这是因为在一个BFC容器中，上下相邻的两个块级盒子的margin会重叠，所以我们将两个元素变为两个BFC，就可以解决margin重叠的问题。可以使用display:inline-block或者底部元素设置浮动。
解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素高度为0（前提是父元素未设置高度），解决这个问题只需要将父元素变成一个BFC，常用的办法就是给父元素设置overflex:hidden;auto
创建自适应两栏布局:可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应

 .left{
      width: 100px;
      height: 200px;
      background: #000;
      float: left;
    }
    .right{
      height: 200px;
      background: rebeccapurple;
      overflow: hidden;
    }
 <div class="left"></div>
 <div class="right"></div>

16. position的属性有哪些？区别？

relative、absolute、fixed、static、sticky

relative：元素的定位相对于元素自身的位置定位

fixed：相对于window边界定位，但是它会导致其他元素位置的变换（脱离文档流）

absolute：浏览器先逐层查找当前设定absolute元素的父元素，如果找到某一个父元素中设置了position:relative/absolute/fixed的元素，就以这个元素为基准定位，如果没有，就以window边界定位。（脱离文档流）

static：默认值，没有定位，元素出现在正常的文档流中

sticky：黏性定位，基于用户滚动的位置来定位，在 relative 与 fixed 定位之间切换。他的行为像relative，而当页面滚动超出目标区域时，它的表现就像 fixed;会固定在目标区域（使用js可以实现）

17.实现一个三角形

画三角形的思路实际上就是使用box的边框来画，我们需要把box的宽高设为0，边框的高度就是我们三角形的高度就像这样。

代码如下

  .box{
      position: absolute;
      border-top: 40px solid yello;
      border-left: 40px solid green;
      border-right: 40px solid blue;
      border-bottom: 40px solid red;
    }

我们要实现哪种三角形只需要将对应的边框颜色设为透明即可。

比如我们想保留下面的红色三角形：

  .box{
      position: absolute;
      border-top: 40px solid transparent;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      border-bottom: 40px solid red;
    }

以此类推即可。

ps：实现扇形就是给其加一个border-radius

18.画一个 0.5px 的线

直接使用缩放：

 .line{
      margin-top: 100px;
      height: 1px;
      width: 500px;
      background: black;
      transform: scaleY(0.5);
    }

19.如何解决1px的问题（移动端问题）

在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。

解决方案：

直接写0.5px
伪元素先放大后缩小
viewport 缩放来解决

20. CSS中可继承与不可继承的属性

无继承的属性：

display
文本属性(vertical-align,text-decoration,text-shadow),
盒子模型的属性
背景属性
定位属性（float，position）

有继承的属性：

字体系列属性（font-size等）
文本系列属性（line-height、text-indent、text-align、color）
元素可见性（visibility）
列表属性布局（list-style）
光标属性（cursor）

21.常见的图片格式

图片的类型目前就分为两种：

位图：由像素组成，放大就会失帧
矢量图：记录了颜色形状的算法，因此缩放不会失帧

图片的压缩类型：

无压缩：不对图片数据进行压缩处理，能准确地呈现原图片
有损压缩：损失了一部分图片的信息，也即降低了图片的质量（即图片被压糊了），并且这种损失是不可逆的。
无损压缩：图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。

常见的图片格式：

BMP：无损的，这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。

GIF：无损压缩的，图片特点是帧动画，相对于bmp它的尺寸较小，并且支持透明。优点是体积小，支持动画。缺点是采用了8位压缩，最多处理256种颜色。所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。

JPEG/JPG：采用有损压缩，压缩以后体积更小，支持24位真色彩，支持渐进式加载，缺点是会破坏图片质量，不支持透明或者半透明。

PNG：无损压缩格式，应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小。png支持8位、24位、32位3种，我们通常叫它们png8、png24、png32。

SVG：是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成。当放大SVG图片时，看到的还是线和曲线，而不会出现像素点。SVG图片在放大时，不会失真，所以它适合用来绘制Logo、Icon等。

22. CSS 优化和提高性能的方法有哪些？

CSS提高优化的切入点主要有以下几点：提高加载性能，选择器性能，渲染性能

提高加载性能：

CSS压缩：将CSS打包压缩，可以减少文件体积
CSS单一样式，比如我们设置margin时，设置单独的margin-left等。
减少使用@import，建议使用link，因为后者再页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

避免使用*通配符选择器，这样浏览器计算次数过大
尽量少对标签进行选择，而是用class
不要对具有继承性的属性进行重复指定规则

渲染性能：

慎用高性能属性:浮动，定位
尽量减少页面的重绘、重排
属性值为0时，不加单位
属性值为0开头的浮点数时，不加前面的整数单位

可维护性、健壮性：

将具有相同属性的样式抽离，提高可维护性
样式与内容分离

23. CSS预处理器/后处理器是什么？为什么要使用它们？

CSS预处理器：如：less、sass、stylus，用来预编译sass或者less，增加了css代码的复用性。层级、mixin，变量，循环、

函数等对编写以及开发UI组件都极其方便，写完后在编译成css

后处理器：如PostCss，通常是再完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

总而言之，预处理器就是为css增加了一些编程特性，无需考虑浏览器兼容的问题，因为预编译器最终就会被编译为css。

使用原因：

结构清晰，便于扩展
可以很方便的屏蔽浏览器私有语法的差异
可以轻松实现多重继承

24. display:inline-block 什么时候会显示间隙？

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

有空格时会有间隙，可以删除空格解决
margin正值时，可以让margin使用复制解决
父元素使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决

25. 对媒体查询的理解

使用媒体查询@media，可以针对不同的媒体设备来定义不同的样式，它可以针对不同的屏幕尺寸设置不同的样式，特别时是再响应式页面用的最多。

媒体查询包含⼀个可选的媒体类型和满⾜CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。那么媒体查询内的样式将会⽣效。

<!-- link元素中的CSS媒体查询 --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
<!-- 样式表中的CSS媒体查询 --> 
<style> 
@media (max-width: 600px) { 
  .facet_sidebar { 
    display: none; 
  } 
}
</style>

26.对css工程化的理解

CSS 工程化是为了解决以下问题：

宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
编码优化：怎样写出更好的 CSS？
构建：如何处理我的 CSS，才能让它的打包结果最优？
可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：

预处理器：Less、 Sass 等；
重要的工程化插件： PostCss；
Webpack loader 等。

27. z-index属性在什么情况下会失效

Z-index是为了解决连个元素重叠时，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越在上层。

z-index属性在下列情况下会失效：

父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

28.常见的CSS布局单位

常见的布局单位像素(px)、百分比(%)、em、rem、vw/vh

像素（px）:是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

CSS像素：CSS中的单位
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

百分比（%）：当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

em和rem：相对于px更具有灵活性，它们都是相对长度单位，它们的区别是：em相对于父元素或者本元素的font-size，rem相对于根元素。

em：文本相对于长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸被人为设置，则相对于浏览器的默认字体尺寸(默认16px)

rem: rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数

vm/vh：是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，

vw：相对于视窗的宽度，视窗宽度是100vw；
vh：相对于视窗的高度，视窗高度是100vh；

29.什么是margin重叠问题？如何解决？

两个块级元素垂直摆放时，上下的边距可能会合并为一个外边距，其大小会取外边距较大的一个，总之不会是两者之和，这种行为就是外边距折叠。需要注意的是，浮动的元素和脱离文档流的元素的外边距不会折叠。

解决方法：

首先折叠的情况有两种，一种是兄弟之间重叠，一种是父子之间重叠

兄弟之间重叠：

底部元素变为行内盒子：display:inline-block
底部元素设为浮动
底部元素设为脱离文档流的定位absolute/fixed

父子之间重叠：

父元素加入：overflow: hidden触发BFC
父元素添加透明边框：border:1px soild transparent
子元素变为行内盒子display:inline-block
子元素加入浮动属性或者定位
父元素使用padding属性

30. display、float、position的执行优先级？

首先判断display的值是否为none，如果为none，则position和float的值不影响元素表现

其次判断position的值是否是absolute或者fixed，如果是，则float失效，并且display的值被设置为block或者table

如果position的值不为absolute或者fixed，则判断float属性时候为none，如果不是，则display的值则按照上面的规则进行转换。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位

如果float的值为none，则判断元素是否为根元素，如果是根元素display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变

总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display’的值也需要调整；其次，元素的’float’特性的值不是"none"的时候或者它是根元素的时候，调整’display’的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display’特性值同设置值。