字体图标的使用和盒模型的理解与box-sizing解决了什么问题以及布局原则 -

Home > List of blog posts > 字体图标的使用和盒模型的理解与box-sizing解决了什么问题以及布局原则

Blogger Information

Blog 12

fans 0

comment 0

visits 6742

Special Recommendation

More>

Related recommendations

字体图标

进入iconfont选择字体图片加入购物车下载使用
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_r22oh21fsy/iconfont.css">
</head>
<body>
    <style>
        .icon-fenlei{
            color: blueviolet;
        }
    </style>
    <i class=" iconfont icon-fenlei"></i>
</body>
</html>

布局原则

文档流是网页中的一个位置，默认情况下页面的所有元素都在文档流中排列，分为块元素和行内元素

块元素在文档流中的特点
自上向下排列(独占一行)
默认宽度和元素一样
默认高度被内容撑开
行内元素在文档流中的特点
自左向右水平排列，如果一行中不足以容纳所有则切换到下一行继续自左向右水平排列
默认高度和宽度都被内容撑开
行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
行内元素支持水平方向外边距，不支持垂直方向的外边距
盒子模型的理解

浏览器在渲染页面时，它会将页面中的每一个元素都看作成一个矩形盒子，想象成盒子以后，对于页面的布局就变成了如何摆放盒子
每一个从内到外都有以下几个部分组成
内容区(content)
- 内容区界定这个盒子能装多少东西
内边距(padding)
- 内容区和边框之间的距离
外边距
- 盒子距离其他盒子的距离
  box-sizing
  默认情况下：width和height指定的盒子内容区的大小，可以通过box-sizing来修改盒子大小的计算方式

可选值：

content-box：默认值：内容盒子(width和height指定的是内容区的大小，如果设置了border和padding，那么会被增加到这个元素的宽高中)

border-box：width和height指定的是整个盒子的大小(如果设置了边框和外边距，也不回增加到这个元素中，内容的实际宽度是width减去(border+padding)的值)

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

第二天笔记整理

2021-06-30 15:05:59

字体图标

布局原则

盒子模型的理解

box-sizing