css 盒子溢出问题

html-css018

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。

缩进文本:把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。

CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。

通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em。

扩展资料:

使用负值:

text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:

p {text-indent: -5em}

不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:p {text-indent: -5empadding-left: 5em}。

参考资料来源:百度百科-CSS 文本

朋友,overflow具体如何定义溢出内容,要看你给定的值来具体处理。

overflow:visible,这个就是默认值。内容不会被修剪,会呈现在元素框之外。

overflow:hidden,这个值代表的是内容会被修剪,并且其余内容是不可见的。 

overflow:scroll,这个值代表内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

overflow:auto,这个代表如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

overflow:inherit,这个代表规定应该从父元素继承 overflow 属性的值。

这些值才是overflow处理溢出内容的关键,根据需求设置不同的值即可。