CSS基础

03 Jun 2013, by

简写顺序

书写顺序

文字单行省略号

-o-text-overflow: ellipsis;/*兼容opera*/
text-overflow: ellipsis;/*这就是省略号喽*/
overflow: hidden;/*设置超过的隐藏*/
white-space: nowrap;/*设置不折行*/

黑色遮罩层(显示图片大图)

<div class="origin-image">
</div>
.origin-image {
  -webkit-user-select: none;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0,0,0,0.70);
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  img {
    position: relative;
    top: 50%;
  }
}

全屏图片首页

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body 中加入 font-family: ‘Helvetica Neue’, Arial, ‘liberation Sans’, FreeSans, ‘Hiragino Sans GB’, sans-serif; 字体会从第一个开始往后寻找浏览器能够识别的字体。

避免“多类症”，“多div症”

使用后代选择器减少class的使用，使用特定标签减少div的使用

!important重要次序

让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中

使用绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中

高度(height)与宽度(width)设置成百分比的时候需要设置父类元素的宽高

比如将父类元素设置成100%,子类为50%,子类才能正常显示。

div中包含链接(扩大链接点击范围)

<div id="play"><a class="start">PLAY</a></div>

#play {
  width: 300px;
  height: 300px;
}
#play a {
  display: block;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

一般通用模版初始化

normalize.css

<!--
HTML5. Use tags like <article>, <section>, etc.
See: http://www.sitepoint.com/web-foundations/doctypes/
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--
    Ask IE to behave like a modern browser
    See: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
    -->
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Profile</title>

    <!--
    Disables zooming on mobile devices.
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!--
    Stylesheet that minimizes browser differences.
    See: http://necolas.github.io/normalize.css/
    -->
    <link rel="stylesheet" href="css/normalize.css">

    <!--
    Our own stylesheet.
    -->
    <link rel="stylesheet" href="css/main.css">    
  </head>
  <body>

  </body>
</html>

CSS省略号text-overflow超出溢出显示省略号

text-overflow参数值和解释： clip : 　不显示省略标记（…），而是简单的裁切 ellipsis : 　当对象内文本溢出时显示省略标记（…） 要想实现显示不完内容将显示省略号代替，还需要html nobr标签完成（nobr禁止换行标签）

overflow: hidden;
text-overflow: ellipsis;
<li><a href="#"><nobr>显示不完显示省略号，测试内容</nobr></a></li>

div占据整个屏幕

必须使用绝对布局absolute，否则无法设置高度的百分比height: 100%;。

空白边叠加

相对定位与绝对定位区别

不要使用小数控制大小，包括百分比(%)单位和像素(px)单位。

清除浮动:

or

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。 建议：推荐使用，建议定义公共类，以减少CSS代码。

      <style type="text/css">

      .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
      .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
      .left{float:left;width:20%;height:200px;background:#DDD}
      .right{float:right;width:30%;height:80px;background:#DDD}

      </style>

      <div class="div1">
          <div class="left">Left</div>
          <div class="right">Right</div>
      </div>

      <div class="div2">
      div2
      </div>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

导航的常见设置:

ul { list-style: none; padding: 0; margin: 0;}   去掉前面的点
ul li { display: inline; }   导航横向排列(不要使用浮动)

display

inline-block可以使用margin，padding

a标签去掉下划线

text-decoration:none;

扩大链接可以点击的范围设置:

1.设置成块元素然后放大:

  display: inline-block;
  width: 180px;
  height: 210px;

2.直接在链接中padding:

a {
  padding: 10px;
}

居中设置

打开新页面时设置：

target: '_blank'

常用元素

不常用元素

font字体类型

如何将页脚固定在页面底部

css选择器优先级

对CSS中的Position、Float属性的一些深入探讨