css-overflow以及overflow:hidden的理解与使用

css-overflow的概念理解

overflow是css样式类布局中一个非常常见的概念，它是用来规定当内容溢出目标框时需要如何处理的一种手段。
该属性定义溢出固定内容区域内的子节点元素内容会如何做处理。

overflow：

词名	值	默认值	作用
overflow	visible	是	overflow设置该值或不设值的默认值。内容不会被修剪，会呈现在元素目标框之外
overflow	hidden	否	内容会被修剪隐藏，超出目标框的内容不可见
overflow	scroll	否	内容会被修剪隐藏，但是浏览器会显示滚动条以便查看其余的内容
overflow	auto	否	如果内容被修剪隐藏，浏览器会显示滚动条以便查看其余的内容
overflow	inherit	否	规定应该从父元素继承overflow属性的值
overflow-x	visible	是	不隐藏裁剪内容，内容会呈现在元素目标框之外
overflow-x	hidden	否	裁剪内容 - 不提供滚动机制
overflow-x	scroll	否	裁剪内容 - 提供滚动机制
overflow-x	auto	否	如果溢出框，则应该提供滚动机制
overflow-x	no-display	否	如果内容不适合内容框，则删除整个框
overflow-x	no-content	否	如果内容不适合内容框，则隐藏整个内容
overflow-y	visible	是	不裁剪内容，可能会显示在内容框之外
overflow-y	hidden	否	裁剪内容 - 不提供滚动机制
overflow-y	scroll	否	裁剪内容 - 提供滚动机制
overflow-y	auto	否	如果溢出框，则应该提供滚动机制
overflow-y	no-display	否	如果内容不适合内容框，则删除整个框
overflow-y	no-content	否	如果内容不适合内容框，则隐藏整个内容

overflow:hidden的作用

隐藏超出元素内容

给一个节点元素设置overflow:hidden，那么该元素的内容若超出给定的宽度和高度，那么超出部分隐藏，且不会影响目标框及其他节点布局，隐藏部分也不占位。

.main{