css 盒子溢出问题

html-css028

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

是待省略的意思。要省略就要它不换行white-space:nowrap。不换行就会有超出部分显示,这超出的部分要让它隐藏overflow:hidden;最后就是它要显示省略号text-overflow:ellipsis;

white-space:nowrap;/*文本不换行*/

overflow:hidden;/*溢出部分隐藏*/

text-overflow:ellipsis;/*溢出部分用“。。。”代替*/}#tourp{

white-space:nowrap;

扩展资料:

css的工作原理

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。

无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。