Login
网站首页 > 文章中心 > 其它

minheight和height_max-height和height

作者:小编 更新时间:2023-07-27 12:27:59 浏览量:362人看过

id和class到底要用哪一个?

首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。

id的优点(class的缺点):id写在css用"#"选择器,class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍,所以当你需要提升优先级的时候,id标签,或者id容器内的标签将是很容易和有效的。而class标签码滚,或者class容器内的标签将可能导致优先级的提升失败。

id的缺点(class的优点):id应该是唯一的,所以它的可复用性是很差的,而class是可以复用的。所以如果一块东西是多个页面,甚至一个页面都会使用多次的,那么一定要使用class来作为样式选择器。id是唯一的,当一个控件的id的产生是不可控的,那么这个id选择器将失去意义,但是任何一个控件耐升即使是动态产生的,他的cssClass仍然是可定制的,所以当你的这个标签需要用服务器端迟亩余控件替代的时候,而服务器端控件的id是不确定的,那么请使用class选择器,这样只要将服务器端控件的cssClass设为你class选择器的名称即可。(当然,这个还需要大量的经验的积累,项目做的多了就会逐步的改进)

padding和margin到底要用哪一个?

padding和margin可以让一块区域的外观显示完全一样。所以可能让很多人认为padding和margin是可以互换的。其实它们的差别很大,而且选择哪个需要认真和慎重地考虑。我认为对容器使用padding还是对容器内的标签使用margin的原则:当隐藏这个容器或者容器内的标签时(现实项目中其实经常需要将某个部件隐藏、显示),对整体布局影响最小为益。

对于padding再说一句:ie6,ie7(FF)对带有padding样式的标签的宽度的解析是不一样的。ie6的标签宽度不包含padding-left和padding-right的值,而ie7和ff则是包含的。例如一个div的width设置100px,padding设为10px,而在ie6中它要占据的宽度是120px(包含10个padding-left和10个padding-right),而在ie7和ff中则占据100px的宽度。因为ie7和ff会认为100已经包含了20px的padding。

min-height和height

如果你只需要兼容ie6那么你完全不需要注意min-height这个样式,因为ie6根本就不支持这个样式。但是当你的页面需要照顾到ie7和ff的时候,这个样式一定要注意。因为很多在ie6下设置了height=固定值的样式,当容器被里面的东西撑的大于这个高度的时候,ie7和ff是不会自适应高度的。从而导致布局的混乱。要想在ie6,ie7和ff中都可以自适应高度,正确的做法是设置min-height和用cssHack设置height。例如:

]

min-height:600px;

_height:600px;

这样,在容器里面的东西很少的时候,它显示固定高度600px,但当里面的东西很多的时候,它也会自适应的增长高度。

对于height的设置一定要特别注意,如果是布局用的容器的height则需要特别的注意,否则在ff中会导致无法浮起,从而使布局混乱。

当我们给块级元素设置响应式高度的时候,例如给div设置height=50%,往往没能看到效果。

原因是百分比的大小是相对其父级元素宽高的大小,如最外迹散层元素设置的百分比是对应屏幕而言的。

需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比,例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果:

父元素css: position: relative/absolute; left: 50%;

子元素css: position: relative; left: -50%;

但高度则不同,若某元素的父元素没有确定高度,则无法有效使用height=XX%的样姿颤氏式,我们可以这样解决(假设最外层的洞行div需要设置百分比高度样式):

html, body {

height: 100%;

}

.outDiv {

height: 50%;

不过这里有个需要注意的,若div里的内容超出了div的高度,在IE7◆的浏览器是无法将div撑起来的(IE6则可以),如果要顾及这一点,可以使用min-height解决(当然也要考虑IE6不支持min-height的问题):

min-height: 50%;

* html .outDiv {

最后说通俗点,如果你想把高度设为百分比,那么父级必须设置高度

max-height和min-height一个是用纯首神来防止撑起的盒子太大,一个是用来防止撑起的盒子太小

但是,芹卜max-height:100%和height:100%在某些情况下也不一样

当width:100%的时候,一张图片,你使用height:100%,图片会撑起整个父级做亏盒子

而你使用max-height,则会按比例撑起来,不破坏原来图片的百分比

以上就是土嘎嘎小编大虾米为大家整理的minheight和height_max-height和height相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!

版权声明:倡导尊重与保护知识产权。未经许可,任何人不得复制、转载、或以其他方式使用本站《原创》内容,违者将追究其法律责任。本站文章内容,部分图片来源于网络,如有侵权,请联系我们修改或者删除处理。

编辑推荐

热门文章