霍者博客

欢迎访问CSS最新发布

utf8编码下iframe高度100%后右侧出现垂直导航条的问题解答

今天在做一个网站的时候发现一个问题就是在gbk2312编码下,这是iframe高度为100%后,正好满屏,不出现垂直的导航条,但是在UTF8下同样的设置却会出现垂直导航条,具体的为什么gbk2312下不出现,这个我没找到原因所在,但是UTF8编码下的问题却解决了。

iframe是内联元素(inline),iframe后面有个看不见摸不着的行内空白节点,空白节点占据着高度,iframe与空白节点的基线对齐,导致了div被撑开(这是图片也底部也会出现3个像素左右的空档是一样的原因:图片在DIV中产生底部间隔的解决方法)。

...

CSS4激动人心的新特性及浏览器支持度

CSS3的选择器提供了很多像:nth-child这样有用的选择器,并且得到浏览器支持。CSS的第四代 选择器CSS4选择器),经我们带来了更多有用的选择器。

1.否定伪类:not

否定伪类选择器其实在CSS3选择器中就出现了,只不过CSS4选择器对否定伪类选择器升级了。在CSS3中,你可以通过否定伪类选择器不去选中你不需要用到的CSS样式的元素。比如说,你想除了.intro的段落之外文本都不加粗,你就可以这样使用伪类选择器。

...

如何设置CSS里元素垂直居中效果

今天有个客户网站修改了产品分类名称,有几个特别长,明显的超出了原始设计的时候所考虑的范围了。

发现问题就搜索一下博客,竟然没有发现垂直居中的相关解决方法,但是就在前不久我又的的确确用过,所以就在这里整理一下分享给大家。

简单的说呢,就是在需要垂直居中的内容或元素的父级加上以下属性就可以了。

display:flex;align-items:center;
...

CSS实现多行文本溢出显示省略号

单行文本溢出显示省略号---(前提要给固定宽度)

实现方法:

overflow:hidden; /*--超出隐藏--*/
white-space:nowrap; /*--禁止换行--*/
text-overflow:ellipsis; /*--超出的文字以省略号显示--*/
...

CSS样式表知识点回顾

CSS知识点回顾

1.嵌入CSS代码的四种方式:

1).内嵌模式:

<a style = "width:80px;height:90px;" href = "http://www.baidu.com/" target = "_blank">百度</a>

2).内部样式

<style>

a{

...

word-wrap&word-break的区别

我们在块级元素中输出英文,你不会发现有问题的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>word-wrap and word-brak</title>
</head>
<style>
.box { width:1000px; height:300px; background-color: #FF0000;}
.box p { width: 200px; height: 100px; background: #FFE4C4;}
</style>
<body>
<div class="box">
<p>word-wrap and word-brak the difference</p>
</div>
</body>
</html>

当出现一个单词的长度过长时,你会发现它冲出了块级元素。

...

CSS盒子浮动 float

通过前面标准文档流的介绍,我们知道一个块级元素在水平方向可以自动伸展,但是在竖直方向只能和兄弟元素依次排列,不能并排,但是通过浮动,我们可以设计更加不一样的页面风格,那么什么是盒子浮动呢?

盒子的浮动浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

下面通过一些图例为大家展示下:

...