霍者博客

欢迎访问CSS最新发布

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

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

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

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

...

CSS空间定位z-index空间定位

z-index属性用于调整定位时重叠的上下位置,其中z-index值大的页面位于其值小的上方,其中z-index值可以是正数也可以负数,当块被设置position属性值,该值便可设置各块之间的重叠高低关系,z-index默认为0,当两个块的z-index值一样,将保持原有的高低覆盖关系。

...