css 盒子溢出问题

html-css013

css 盒子溢出问题,第1张

css 默认盒子样式是 content-box, 宽高设定的是内容的宽高，设置边框可能会出现溢出的问题

可以通过设置 border-sizing：border-box

我更喜欢用border-box，因为border-box更灵活一点，举个例子，我在业务中遇到一个问题，我的商品详情页的一个盒子是高度自适应的，为146px，但是在ie8浏览器上显示为146.8px，如何解决，如果对盒子设置height:146px则会出现被撑高的情况，因为box-sizing默认为content-box，你给元素设置宽高，只是给元素内容设置宽高，你元素的总高度是heigtht + border + padding所以就会出现撑高，解决方法就是给当前的盒子设置box-sizing: border-box这样你设置高度为146px时，会默然将元素内容的高度进行相应减少来保证整体高度为146px，这个最大的好处就是你这个盒子有好几个，而且有不同的padding和border值，解决这个的最好的方法就是给盒子设置border-box

直接看代码吧：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HTML5标签</title>

<style>

p{

/**

white-space：nowrap表示文本不会换行，在同一行继续，知道遇到

标签为止；

overflow：hidden不显示超过对象尺寸的内容，就是把超出的部分隐藏了；

text-overflow：ellipsis当文本对象溢出是显示...，当然也可是设置属性为clip不显示点点点；

-o-text-overflow:为了兼容opera浏览器

*/

width:200px

overflow:hidden

text-overflow:ellipsis

-o-text-overflow:ellipsis

white-space:nowrap

}

div{

/*文字超出高度不显示*/

overflow:hidden

display:block

height:60px

width:100px

}

</style>

</head>

<body>

<p>这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。</p>

<div>这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。</div>

</body>

</html>

如果CSS设置块的溢出方向，在不设置的情况下，都是右边溢出，或者下边溢出.

设定溢出方向可以用float,position:absolute这类脱离文档流的方式。

float:left,float:right, postion:absolute后设置left/top/bottom/right,的一项为0；