响应式设计
嘀嘀嘀~距上一次写博客又过了好长时间了。最近又学习了一些东西，是时候找个空闲的时间记录在博客里了！择日不如撞日！
-
viewport
移动设备上的viewport就是设备的屏幕上能用来显示我们网页的那一块区域。其中，viewport是可以设置的：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale-1.0,user-scalable=0" >
-
媒体查询
1.语法：以@media开头来表示这是一条媒体查询语句，@media后面是一个或多个表达式，如果表达式为真，则应用样式，如：
@media (max-width:600px) {
.box{
display:block;
}
}
2.使用：可以在link标签上加上media属性，也可以在css文件中引入@media
<!-- link标签中的css媒体查询属性 -->
<link rel="stylesheet" href="css/main.css" media="(max-width:800px)">
<!-- css样式表中的媒体查询 -->
<style>
@media (max-width:800px){
.box{
display:none;
}
}
</style>
-
盒子模型 内外边距
div盒子最内部分是实际的内容（content），直接包围内容的是内边距（padding），内边距呈现了元素的背景。内边距的边缘是边框（border），边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其他的任何元素。
提示：背景应用于由content和padding组成的区域 -
偏移量属性
offsetHeight：可理解为div的可视高度，即在垂直方向上占用的空间大小，相当于（样式height+上下padding+上下border）
offsetWidth：可理解为div的可视宽度，即在水平方向上占用的空间大小，相当于（样式width+左右padding+左右border）
offsetTop：可理解为容器相对于document的top的绝对偏移，等于top+margin-top
offsetLeft：可理解为容器相对于document的left的绝对偏移，等于left+margin-left
- 当前客户区：是元素内容及其内边距所占空间的大小
clientWidth：width+左右padding
clientHeight：height+上下padding
clientTop：元素内部相对于元素本身的top偏移，实际上就是border-top
- 滚动区：含滚动内容的元素大小
scrollHeight：内容的实际高度+上下padding
scrollWidth：内容的实际宽度+左右padding
scrollTop：Y轴的滚动条没有或滚动到最上是为0；Y轴的滚动条滚到最下时是（scrollHeight-clientHeight）【即：被隐藏在当前内容区域上方的像素数】
以上内容为学习后的整合，参考学习资料来自：前端cp