#CSS常见样式2

作者: Komolei | 来源:发表于2017-02-28 00:52 被阅读0次

css
CSS常见样式2
CSS常见样式2
CSS常见样式2
css常见样式2
CSS常见样式2
css常见样式2
CSS常见样式 2
CSS常见样式2
CSS常见样式2

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
让行内元素水平居中；作用在块级元素上；能让行内元素水平居中。
IE 盒模型和W3C盒模型有什么区别?
宽度的计算标准不一样：
IE盒模型：width=border.width+padding.width+content.width；外面的margin不变
W3C盒模型：width=content.width;
*{ box-sizing: border-box;}的作用是什么？
让所有的元素的盒子模型是按照IE盒模型进行计算的
line-height: 2和line-height: 200%有什么区别?
line-height:是对单行文本起作用的，可继承的。
line-height:2；相对于自身文本大小的两倍；而这个倍数能被基础，下面的行号就是按照字体的大小2来计算的
line-height:200%：相对于父元素的200%，即继承父元素的font-size，然后再乘以2得出结果；先是计算出值来，然后这个值被继承，不变。如line-height：200%；font-size=16px;则这个行高才16200%=32px,然后这个值被继承，不管下面的字体会有多大了。所以有时候字体的大小超过行高时会堆积上来。
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
三个特性：一、有行内元素的性质：大小是随内容的大小而设定的，不占据一行；二、有块级元素的特性：可以设置宽高；
三、有间隙；
去缝隙：span标签并行写在一起；span格式写的不一样；设置font-size：0；然后再设置font-size。
```
 <title>JS Bin</title>
```
```
 <style>  
 span{
     display: inline-block;
     border:1px solid #f0f;
     font-size:10px;
   }
   div{
       font-size:0;
       }
   </style>
   <div>
        <span>ggggggggggggggg</span>
        <span>ddddddddddffff</span>
    </div> 
```

顶端对齐：vertical-align：top；

CSS sprite 是什么?
称为精灵图，也叫”雪碧图“，是一种png的图片格式。用一张.png格式图片来放置所有的小图标，然后引用这一张图片，设置background-position来显示不同的图标。这样可以减少向服务器的请求数量，提高加载速度。
让一个元素"看不见"有几种方式？有什么区别?
visibility:hidden;（隐藏看不见，但是它还是在的，占据空间，只是我们看不见）
opacity：0；同上
~~background：rgb（0 0 0 0.1）同上~~ background-color:rgba(0, 0, 0, 0.1)同上
display：none；完全消失，不存在了。

代码

一、

       <title>JS Bin</title>

    <style>  
      div{
        width: 100px;
        height: 100px;
        background-image: url("http://7xpvnv.com2.z0.glb.qiniucdn.com/f754722e-f087-4014-9711-15a36bb3ac0b");
        background-size:100px 200px;
        background-repeat: no-repeat;                
      }
      div:hover{
       background-position: 0px -100px;
       }
      </style>
       <div>                   
       </div>

二、

    <title>JS Bin</title>

    <style>  
     @font-face {
      font-family: 'komo';  /* project id 241314 */
      src: url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.eot');
      src: url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.woff') format('woff'),
      url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_5fckcrmzd6zgp66r.svg#iconfont') format('svg');
        }
     div{
       font-family: komo;
       font-size: 100px;
       font-style: normal;
     }
      div:hover{
        color: red;
      }          
  </style>
       <div class="komo">
               
       </div>

**严禁转载，违者必究！