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
    计算盒子大小时,将内边距与边框不计算在内

更多相关文章

  1. css_0701作业
  2. 属性访问器和dom元素的获取、遍历、增加
  3. 表单,框架,选择器,css的三种插入样式(内联,外部样式,元素中)
  4. 访问器属性与dom元素获取
  5. 0701学习实战作业
  6. 前端作业-flex布局
  7. 前端 JavaScript 实现一个简易计算器
  8. 字体图标引用、网页布局与元素排列、盒模型使用
  9. 字体图标、布局原理一级盒模型实例操作

随机推荐

  1. Hello, Android 深入(一)
  2. Android知识梳理之BroadcastReceiver整理
  3. Android(安卓)base-adapter-helper 源码
  4. Android安全加密:Https编程
  5. android:weight属性的使用——android开
  6. Android架构组件- Room数据库的使用
  7. Android(安卓)invalidate与postInvalidat
  8. 使用myelipse配置android开发环境
  9. Android开发教程
  10. Android相机Camera基础知识