css知识点

Author Avatar
YAN7 3月 17, 2016

主要加强行css的各种不够熟悉的知识点.（不断更新中）

行高

  1. 根据行高的概念，因为字体的上下边距是一样的，所以当把字体的行高设置为和该字体容器的高度相同时，字体会垂直居中。

  2. 记忆诀窍：LoVe,HAte必须严格按照这个顺序来写，否则伪类可能不起作用，link和visited伪类只能用于a标签，hover和active伪类可用于其他标签.

    • demo:
    <style>
 a {
     color: white;
     display: inline-block;
     width: 200px;
     height: 50px;
     text-align: center;
     /*根据行高的概念，因为字体的上下边距是一样的，所以当把字体的行高设置为和
     该字体容器的高度相同时，字体会垂直居中。
     */
     line-height: 50px;
     text-decoration: none;
     background-color: rgb(234,123,1);
 }
 /*a链接没有被访问过时的样式*/
 a:link {

 }
 /*a链接被访问过时的样式*/
 a:visited {
     color: #1FDD0F;
 }
 /*鼠标悬停在该处时的样式*/
 a:hover {
     background-color: rgb(123,123,123);
 }
 /*鼠标点击时的样式*/
 a:active {
     background-color: rgb(213,213,2);
 }
 /*记忆诀窍：LoVe,HAte*/
 /*必须严格按照这个顺序来写，否则伪类可能不起作用*/
 /*link和visited伪类只能用于a标签，hover和active伪类可用于其他标签*/
</style>
</head>
<body>
 <a href="#" id="hahah">我是一只小小鸟</a>
</body>

盒模型

  1. 盒模型包括：外边距（margin）、边框（border）、內边距（padding）、内容（content）。
  2. 边框的连写：border:size style color(1px solid reed);
  3. 內边距：可以看作是盒子内容的一部分（边框也是），因为改变內边距的大小会改变盒子大小。这种结果符合微软对盒模型的定义。
  4. padding（margin同理）的写法：
    • padding:40px; 四周都加上40px的边框。
    • padding:40px 20px;给上下內边距设置40px，给左右內边距设置20px.
    • padding:5px 10px 15px 20px;以顺时针方向设置。
  5. 盒子的大小：内容加上边框和內边距的宽度.
  6. 很多标签默认带有margin和padding，清除默认边距的方法：
    • *{margin:0 padding:0}
    • 暂时使用，项目中不推荐使用这种方式
  7. 使小盒子在大盒子中居中的方法：因为增大padding会使盒子增大（符合微软对盒子大小的计算，即内容、边框、内边距都属于盒子内容的一部分，只有外边距属于边距，所以增大padding也相当于增大盒子）.所以增大了內边距，要使盒子总大小不变，就要相应的缩小盒子的宽高，使盒子大小保持不变.
  • demo:
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .dad {
        /*使小盒子在大盒子中居中*/
        /*因为增大padding会使盒子增大（符合微软对盒子大小的计算，即内容、边框、内边距都属于盒子内容的一部分，只有外边距属于边距，所以增大padding也相当于增大盒子）*/
        /*所以增大了內边距，要是盒子总大小不变，就要相应的缩小盒子的宽高，使盒子大小保持不变*/
        width: 200px;
        height: 200px;
        background-color: red;
        padding-left: 100px;
        padding-top: 100px;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: green;
    }

    </style>
</head>
<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>
</html>

伪类

  1. :first-child选择某个元素的第一个子元素；
  2. :last-child选择某个元素的最后一个子元素；
  3. :nth-child()选择某个元素的一个或多个特定的子元素；
  4. :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
  5. :nth-of-type()选择指定的元素；
  6. :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
  7. :first-of-type选择一个上级元素下的第一个同类子元素；
  8. :only-child选择的元素是它的父元素的唯一一个了元素；
  9. :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
  10. :empty选择的元素里面没有任何内容。

css属性

  1. pacity:0~1 透明度 数值越小越透明。
  2. border-radius: 单位:em,px,%, 边框圆角属性。

随机随写

  1. 把 display none 不会保留元素本该显示的空间，但是 visibility: hidden; 还会保留。
  2. 设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
 .simple {
  width: 500px;
  margin: 20px auto;
  -webkit-sfa: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

3.想要所有的盒子都实现这样效果，只要在css初始化文件中加上下面这段代码就可以了:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}