字体图标的用法 盒模型的演示 box-sizing的用法

1 字体图标的用法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="./zy.css">
  9. </head>
  10. <body>
  11. <div class="A">
  12. <span class="iconfont icon-Chart"></span>
  13. <!-- 引用字体图标的代码 <span class="iconfont icon-图标名"></span> -->
  14. </div>
  15. <span class="iconfont icon-Loop"></span>
  16. </body>
  17. </html>

zy.css

  1. @import url(./font_zy/iconfont.css);
  2. @import url(./font_1/iconfont.css);
  3. @import url(./font_2/iconfont.css);
  4. /* 引用下载好的字体图标文件样式 */
  5. .icon-Loop {
  6. color: blue;
  7. font-size: 3em;
  8. }
  9. .icon-Chart{
  10. color: blue;
  11. /* 改变图标颜色 */
  12. font-size: 5em;
  13. /* 改变图标大小 */
  14. }

2 按自己理解写一下布局的原则与元素的默认排列方式与元素类型?

  1. 布局原则
    遵守从左到右,从上往下的布局原则

  2. 元素默认的排列方式
    html中的元素默认在浏览器中按照文档流的顺序排列,且排列顺序与html的书写顺序一致(写在前面的显示在前面)
    水平排列的是内联元素 垂直排列的是块元素

  3. 元素的类型
    内联元素
    任何元素默认的就是内联元素:display:inline

块级元素:默认就独占一行:display:block

盒模型常用属性有哪些,实例演示;

  1. width 宽度
  2. height 高度
  3. border 边框
  4. padding 内边距
  5. margin 外边距
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. .box{
  10. height: 150px;
  11. width: 150px;
  12. background-color: bisque;
  13. /* 让背景色不覆盖到内边距 */
  14. background-clip: content-box;
  15. /* border边框 的值 有solid 实线 dashed 虚线 */
  16. border:5px dashed red;
  17. /* 可以通过添加内边框,让内容与边框之间可以呼吸 */
  18. padding: 10px;
  19. /* 外边距 */
  20. margin: 15px;
  21. }
  22. /* 为了简化布局,计算方便,我们通常直观的认为盒子的width,height应该就是盒子的最终大小 */
  23. .box{
  24. /*border-box width/height = padding +border+ width/height */
  25. box-sizing: border-box;
  26. /* content-box:width/height=width/height 默认值 */
  27. /* box-sizing: content-box; */
  28. }
  29. /* box-sizing: border-box; 计算盒子大小时,将内边距与边框全部计算在内,
  30. 所以,width,height就是最终大小,从而简化布局 */
  31. /* 实现所有元素样式的初始化 */
  32. *{
  33. padding: 0;
  34. margin: 0;
  35. box-sizing: border-box;
  36. }
  37. /* 盒模型常用属性
  38. 1. width
  39. 2. height
  40. 3. border
  41. 4. padding
  42. 5. margin */
  43. /* box-sizing:改变盒子大小的计算方式 */
  44. </style>
  45. </head>
  46. <body>
  47. <div class="box">
  48. </div>
  49. <div class="box">
  50. </div>
  51. </body>
  52. </html>

4. 图示: box-sizing属性的解决了什么问题?

box-sizing:改变盒子大小的计算方式

  • border-box width/height = padding +border+ width/height
    计算盒子大小时,将内边距与边框全部计算在内

  • content-box:width/height=width/height 默认值为content-box
    计算盒子大小时,将内边距与边框不计算在内