盒子模型&媒体查询&字符图标

发布于：2022-05-10 11:21:19  栏目：技术文档

盒子模型

内边距，边框，外边距

    <div>
        <div></div>
        <div></div>
    </div>
    <style>
        div>:nth-of-type(1) {
            background-color: aqua;
            width: 400px;
            height: 400px;
            padding: 20px;
            border: 10px;
            margin:20px;
            border-style: dashed;
            box-sizing: border-box;
        }
        div>:nth-last-of-type(1) {
            background-color: rgb(227, 159, 174);
            width: 400px;
            height: 400px;
            margin: 50px;
        }
    </style>

以上第一个div的:

padding 使用1个值，表示四边都是20px;border 使用1个值，表示边框宽度都是10px;使用{box-sizing: border-box;}样式，表示计算宽度时，整体400px, 倒推计算，减去边框和内边距后，剩余的宽度才给盒子内部使用。即400-10-20-20-10=340px;

第二个div的外边距margin：50px 大于第一个div的外边距margin：20px，所以连个盒子的间距以大为准，即50px;

媒体查询，关键字@media

如果屏幕尺寸小于某个值，用 @media screen(max-width:xxx px){ 样式条件 }；

em rem px的使用

em表示子元素的的大小参照父元素的大小进行倍数放大，如无父元素，则向上一级寻找，或参照根元素，为相对参照。rem 则以根元素为参照基准经行放大，根元素变化，则子元素参照相应变化。默认为16px.px 为屏幕像素点，为绝对值，一次性写死，不够灵活，建议使用rem. 1rem=16px(默认值)

字符图标引入

1.首先下载字符图标到本地，选择font-class2.在样式文件中导入@import (url)3.挑选需要的图标，获取类名，4.在页面引入即可

相关推荐