Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 210323 CSS 盒子模型 字体图标 定位
Blogger Information
Blog 18
fans 0
comment 0
visits 11036
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
210323 CSS 盒子模型 字体图标 定位
xyphpblog
Original
868 people have browsed it

盒子模型

在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>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post