小白学习路之响应式设计

响应式设计

嘀嘀嘀~距上一次写博客又过了好长时间了。最近又学习了一些东西，是时候找个空闲的时间记录在博客里了！择日不如撞日！

• 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