盒模型常用属性、媒体查询 、rem与em的区别

发布于：2022-03-26 10:05:59  栏目：技术文档

1. 实例演示盒模型常用属性

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的
下面的图片说明了盒子模型(Box Model)：

1.1 盒子高宽计算

元素的总宽度计算公式是这样的：
总元素的宽度=box宽度+左右padding+左右border+左右margin
元素的总高度最终计算公式是这样的：
总元素的高度=box高度+上下padding+上下border+上下margin

1.2 Padding(内边距) - 清除内容周围的区域，内边距是透明的

1.3 Border(边框) - 围绕在内边距和内容外的边框。

1.4 Margin(外边距) - 清除边框外的区域，外边距是透明的

2. 实例演示媒体查询

 多媒体查询语法
@media not|only mediatype and (expressions) {
    CSS 代码...;
}
all    用于所有多媒体类型设备
print    用于打印机
screen    用于电脑屏幕，平板，智能手机等。
speech    用于屏幕阅读器

3. 实例演示em,rem用法,并说出之间差别

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem -改用 %。
不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。
rem 单位如何转换为像素值
例如，根元素的字体大小 16px，2rem 将等同于 32px，即 2 x 16 = 32。
em 单位如何转换为像素值
例如，如果一个 div 有 18px 字体大小，2em 将等同于 36px，即 2 × 18 = 36。

相关推荐