盒模型、媒体查询、常用单位em和rem的区别

一、盒模型

块元素：独占一行，一行只能有一个模型

行内元素：一行可以有多个模型

1、盒模型的一些基础属性

• 盒子的宽高
• 盒子的背景色
• 盒子的边框

.box {
            width: 200px;
            height: 200px;
            background: pink;
            border: 5px solid black;
        }

2、盒模型的其他属性

• 盒子的内外边距
• 背景裁切
• 。。。

.box {
            padding: 20px;
            margin: 20px;
            background-clip: content-box;
        }

3、盒子的大小设置

当我们如上定义个宽高为200*200的盒子后，实际加上边框和内外边距得到的是一个宽高为290的盒子（以宽度为例，具体计算如下）。

200(盒子的宽度)+40(左右内边距)+10(左右边框)+40(左右外边距)=290.

那么我们如何正确的计算盒子的大小？

• 在设置盒子宽高的时候就需要减去内外边距和边框

.box {
            width: 150px;
            height: 150px;
            background: pink;
            border: 5px solid black;
            padding: 20px;
            margin: 20px;
        }

这样我们就能得到一个200*200的盒子，但是此种方法计算繁琐，还容易出错。

• 利用box-sizing属性

.box {
            width: 200px;
            height: 200px;
            background: pink;
            border: 5px solid black;
            padding: 20px;
            margin: 20px;
            box-sizing: border-box;
        }

加上box-sizing: border-box后我们给出200 200的宽高就能得到实际为200 200宽高的盒子

二、媒体查询

1、什么是媒体查询？

媒体： 显示/输出信息的介质/载体—>屏幕打印机

查询： 根据当前媒体宽度的变化来选择不同的页面或显示效果

2、实例演示媒体查询

1）我们给整个body一个粉色的背景色，设置尺寸为451*209.

2）设置代码

body {
            background-color: pink;
        }
        @media(max-width:450px){
            body {
                background-color: green;
            }
        }

3)调整body的宽度至450或以下。

4)此时因为尺寸的变化，body的背景色变为了绿色,这是一个由大到小的匹配过程，实际的情况就是一个pc————>移动的一个转变。

三、常用单位em与rem的区别

1、常用单位

• px：像素，绝对单位，1in= 96px；
• em
• rem
• vh
• vw

2、实例演示

• em

<div><span class="before">Hello</span></div>
    <p><span class="after">Hello</span></p>

p {
            font-size: 30px;
        }
        .before {
            font-size: 2em;
        }
        .after {
            font-size: 2em;
        }

两个盒子大小设置的都是2em为什么大小不同？

2em=16px,两段文字应该一样大小，但em在下面一个span的父元素p中被重新定义了->1em=30px，从而上面一段文字的大小是16px，而下面一段文字的大小是60px。

总结：em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱。

• rem

<div><span class="before">Hello</span></div>
    <p><span class="after">Hello</span></p>

        html {
            font-size: 30px;
        }
        p {
            font-size: 60px;
        }
        .before {
            font-size: 2rem;
        }
        .after {
            font-size: 2rem;
        }

总结：在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的