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

字体图标

进入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)的值)

字体图标

布局原则

盒子模型的理解

box-sizing

更多相关文章

随机推荐