欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

选择器的优先级，字体图标的应用，盒模型常用属性的缩写。

程序员文章站 2022-04-08 18:29:27
...

选择器的提权方式

id > class > tag

标签 ID CLASS TAG 说明
h1 0 0 1 TAG 1个
body h2 0 0 2 TAG 2个比上一个优先
html body h2 0 0 3 TAG 3个比上一个优先
.box 0 1 0 CLASS 进阶1位比上一个优先
h1.box 0 1 1 CLASS 1个 TAG 1个比上一个优先
#off 1 0 0 id 进阶1位比上一个优先
… … … … 以上方式有很多，就不举例了。

字体图标的应用

已将 iconfont.* 复制到 css 目录

<link rel="stylesheet" href="css/iconfont.css">

    

  1. <p>
    2. 

  2.     <span class="iconfont icon-baidu"></span>
    3. 

  3.     <span class="iconfont icon-google"></span>
    4. 

  4. </p>
    5.

盒模型常用属性的缩写

    

  1. body{
    2. 

  2.         /* font-family: sans-serif;
    3. 

  3.         font-size: 24px;
    4. 

  4.         font-style: italic;
    5. 

  5.         font-weight: lighter; */
    6. 

  6.     }
    7.
简写方式 body{font: italic lighter 36px sans-serif;} 
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>...</head>
    4. 

  4. <body>
    5. 

  5.     <div class="box">盒子</div>
    6. 

  6. </body>
    7. 

  7. </html>
    8.

box 的内边距

    

  1. .box {
    2. 

  2.         /* 内边距 */
    3. 

  3.         /* padding: 上 右 下 左; 按顺时针方向*/
    4. 

  4.         padding: 5px 10px 15px 20px;
    5. 

  5.         /* 页面看不到是因为padding是透明的,且背景色会自动扩展到padding */
    6. 

  6.         /* 将背景色裁切到到内容区 */
    7. 

  7.         background-clip: content-box;
    8. 

  8.         /* 当左右相等，而上下不相等，使用三值语法 */
    9. 

  9.         padding: 10px 20px 15px;
    10. 

  10.         /* 当左右相等，上下也相等，使用二值语法 */
    11. 

  11.         padding: 10px 30px;
    12. 

  12.         /* 如果四个方向全相等，使用单值语法 */
    13. 

  13.         padding: 10px;
    14. 

    15. 

  15.         /* 总结,当使用三值和二值时,只需要记住第二个永远表示左右就可以了 */
    16. 

    17. 

  17.     }
    18.

box 的外边距

    

  1.     .box {
    2. 

  2.         /* 外边距:控制多个盒子之间的排列间距 */
    3. 

  3.         /* 四值,顺时针,上右下左 */
    4. 

  4.         margin: 5px 8px 10px 15px;
    5. 

  5.         /* 三值,左右相等，上下不等 */
    6. 

  6.         margin: 10px 30px 15px;
    7. 

  7.         /* 二值,左右相等,上下也相等 */
    8. 

  8.         margin: 10px 15px;
    9. 

  9.         /* 单值,四个方向全相等 */
    10. 

  10.         margin: 8px;
    11. 

  11.     }
    12.

上一篇： 使用 google_breakpad 分析 Electron 崩溃日志文件

下一篇： jquery+html5制作超酷的圆盘时钟表_jquery

推荐阅读