字体图标

预览效果

字体图标,关键代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>字体图标</title>
  6. <!-- <link rel="stylesheet" href="font_icon/iconfont.css"> -->
  7. <link rel="stylesheet" type="text/css" href="css/style.css">
  8. </head>
  9. <body>
  10. <!-- 第一步找到素材网站 -->
  11. <!-- 第二步通过素材网站下载素材代码,解压素材包,放置代码文件夹中 -->
  12. <!-- 第三步通过代码中.html文件中类提示,去引入素材代码 -->
  13. <!-- 第四步通过link引入,在body中添加图标素材,放入图标类名称 -->
  14. <!-- 如果需要把图标单独放在一个文件中引入,需要把单独添加一个css文件,通过引入这个css文件来实现,在css文件中选中代码素材文件:@import url();实现 -->
  15. <span class="iconfont icon-shoucang"></span>
  16. </body>
  17. </html>
  18. ``````css
  19. @import url(../font_icon/iconfont.css);
  20. /*设置图标样式*/
  21. .icon-shoucang{color: #ff6700;font-size: 2em;}

布局的原则

宽度受限,高度无限

元素的默认排列方式

默认排列方式是从左到右,从上到下,一行没有空间的时候,会从下一行继续排列

元素的类型

元素的类型分为两类,一类是内联元素,一类是块元素内联元素是按照从左到右的方式进行排列,一行没有空间时,会从下一行继续排列。默认属性是:display:inline。块元素是独占一行,即使一行内还有空间,也会从下一行排列。默认属性是:display:block。

盒模型常用属性

宽度:width;高度:heigth;边框:border;外边距:margin;内边距:padding;

展示效果

相关代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>盒模型</title>
  6. <style type="text/css">
  7. *{
  8. margin: 0;
  9. padding: 0;
  10. box-sizing: border-box;
  11. }
  12. div{
  13. width: 200px;
  14. height: 200px;
  15. border: 1px solid #ccc;
  16. margin: 20px;
  17. padding: 50px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div>我是模型</div>
  23. </body>
  24. </html>

box-sizing属性的解决了

更多相关文章

  1. 图标,布局,元素类型,盒子模型
  2. 字体图标、布局原理以及盒模型实例操作及思考
  3. CSS-作业
  4. 字体图标的使用和盒模型的理解与box-sizing解决了什么问题以及布
  5. 伪类选择器+盒模型+icon的使用方法+百分比设置元素大小
  6. 盒模型与字体图标使用
  7. 字体图标用法与盒模型页面布局
  8. 图标以及盒模型
  9. 字体图标的用法和布局的原则与元素

随机推荐

  1. Android核心基础(五)
  2. 第12天android:短信发送+测试使用
  3. Android中NDK各版本下载
  4. Android(安卓)横竖屏幕切换
  5. Mac下获取android studio keystore的SHA1
  6. Android网络之HttpUrlConnection和Socket
  7. Android常用功能代码总结一
  8. android 隐藏ListView滚动条
  9. android通过程序收起通知栏
  10. Android问题总结