css学习之伸缩布局学习（一）

30 Nov 2017

阅读时长 ~1 分钟

一开始的导航菜单中sub—menu的width设置太窄，而且滚动条会出现，想设置居中到中心，且子菜单占版面过大如何比例缩小等

main_cm.css

.dl-menuwrapper {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	-webkit-perspective: 1000px; 
	//webkit内核浏览器支持属性，这个是视角使用的距离，这几个暂时不研究
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	-moz-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%
}

.dl-menuwrapper .dl-menu {
	margin: 0;
	position: absolute;
	width: 100%;
	max-width: 400px;
	overflow-y: auto;
	max-height: 600px;
	opacity: 0;			//设置不可见
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden
	//
}

修改后main_cm.css

.dl-menuwrapper {
	**width: 140%;**
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	-moz-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
	**height: 160%;
	max-width: 400px;
	  overflow: hidden;**
}

.dl-menuwrapper .dl-menu {
	margin: 0;
	position: absolute;
	width: 100%;
	max-width: 400px;
	overflow-y: auto;
	max-height: 1000px;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	    overflow-y:visible;
	    overflow-x:visible ;
	    overflow:inherit;
}

height设置成100%，w3school查到解释是：

% 基于包含它的块级对象的百分比高度。

它根据上级height百分比设置的

设置`overflow`属性可以为div中溢出的内容增加滚动条以便查看溢出内容，而不会整体的使div块整体拉长使页面变形。

一般常用的overflow属性有几种：
hidden，溢出的内容会被剪切，并且不可见；
scroll，溢出的内容会被剪切，但是会增加滚动条以便查看溢出内容；
` auto`：如果溢出的内容被剪切，便显示滚动条查看溢出内容。
visible:默认值，不会修剪，会出框显示
inherit:继承父元素overflow值
还有overflow-x overflow-y属性
visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。

其实img会出框只需要在.dl-menu中设置overflow即可，除此外，文字如果不用div装起来的固定长宽是不需要

考虑溢出问题的。

我们再看看修改后的dl-menu属性

width：140% 和 width-max：400

这里很愚蠢，把这个块宽度设置得比页面还大，然后限制width最大不过400，前者就是没有用的废语句

除非页面宽度只有280px左右，width才会用1.4*280然后设置为一个比屏幕大的width，这是没有意义的

*关于设置居中到中心，且子菜单占版面过大如何比例缩小等高级技穷下一节再说，根据html的

width和height设置比例值，统一把内部元素width和height设置为百分比即可。*

好比是这样的 html-一级菜单-二级菜单-文字元素

一级菜单对html说： “嘿，把你左半边分给我”-width：50%

二级菜单对一级菜单说：”嘿我要用absolute定位把你铺满 “-width:100%

例如img 设置100%width可以铺满，但是文字变大变小这个是难以改变的，

这一点目前只能根据分辨率动态修改字体大小做到视觉上的不改变