前端—css面试题

1、css选择符有哪些？

• id 选择器（ # id）
• 类选择器（.myclassname）
• 标签选择器（div, h1, p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[rel = “external”]）
• 伪类选择器（a:hover, li:nth-child）

2、如何竖直居中一个元素

• 绝对定位居中(position:)
• 如果居中的是行内元素，可以设置父级 height 与 line-height 相等
• 设置 margin/padding 居中
• 相对位置偏移居中
• flex 居中 设置 align-items:center 即可

3、display 有哪些值？说明他们的作用

• block 象块类型元素一样显示。
• none 缺省值。象行内元素类型一样显示。
• inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
• list-item 象块类型元素一样显示，并添加样式列表标记。
• table 此元素会作为块级表格来显示
• inherit 规定应该从父元素继承 display 属性的值

4、position 有哪些值 relative 和 absolute 定位原点是？

• absolute 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。
• fixed （老 IE 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。
• relative 生成相对定位的元素，相对于其正常位置进行定位。
• static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。
• inherit 规定从父元素继承 position 属性的值

5、CSS3 有哪些新特性？

• 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
• 弹性盒模型 display: flex;
• 多列布局 column-count: 5;
• 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
• 个性化字体 @font-face{font-family: BorderWeb;
• src:url(BORDERW0.eot);}
• 颜色透明度 color: rgba(255, 0, 0, 0.75);
• 圆角 border-radius: 5px;
• 渐变 background:linear-gradient(red, green, blue);
• 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
• 倒影 box-reflect: below 2px;
• 文字装饰 text-stroke-color: red;
• 文字溢出 text-overflow:ellipsis;
• 背景效果 background-size: 100px 100px;
• 边框效果 border-image:url(bt_blue.png) 0 10;
• 平滑过渡 transition: all .3s ease-in .1s;
• 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation:anim-1 1s;
• 转换
  旋转 transform: rotate(20deg);
  倾斜 transform: skew(150deg, -10deg);
  位移 transform: translate(20px, 20px);
  缩放 transform: scale(.5);

6、 CSS中可继承与不可继承属性有哪些

一、无继承性的属性
1.display：规定元素应该生成的框的类型
2.文本属性：

• vertical-align：垂直文本对齐
• text-decoration：规定添加到文本的装饰
• text-shadow：文本阴影效果
• white-space：空白符的处理
• unicode-bidi：设置文本的方向
  3.盒子模型的属性：width、height、margin、border、padding
  4.背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
  5.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
  6.生成内容属性：content、counter-reset、counter-increment
  7.轮廓样式属性：outline-style、outline-width、outline-color、outline
  8.页面样式属性：size、page-break-before、page-break-after
  9.声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
  二、有继承性的属性

1、字体系列属性

• font-family：字体系列
• font-weight：字体的粗细
• font-size：字体的大小
• font-style：字体的风格
  2、文本系列属性
• text-indent：文本缩进
• text-align：文本水平对齐
• line-height：行高
• word-spacing：单词之间的间距
• letter-spacing：中文或者字母之间的间距
• text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
• color：文本颜色
  3、元素可见性
  visibility：控制元素显示隐藏
  4、列表布局属性
  list-style：列表风格，包括list-style-type、list-style-image等
  5、光标属性
  cursor：光标显示为何种形态

7、display的block、inline和inline-block的区别

1.**block：**会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；

2.**inline：**元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

3.**inline-block：**将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

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

（1）行内元素

• 设置宽高无效；
• 可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
• 不会自动换行；
  （2）块级元素
• 可以设置宽高；
• 设置margin和padding都有效；
• 可以自动换行；
• 多个块状，默认排列从上到下。

8、 隐藏元素的方法有哪些

• display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
• visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
• opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
• position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
• z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
• clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种
  方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
• transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

9、ink和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

• link支持使用Javascript控制DOM去改变样式；而@import不支持。

• 10、transition和animation的区别

• transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

• animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

11、伪元素和伪类的区别和作用？

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

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}

12、为什么有时候⽤translate来改变位置⽽不是定位？

translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

13、li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个

• 放在一行，这导致
• 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
  解决办法：

• （1）为

• 设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。

• （2）将所有

• 写在同一行。不足：代码不美观。

• （3）将

  • 内的字符尺寸直接设为0，即font-size:0。不足：
    • 中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。

  （4）消除

  • 的字符间隔letter-spacing:-8px，不足：这也设置了
  • 内的字符间隔，因此需要将
  • 内的字符间隔设为默认letter-spacing:normal。

  14、常见的图片格式及使用场景

  （1）BMP，是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。

  （2）GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。

  （3）JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。

  （4）PNG-8是无损的、使用索引色的点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。除非需要动画的支持，否则没有理由使用GIF而不是PNG-8。

  （5）PNG-24是无损的、使用直接色的点阵图。PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

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

  （7）WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。目前只有Chrome浏览器和Opera浏览器支持WebP格式，兼容性不太好。

  • 在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
  • 在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
  • WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

  15、margin 和 padding 的使用场景

  • 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
  • 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding。

  16、对line-height 的理解及其赋值方式

  1.line-height的概念：

  • line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
  • 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
  • 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
  • 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
  • line-height 和 height 都能撑开一个高度；
    2.line-height 的赋值方式：
  • 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
  • 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
  • 百分比：将计算后的值传递给后代

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

  1.加载性能：

  • css压缩：将写好的css进行打包压缩，可以减小文件体积。
  • css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。
  • 减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

  2.选择器性能：

  • 关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
  • 如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
  • 避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。
  • 尽量少的去对标签进行选择，而是用class。
  • 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
  • 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

  3.渲染性能：

  • 慎重使用高性能属性：浮动、定位。
  • 尽量减少页面重排、重绘。
  • 去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
  • 属性值为0时，不加单位。
  • 属性值为浮动小数0.**，可以省略小数点之前的0。
  • 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
  • 不使用@import前缀，它会影响css的加载速度。
  • 选择器优化嵌套，尽量避免层级过深。
  • css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
  • 正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
  • 不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

  4、可维护性、健壮性：

  • 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
  • 样式与内容分离：将css代码定义到外部css中。

  18、::before 和 :after 的双冒号和单冒号有什么区别？

  （1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

  （2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

  注意： :before和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。

  19、display:inline-block 什么时候会显示间隙？

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

  20、z-index属性在什么情况下会失效

  通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

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

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

  21、CSS的引入方式有哪些？link和@ import的区别是什么？

  CSS有3种引入方式。

  行内式是指将样式写在元素的 style属性内。
  
  内嵌式是指将样式写在 style元素内。
  
  外链式是指通过link标签，引入CSS文件内的样式。
  

  通过link标签引入样式与通过@ import方法引入样式有如下区别。

  （1）加载资源的限制。

  link是 XHTML的标签，除了加载CSS文件外，还可以加载RSS等其他事务，如加载模板等。

  @ import只能加载CSS文件。

  （2）加载方式。

  如果用link引用CSS，在页面载入时同时加载，即同步加载。

  如果用@ import引用CSS，则需要等到网页完全载入后，再加载CSS文件，即异步加载。

  （3）兼容性。

  link是 XHTML的标签，没有兼容问题。

  @ import是在CSS2.1中提出的，不支持低版本的浏览器。

  （4）改变样式

  link的标签是DOM元素，支持使用 JavaScript控制DOM和修改样式；@ import是种方法，不支持控制DOM和修改样式。

  22、浮动元素引起的问题和解决方法是什么？

  引起的问题有如下几个。

  （1）父元素的高度无法被撑开，影响与父元素同级的元素。

  （2）与元素同级的非浮动元素会紧随其后（类似遮盖现象）。

  （3）如果一个元素浮动，则该元素之前的元素也需要浮动；否则，会影响页面显示的结构（即通常所说的串行现象）。

  解决方法如下：

  （1）为父元素设置固定高度。

  （2）为父元素设置 overflow:hidden即可清除浮动，让父元素的高度被撑开。

  （3）用 clear:both样式属性清除元素浮动。

  注意：如果只有左浮动或只有右浮动，可以单独设置 clear:left或 clear:right，但是设置clear:both则都可以解决，所以此方法在工作中用得更多。

  （4）外墙法是指在父元素外面，添加“一道墙”，设置属性 clear:both

  （5）内墙法是指在父元素内部，浮动元素的最后面，添加“一道墙”，设置属性 clear:both

  （6）伪元素是指为了少创建元素，对父元素添加afer伪元素，设置属性 content：“”；display ：block；clear:both。

  注意：这里所说的少创建元素，实际上并没有少创建，添加的伪元素也是元素，只不过没有写在HTML文档中而已。

  23、请说明 position:absolute和float属性的异同。

  共同点是对内联元素设置float和 absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

  不同点是float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止， absolute会覆盖文档流中的其他元素，即遮盖现象。

  24、CSS的哪些样式可以继承？哪些不可以继承？

  可继承的样式有font- size font-family color, UL LI DL DD DT。

  不可继承的样式有 border、 padding, margin, width、 height。

  注意：为了方便辨识，与字体相关的样式通常可以继承，与尺寸相关的样式通常不能继承。

  25、CSS优先级如何排序

  优先级如下:

  ！important>style（内联）>ld（权重100）> class（权重10）>标签（权重1）。同类别的样式中，后面的会覆盖前面的。

  26、为什么要初始化CSS？

  因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。

  当然，初始化样式有时会对SEO产生一定的影响，但鱼和熊掌不可兼得，所以在力求影响最小的情况下初始化CSS。

  最简单的初始化方法就是：*{ padding：0；margin：0；}

  27、简要描述块级元素和行内元素的区别。

  块级元素的前后都会自动换行。默认情况下，块级元素会独占一行。例如

  都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。

  行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。例如等，对于行内元素，不能设置其高度和宽度。

  还有一种元素是行内块级元素，比如< input>元素等。这些元素可以和其他行内元素位于同一行，同时可以设置其高度和宽度。

  28、解释浮动及其工作原理

  浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止。要想使元素浮动，必须为元素设置一个宽度（ width）。虽然浮动元素已不在文档流中，但是它浮动后所处的位置依然在浮动之前的水平方向上。

  因为浮动元素不在文档流中，所以文档流中的块元素表现得就像浮动元素不存在一样，下面的元素会填补原来的位置。

  有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素。

  29、解释一下 CSS Sprite，以及如何在页面或网站中使用它

  CSS Sprite其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“ background- image"“ background- repeat”“ background- position”的组合进行背景定位， background- position可以用数字精确地定位出背景图片的位置。

  注意：在高级浏览器中，可以基于图片的bose64编码存储，将图片与其他类型的文件打包。

  30、在书写高效CSS时有哪些问题需要考虑？

  （1）样式，从右向左解析一个选择器

  （2）类型选择器的速度，ID选择器最快， Universal（通配符*）最慢。对于常用的4种类型选择器，解析速度由快到慢依次是ID、 class, tag和 universal。

  （3）不要用标签限制ID选择器（如：ul#main- navigation{}，ID已经是唯一的，不需要Tag来限制，这样做会让选择器变慢）。

  （4）后代选择器最糟糕（换句话说， html body ul li a{}这个选择器是很低效的）。

  （5）想清楚你的需求，再去书写选择器。

  （6）CSS3选择器（如nth- child）能够漂亮地定位我们想要的元素，又能保证CSS整洁易读。然而，这些神奇的选择器会浪费很多的浏览器资源。

  （7）我们知道ID选择器的速度最快，但是如果都用ID选择器，会降低代码的可读性和可维护性等。在大型项目中，相对于使用ID选择器提升速度，代码的可读性和可维护性带来的收益更大。

  31、说出几种解决IE6 Bug的方法。

  解决方案如下：

  （1）双边距问题，是使用fLoat引起的。

  解决方法是使用 display:inline。

  （2）3像素问题，是使用float引起的。

  解决方法是使用 margin- right：-3px。

  （3）超链接 hover伪类样式，单击后失效。

  解决方法是使用以下正确的书写顺序：L→V→H→A（link, visited, hover.， active）。

  （4）z- index问题。

  解决方法是给父级添加 position：relative

  （5）PNG图片半透明问题。

  解决方法是使用 JavaScript代码库，或使用IE滤镜

  注意：在使用E滤镜解决PNG图片透明度的时候，在1E6中，会对事件产生影响。

  31、页面重构怎样操作？

  编写CSS，让页面结构更合理化，提升用户体验，达到良好的页面效果并提升性能

  32、display:none和 visibility:hidden的区别是什么？

  display:none隐藏对应的元素，在文档流中不再给它分配空间，它各边的元素会合拢，即脱离文档流。

  visibility:hidden隐藏对应的元素，但是在文档流中仍保留原来的空间。

  33、内联元素可以实现浮动吗？

  在CSS中，任何元素都可以浮动。不论浮动元素本身是何种元素，都会生成个块级框。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。

  34、简要描述CSS中 content属性的作用。

  content属性与：before及：after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。比如，查看如下代码。

  body{
  counter-reset:chapter；
  }
   h1:before{
   content："第" counter（ chapter）"章"
  }
  h1{
  counter-increment:chapter：
  }
  <h1></h1>
  <h1></h1>
  <h1></h1>
  

  35、如何定义高度很小的容器？

  因为有一个默认的行高，所以在IE6下无法定义小高度的容器。

  两种解决方案分别是 overflow:hidden或font-size：容器高度px