美文网首页
CSS常见样式2

CSS常见样式2

作者: madpluto | 来源:发表于2017-05-25 11:32 被阅读0次

1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?

text-align: center作用在块级元素上,可以让元素内文本以及 display 为 inline 和 inline-block 的子元素在元素内水平居中。

2. IE 盒模型和W3C盒模型有什么区别?

  • W3C盒模型:


    W3C模型
  • IE盒模型


    IE盒模型
  • 区别:W3C盒模型中padding、border所占的空间不在width和height范围内,而IE盒模型种padding、border所占的空间包含在width和height范围内。

3. *{ box-sizing: border-box;}的作用是什么?

box-sizing是CSS3中定义的新样式,它有两个属性 border-box 和 content-box,分别代表使用IE盒模型与W3C标准盒模型。
box-sizing: border-box; 设置使用IE盒模型。

4. line-height: 2和line-height: 200%有什么区别?

  • ine-height: 2是指元素行高为自身的2倍,指的是相对自身大小的倍数。
  • line-height: 200%是指元素行高为父元素大小的2倍,相对于父元素大小变化而变化,浏览器会计算出一个具体的值作用于元素上。

5. inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

  • inline-block同时具有块级元素和行内元素的一些特性。既可以像行内元素一样不用独占一行,又可以像块级元素一样可以设置宽高。
  • 去除缝隙的方法有三种:
    1. 在代码中两个元素之间不使用换行,直接连写。
    2. 可以给需要消除缝隙的元素设置一个父元素,在父元素中使用font-size:0;然后再在元素中使用font-size设置元素原本的大小。
    3. 父元素设置dispaly:flex,Flex是Flexible Box的缩写,意为"弹性布局"。注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
  • 为元素设置vertical-align:top;属性。

6. CSS sprite 是什么?

CSS sprite是指精灵图或者雪碧图。就是把页面上的多个图片集合在一张图片上,然后使用背景图片时利用background-position属性,定位所需要的图片在精灵图上的位置即可。这样一个网页的背景图不需要向服务器发送多次请求,图片数量也会变少,加载网页时速度会变快。

7. 让一个元素"看不见"有几种方式?有什么区别?

有四种方式:

  1. 设置透明度,使用opacity:0;使元素完全透明。
  2. 隐藏元素,使用visibility:hidden;用户不可见。
  3. 使元素在页面消失,使用dispaly:none;元素不会占用位置。
  4. background-color: rgba(0,0,0,0) 只是背景色透明。

8. 代码

  1. 使用 CSSsrpite 实现如下效果
  2. 使用字体图标实现代码1中的效果
<html>
<head>
  <meta charset="utf-8">
 <style>
@font-face {
  font-family: 'iconfont';  /* project id 220361 */
  src: url('//at.alicdn.com/t/font_jmg4jol7kc4hd7vi.eot');
  src: url('//at.alicdn.com/t/font_jmg4jol7kc4hd7vi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_jmg4jol7kc4hd7vi.woff') format('woff'),
  url('//at.alicdn.com/t/font_jmg4jol7kc4hd7vi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_jmg4jol7kc4hd7vi.svg#iconfont') format('svg');
}span.logo-fontIcon{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  font-size: 100px;
  color: #1296DB;
}
span.logo-fontIcon:hover{
    color: #D81E06;
</style>
  <title>JS Bin</title>
</head>
<body>
<span class="logo-fontIcon"></span>
</body>
</html>

相关文章

  • css

    css基础css选择器css常见样式1css常见样式2CSS布局上CSS布局下flex布局塔防小游戏flex布局青...

  • CSS常见样式2

    1- text-align:center的作用是实现元素内部文字的居中。 text-align:center的意思...

  • CSS常见样式2

    text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align 属...

  • CSS常见样式2

    1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align...

  • css常见样式2

    1.text-align:center的作用 text-align属性规定元素中的文本等的水平对齐方式。text-...

  • CSS常见样式2

    问答 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-a...

  • css常见样式2

    一、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 在父元素中写入,可以...

  • CSS常见样式 2

    一、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align...

  • CSS常见样式2

    1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align...

  • CSS常见样式2

    一.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中? text-alig...

网友评论

      本文标题:CSS常见样式2

      本文链接:https://www.haomeiwen.com/subject/xagaxxtx.html