16.css: overflow使用 例: 固定div大小,不让内容超出div

html-css011

16.css: overflow使用 例: 固定div大小,不让内容超出div,第1张

子元素默认是存在于父元素的内容区中,

理论上讲子元素的最大可以等于父元素内容区大小

如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容!

父元素默认是将溢出内容,在父元素外边显示,

通过overflow可以设置父元素如何处理溢出内容:

可选值:

该属性不论内容是否溢出,都会添加水平和垂直双方向的滚动条

需要水平就添加水平

需要垂直就添加垂直

都不需要就都不加

撑大的只有在IE6里面会出现吧!其他的浏览器基本都会溢出!一般不建议写DIV的高度哦!除非一定要定义两个div高度一样!可以写一个overflow:hidden属性;将超出部分隐藏!

那是当然的给你发个图吧!这是经典的盒子模型!这里可以看到你在CSS里面设计一个DIV样式

譬如:.div{height:100pxwidth:50pxpadding:10pxmargin:20px}

上面的这个样式的意思是  宽50像素  高100像素 样式内间距是10像素    样式外间距是20像素

所以你应用到DIV中时 这个DIV的实际 宽高就变成

宽110像素(本来的50像素+“20像素的内间距,因为左右都有10像素 ,所以是20像素”+40像素的外间距  同理于内间距)

高160像素   同理于宽  上下都是10的内间距和 上下都是20的外间距