可以这样写margin-top:4pxmargin-left:4pxmargin-right:4pxmargin-bottom:4px ；
也可以简写:margin:4px 8px (上下外边距是4px ，左右外边距是8px)；
也可以这样简写 margin:4px 8px 6px(上面外边距是4px 左右外边距是8px 下面外边距是6px)。
内边距是padding，和margin是一样的用法。
一个盒子总宽度是margin+border+padding+width（border也要算在尺寸里）
一个盒子总高度是margin+border+padding+height（border也要算在尺寸里）
有什么问题请继续问
屏幕的总宽度和高度，他们是显示器的尺寸，而不是浏览器的尺寸。这些尺寸以设备像素为单位进行测量，平时很少用到
通过 screen.width 和 screen.height 获取
浏览器窗口的内部尺寸，以CSS像素为单位（测量值包含滚动条）
通过 window.innerWidth 和 window.innerHeight 获取
文档的水平和垂直滚动偏移量。因此，您可以找出用户滚动了多少。以CSS像素为单位
通过 window.pageXOffset 和 window.pageYOffset 获取
字面理解，视口即可以看见的窗口大小。所以大多数情况下他和浏览器的窗口大小一致。
我们知道html页面最外层的元素是html，他在浏览器中显示，但其实在浏览器和html页面之间，还有一层，即：视口。
他在html元素的外层，包含html。
通过 document.documentElement.clientWidth 和 document.documentElement.clientHeight //document.documentElement实际上是html元素 获取
我们平时设置的html/body width:100%，实际上就是设置html，body等于视口的宽度。设置某个元素，如侧边栏width:20%，实际也是相对于视口设置的（如果他的上级元素是body：width：100%），所以当浏览器窗口变化，他的宽度会跟随变化。
但视口不是HTML创建的，因此不能受CSS影响。当我们设置html为固定宽度width:200px，它的值还是浏览器窗口的宽度和高度。
窗口包含滚动条的大小，视口不包含，视口只是我们可以看见的大小
即页面实际的宽和高
通过 document.documentElement.offsetWidth 和 document.documentElement.offsetHeight 获取
发生鼠标点击事件时，常见的属性值
@media all and (max-width: 400px)
此处的值一般指的浏览器大小，即视口的大小
A tale of two viewports — part one
A tale of two viewports — part two
