search

博客列表 >210323 CSS 盒子模型 字体图标 定位

210323 CSS 盒子模型 字体图标 定位

xyphpblog
xyphpblog原创
2021年03月25日 16:21:40867浏览

盒子模型

在CSS中，HTML元素相当于一个个盒子。
块级盒子：

  • 换行
  • 占用容器全部宽度（flow从上到下）
  • 有width, height

行内盒子：

  • 只占用满足内容需要的宽度（flow从左到右）
  • 忽略width, height
  • 不能包含块级元素作为子元素

盒子宽度和高度计算

盒子宽度 = 内容区width + (2 x padding) + (2 x border)
盒子高度 = 内容区height + (2 x padding) + (2 x border)

单位

  • px: 绝对单位，固定大小
  • em：相对单位，相对于父节点字体大小
  • rem: 相对单位，相对于根节点html字体大小
  • %：相对单位，相对于父节点大小

页面初始化：

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     /*盒子大小按宽高设定固定，内容区会缩小*/
  6. }
  7. html {
  8.     font-size: 10px; 
  9.       /* 易于计算 */
  10. }

转为标准盒子-内容区作为宽高计算标准

  1. box-sizing: content-box;
  2. background-clip: content-box;

视口

视口 viewport
可视窗口，手机端显示PC页面默认980px
单位
vh(view-height)：1vh = 视口高度的1/100
vw(view-width): 1vw = 视口宽度的1/100

margin-left: auto; 尽可能增加左侧空间，向右
margin-right: auto; 尽可能增加右侧空间，向左

  1.         .box {
  2.             width: 50vw;
  3.             height: 50vh;
  4.             margin: 10px auto;
  5.             border: 2px solid;
  6.             color: black;
  7.             background-color: lightblue;
  8.             padding: 5px 10px;
  9.             font-size: 30px;
  10.         }

这个盒子始终占据视口宽度的一半，高度的一半

字体图标

引入方式

1 . Unicode

兼容性好

  • 下载字体图标文件夹放入项目目录

  • 新建.css文件，定义字体，类

  • 在HTML页面中引入.css文件

  • 在元素中使用图标的对应编码

效果

2 . Font class
方便

第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>

例：

图标：

定位

规则：
position: value;

  • static：默认，即无定位
  • relative：相对于在文档流中的原始位置，转为定位元素
  • absolute：绝对，脱离文档流，相对于在文档流中的原始位置（若无父元素即相对于浏览器窗口），转为定位元素
  • fixed：固定位置，相对于浏览器窗口，不受滚动影响

定位元素可以设置偏移量
文档流：显示顺序于书写顺序一致
top
right
left
bottom

例：
原始位置

设为position: static;

设为position: relative;

  1.   .box {
  2.     width: 20em;
  3.     height: 15em;
  4.     background-color: lightcoral;
  5.     position: relative;
  6.     top: 6em;
  7.     left: 6em;
  8.    }


设为position: absolute;

  1.   .box {
  2.     width: 20em;
  3.     height: 15em;
  4.     background-color: lightcoral;
  5.     position: absolute;
  6.     top: 6em;
  7.     left: 6em;
  8.    }


设为position: fixed;

绝对定位应用

absolute 与父级定位元素
若父级非定位元素：

  1. <head>
  2.     <style>
  3.         .box {
  4.             width: 20em;
  5.             height: 15em;
  6.             background-color: lightcoral;
  7.             position: absolute;
  8.             top: 6em;
  9.             left: 6em;
  10.         }
  11.         .parent {
  12.             border: 1px solid black;
  13.             height: 26em;
  14.             /* top: 4em;
  15.             left: 4em; */
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="parent">
  21.         <div class="box"></div>
  22.     </div>
  23.     <!-- <h2>hello world</h2> -->
  24. </body>

若父级为定位元素relative:

  1.    <style>
  2.         .box {
  3.             width: 20em;
  4.             height: 15em;
  5.             background-color: lightcoral;
  6.             position: absolute;
  7.             top: 6em;
  8.             left: 6em;
  9.         }
  10.         .parent {
  11.             border: 1px solid black;
  12.             height: 26em;
  13.             position: relative;
  14.             top: 4em;
  15.             left: 4em;
  16.         }
  17.     </style>

居中

行内元素居中

设置行高为容器高度即可

  1.     <style>
  2.         .box {
  3.             width: 20em;
  4.             height: 15em;
  5.             background-color: lightcoral;
  6.             text-align: center;
  7.             line-height: 15em;
  8.         }
  9.     </style>

块元素居中

注：设置 margin:auto 只能水平居中，因为垂直方向没有限制，水平方向有限制

  1.  <style>
  2.         .box {
  3.             width: 16em;
  4.             height: 15em;
  5.             background-color: lightcoral;
  6.             text-align: center;
  7.             line-height: 15em;
  8.             position: absolute;
  9.             top: 0;
  10.             bottom: 0;
  11.             left: 0;
  12.             right: 0;
  13.             margin: auto;
  14.         }
  16.         .parent {
  17.             border: 1px solid;
  18.             background-color: lightskyblue;
  19.             width: 26em;
  20.             height: 26em;
  21.             position: relative;
  22.         }
  23.     </style>
  1. <div class="parent">
  2.         <div class="box"></div>
  3.     </div>

上一条：【CSS入门】理解css中min-width和max-width，width与它们之间的区别联系下一条：万岳教育直播源码,教育app源码,教育系统源码
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多