您的位置:时时app平台注册网站 > web前端 > CSS再学

CSS再学

2019-10-12 18:40
场景二:

有时使用百分比会出现一个问题,如图1.21所示。

图片 1

图1.21 使用百分比时可能会出现的问题

其中CSS代码为

<style> .box img{ width:25%; margin:20px; float:left; } </style><code>

1
2
3
4
5
6
7
<style>
.box img{
width:25%;
margin:20px;
float:left;
}
</style><code>

导致这个问题出现的原因是使用了margin值,而代码中的width:25%并没有减去这个margin值。因此只需要用calc函数减去margin值就可以了,代码如下

<style> .box img{ width:calc(25% - 40px); margin:20px; float:left; } </style><code>

1
2
3
4
5
6
7
<style>
.box img{
width:calc(25% - 40px);
margin:20px;
float:left;
}
</style><code>

最终效果如图1.22所示

图片 2

图1.22 使用calc函数的最终效果图

</head>

3. 通过定位将元素移出屏幕范围

JavaScript

div{ position:absolute; left:-9999px; }

1
2
3
4
div{
   position:absolute;
   left:-9999px;
}

元素还在,只是超出了屏幕范围,看不见了而已。

css代码写在当前文件中

享受一片宁静的天空AAA

效果如图1.27

图片 3

图1.27 通过设置word-break:break-all;解决英文不换行问题

            font-size: 60px;

8. 通过display将元素彻底隐藏

JavaScript

div{display:none;}

1
div{display:none;}

元素会被隐藏,并且不占位置。

内联元素

display:inline将元素设置为内联元素

特点:

1.  和其他元素都在一行上

2.  元素的高度、宽度及顶部和底边边距不可设置

3.  元素的宽度就是它包含的文字或图片的宽度,不可改变

 

案例

合理使用这些选择器可以做很多事情,比如当只有一个子元素时,可以让它居中显示,如果有多个子元素时,可以让它水平排列,代码如下

JavaScript

<style> .box div{ width:100px; height:100px; border:1px solid red; margin:0 auto; } .box div:not(:only-child){ float:left; margin-left:20px; } </style> <div class="box"> <div></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
   .box div{
        width:100px;
        height:100px;
        border:1px solid red;
        margin:0 auto;
   }
   .box div:not(:only-child){
        float:left;
        margin-left:20px;
   }
</style>
<div class="box">
    <div></div>
</div>

当只有一个子元素时,这个div就会被居中显示,如下图1.12

图片 4

图1.12 当只有一个子元素时,这个div就会被居中显示

当有多个子元素时,效果如图所示

图片 5

<p style="color: rebeccapurple;font-size: 18px">Hao</p>

2. 将元素的opacity:0;设置成0

JavaScript

div{opacity:0;}

1
div{opacity:0;}

元素本身还在,只是看不见而已

JavaScript

div{ opacity:0; filter:alpha(opacity:0); }

1
2
3
4
div{
    opacity:0;
    filter:alpha(opacity:0);
}

<p>Hao</p>

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 6 图片 7

2 赞 7 收藏 评论

    </style>

1.1 CSS中你可能会疑问的几个问题

            font-size: 19px;

在层叠顺序中,以下权重值从小到大。
  1. 用户代理样式
  2. 用户一般样式
  3. 作者一般样式
  4. 作者重要样式(!important)
  5. 用户重要样式(!important)
  6. 如果是两个样式来自同一个地方,如都来自作者,并且它们的样式声明同样重要,则根据特异度来计算,特异度高的会覆盖特异度低的
  7. 如果特异度也相同,则越往后的样式优先级越高

    <style type="text/css">

5. 通过z-index隐藏一个元素

JavaScript

<style> .box{ position:relative; } .box .item{ position:absolute; left:0; top:0; width:100px; height:100px; border:1px solid red; z-index:-1; } .box .item:first-of-type{ z-index:1; } </style> <div class="box"> <div class="item">程序员</div> <div class="item">设计师</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
   .box{
       position:relative;
   }
   .box .item{
       position:absolute;
       left:0;
       top:0;
       width:100px;
       height:100px;
       border:1px solid red;
       z-index:-1;
   }
   .box .item:first-of-type{
   z-index:1;
   }
</style>
<div class="box">
<div class="item">程序员</div>
<div class="item">设计师</div>
</div>

但你会发现文字被“透”上来了,效果如图

图片 8

因为默认的背景设置是透明的,并且允许下面的元素“透”上来,想解决这个问题很简单,就是给元素添加一个背景,代码如下。

CSS

.box .item{ position:absolute; left:0; top:0; width:100px; height:100px; border:1px solid red; background-color:#fff; z-index:-1; }

1
2
3
4
5
6
7
8
9
10
.box .item{
        position:absolute;
        left:0;
        top:0;
        width:100px;
        height:100px;
        border:1px solid red;
        background-color:#fff;
        z-index:-1;
}

设置完成后,效果如图

图片 9

id选择器(#)

1. 当父元素只有一个子元素时会被选中,代码如下

JavaScript

<style> div:first-of-type:last-of-type{ color:red; } </style> <div>123</div>

1
2
3
4
5
6
<style>
    div:first-of-type:last-of-type{
        color:red;
    }
</style>
<div>123</div>

当只有一个div元素时,效果如图1.7所示。当有多个div时不会被选中,效果如图1.8所示。

图片 10

图1.7 当只有一个div时

图片 11

图1.8 当有多个div时

当然更简单的方法是直接用CSS3中的结构性伪类选择器,当父元素只有一个子元素时会被选中,如下:

JavaScript

:only-child

1
:only-child

不妨去试试。

 

14. 设置margin负值

JavaScript

div{margin-left:-999999px;}

1
div{margin-left:-999999px;}

将元素移出屏幕可视区

通用选择器

* {color:red;}选定html中所有标签

 

12. 将元素的缩放设成0

JavaScript

transform:scale(0);

1
transform:scale(0);

看不见我,看不见我。

<head>

13. 让元素重叠

JavaScript

div{transform:skew(90deg);}

1
div{transform:skew(90deg);}

元素重叠了,类似width等于0。

分组选择符

h1,span{color:red;}相当于:

h1{color:red;} span{color:red;}

 

11. 通过transform的translate函数来隐藏一个元素

JavaScript

div{transform:translate(-99999px);}

1
div{transform:translate(-99999px);}

left:-99999px;原理一样,把元素移出屏幕可视区。

    </style>

15. 将元素裁剪

JavaScript

-webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);

1
-webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);

完,带上愉快的心情,踏上CSS之旅。

打赏支持我写出更多好文章,谢谢!

打赏作者

内联元素

内联:同时具备内联元素、块状元素的特点,代码display:inline-block。只有<img>/<input>两个标签

特点:

1.  和其他元素都在一行上

2.  元素的高度、宽度、行高及上下边距都可设置

 

10. 将元素的max-width或max-height设置为0

JavaScript

div{max-height:0;}

1
div{max-height:0;}

JavaScript

div{max-width:0;}

1
div{max-width:0;}

这样元素的宽度就只能是0了,但是还有文字溢出的问题,如图1.26所示。

图片 12

图1.26 文字溢出

尽管元素宽度是 0,但文字还是被显示出来了,若想解决这个问题,将文字大小设置成0就可以了,或者使用代码overflow:hidden;如果你仔细看这个效果,会发现它实际上是一个文字竖排的效果,不过对于英文来说,还得设置一个换行属性,换行属性代码如下

 

1.2.3利用padding实现元素等比例缩放

padding和margin有一个很奇怪的特点,它们的上下外边距的百分比是根据父元素的宽度来计算的。举个例子,代码如下。

JavaScript

<style> .box{ width:100px; height:10px; } .box div{ width:100%; padding-bottom:100%; background-color:red; } </style> <div class="box"> <div></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
   .box{
        width:100px;
        height:10px;
   }
   .box div{
        width:100%;
        padding-bottom:100%;
        background-color:red;
   }
</style>
<div class="box">
    <div></div>
</div>

效果如图1.14

图片 13

图1.14 padding、margin上下外边距的百分比

在此例子中可以看到 div 的宽度和高度都是 100px。如果根据父元素的高度来计算,那么div 的高度最终应该是 10px,而不是 100px,因此,若需要实现一个等比例的元素,就可以利用这个特性,但如果使用这种方式,还需要解决另外一个问题,就是如果直接在子元素div中写入内容,那么高度会被“撑开”,那就不是等比例了。代码如下。

JavaScript

<div class="box"> <div>padding-bottom</div> </div>

1
2
3
<div class="box">
    <div>padding-bottom</div>
</div>

若在div中加入一段文字,那么高度就不再是等比例了,效果如图1.15所示。

图片 14

图1.15 在div中加入一段文字后的高度

但是可以将代码进行修改,修改后的代码如下。

JavaScript

<style> .box{ width:30%; height:10px; } .box div{ position:relative; overflow:hidden; background-color:red; } .box div::after{ content:''; display:block; padding-top:100%; } .box div span{ position:absolute; left:0; top:0; } </style> <div class="box"> <div> <span>图片</span> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
   .box{
        width:30%;
        height:10px;
   }
   .box div{
        position:relative;
        overflow:hidden;
        background-color:red;
   }
   .box div::after{
        content:'';
        display:block;
        padding-top:100%;
   }
   .box div span{
        position:absolute;
        left:0;
        top:0;
   }
</style>
<div class="box">
    <div>
        <span>图片</span>
    </div>
</div>

利用伪元素的padding-top来“撑开”父元素的高,内容通过绝对定位来使用,因为绝对定位的元素是不占位置的,这样一个等比例宽高缩放就完成了。有时这种特性很有用,比如针对下面这个需求,如图1.16所示。

现在需要将图片等比例缩放,也就是宽和高一样,但图片的宽度是自适应屏幕大小的,img标签在只写宽度不写高度的情况下,高度会自适应宽度。图片没有加载出来之前的情况,如图1.17所示。

图片 15

图1.16 需求

这个需求是这样的,图片等比例缩放,也就是宽和高得一样,但问题是图片的宽度是自适应屏幕大小的,原本很简单因为img标签在只写宽度不写高度的情况下,高度会自适应宽度,但问题不在这,而是如果图片在没有加载出来的情况下,会是这样的,如图1.17

图片 16

图1.17 在图片没有加载出来时

从图1.17可以看到在图片没有加载出来之前高度就没有了,这时利用CSS属性paddding-top就可以解决这个问题,代码如下

CSS

.photo a{ position:relative; float:left; width: calc(33.33% - 1.6rem); margin:1.2rem 0 0 1.2rem; outline:1px solid #dedede; } .photo a::before{ content:''; display:block; padding-top:100%; } .photo a img{ position:absolute; left:0; top:0; width:100%; height:100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.photo a{
    position:relative;
    float:left;
    width: calc(33.33% - 1.6rem);
    margin:1.2rem 0 0 1.2rem;
    outline:1px solid #dedede;
}
.photo a::before{
    content:'';
    display:block;
    padding-top:100%;
}
.photo a img{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

使用一个伪元素将高度“撑起来”,而图片通过定位来做。还有一种更简单的做法,就是直接给a标签设置高度,单位使用vw。vw单位是相对于视口(屏幕)宽度的,代码如下。

CSS

.photo a{ float:left; width: calc(33.33% - 1.6rem); height: calc(33.33vw

  • 1.6rem); margin:1.2rem 0 0 1.2rem; outline:1px solid #dedede; } .photo a img{ display:block; width:100%; height:100%; }
1
2
3
4
5
6
7
8
9
10
11
12
.photo a{
    float:left;
    width: calc(33.33% - 1.6rem);
    height: calc(33.33vw - 1.6rem);
    margin:1.2rem 0 0 1.2rem;
    outline:1px solid #dedede;
}
.photo a img{
    display:block;
    width:100%;
    height:100%;
}

宽度怎么设置,高度就怎么设置,就是把百分比换成vw。但是只在自适应方面才能这样用,如果是固定的宽、高,直接设置成一样的就行了,虽然vw可以实现,但兼容性还不是很好。

class和id选择器的区别

相同点:可以应用于任何元素

不同点:

  1. ID选择器只能在文档中使用一次。
  2. 可以使用类选择器列表方法为一个元素同时设置多个样式

 

遇见未知的 CSS

2017/06/11 · CSS · CSS

本文作者: 伯乐在线 - 追梦子 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

摘录自《CSS核心技术详解》

        p{

2.当父元素有多个子元素时,选中第1个

JavaScript

<style> div:not(:last-of-type):first-of-type{ color:red; } </style> <div>11111</div>

1
2
3
4
5
6
<style>
    div:not(:last-of-type):first-of-type{
        color:red;
    }
</style>
<div>11111</div>

只有一个子元素时,不会被选中,效果如图1.9所示。当有多个子元素时,它会选中第一个,效果如图1.10所示。

图片 17

图1.9 只有一个子元素时

图片 18

图1.10 当有多个子元素时

当然,如果有多个子元素时,也可以选择其中任意一个子元素,但最后一个是选中不了的,因为我们已经用“:not”否定了最后一个元素。如果想要摆脱这种限制,可以使用下面这种方案,代码如下。

JavaScript

:not(:only-child)

1
:not(:only-child)

以有多个子元素时选中最后一个子元素为例,代码如下

JavaScript

<style> div:not(:only-child):last-of-type{ color:red; } </style> <div>11111</div> <div>22222</div> <div>33333</div>

1
2
3
4
5
6
7
8
<style>
    div:not(:only-child):last-of-type{
        color:red;
    }
</style>
<div>11111</div>
<div>22222</div>
<div>33333</div>

当一个父元素有多个子元素时,最后一个元素会被选中,效果如图所示。

图片 19

    <span id="set">选择</span>

场景一:

如图1.18所示,图中的内容一旦超过了浮动元素的高,那么这些文本就会与图片左对齐,这种效果并不是我们想要的。我们想要的效果,如图1.19所示。

图片 20

图1.18 实际不理想的效果

图片 21

图1.19 预期理想的效果

如果知道图片的宽度,那么解决这个问题也很简单,给这段文本添加一个左边距即可,但如果图片使用的是百分比,那么就无能为力了,而如果使用calc函数可以很好地解决这个问题,代码如下。

JavaScript

<style> .box img{ width:50%; float:left; } .box p{ margin-left:calc(50% 10px); } </style> <div class="box"> <img src="psb.jpg" alt=""> <p>......</p> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .box img{
        width:50%;
        float:left;
    }
    .box p{
        margin-left:calc(50% 10px);
    }
</style>
<div class="box">
    <img src="psb.jpg" alt="">
    <p>......</p>
</div>

利用calc函数更改代码后的效果如图1.20所示

图片 22

图1.20 利用calc函数的效果

<body>

1.2.2 玩转CSS选择器

            color: red;

1.1.4 margin垂直外边距折叠的意义是什么

margin垂直外边距折叠的特性主要来自传统排版,举个例子,代码如下。

XHTML

<style> body,ul,li{ margin:0; padding:0; } ul{ list-style:none; } ul>li{ margin:20px 0; } </style> <ul> <li>1111111111</li> <li>2222222222</li> <li>3333333333</li> </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  body,ul,li{
    margin:0;
    padding:0;
  }
  ul{
    list-style:none;
  }
  ul>li{
    margin:20px 0;
  }
</style>
<ul>
  <li>1111111111</li>
  <li>2222222222</li>
  <li>3333333333</li>
</ul>

效果如图 1.1

图片 23

从图1.1中可以看到3行数字的垂直外边距都是一样的。如果没有这个特性,第一行数字与下面两行数字的外边距就不一样了,因为我们给每个li都设置了一个上下外边距,假如没有外边距折叠,那么第1个li的下边距加上第2个li的上边距,就是两倍的间距了,但是第一个li上面没有其他元素,所以它只有一个上边距,最终导致的结果就是,第1个li和后面的几个li的外边距不一样,这显然不是我们所希望的。而margin外边距折叠功能正是要在这种情况下,让格式可以好看一点。

1.1.1 CSS层叠规则

在介绍CSS层叠规则之前首先举个例子,代码如下。

JavaScript

<style> .box{ color:red; font-size:18px; } </style> <div class="box"> <a href="#">层叠</a> </div>

1
2
3
4
5
6
7
8
9
<style>
  .box{
    color:red;
    font-size:18px;
  }
</style>
<div class="box">
  <a href="#">层叠</a>
</div>

结果如图1.2所示:

图片 24

按理说颜色是可以继承的,那么为什么a标签的颜色没有变成红色呢?审查一下元素,如图1.3所示。

图片 25

从图1.3中可以看到继承的颜色被划掉了,出现这个问题的原因是浏览器对a标签设置了默认样式,将继承的样式层叠了,因为继承的样式权重最小。下面介绍CSS关于层叠规则是怎么计算的。

在CSS中一个样式可能会来自不同的地方,分别是作者,用户以及用户代理。那么问题来了,如果在这几份样式中,他们对同一个元素的同一个属性做了不同的操作,那么用户代理应该如何处理这段CSS呢?举个例子,代码如下。

JavaScript

/* 作者 */ .box{ color:red; } /* 用户代理 */ .box{ color:green; } /* 用户 */ .box{ color:pink; }

1
2
3
4
5
6
7
8
9
10
11
12
/* 作者 */
.box{
  color:red;
}
/* 用户代理 */
.box{
  color:green;
}
/* 用户 */
.box{
  color:pink;
}

可以看到用户代理以及用户的代码和作者写的样式起冲突了,而CSS的层叠规则就是为了解决这些问题的,以下是一些CSS层叠规则。

在层叠中每个样式规则都有一个权重值,当其中几条规则同时生效时,权重值最大的规则优先。一般来说作者指定的样式权重值高于用户样式权重值,用户样式权重值高于客户端(用户代理)权重值。

</html>

1.2 CSS的一些技巧

盒子模型

边框:

div{     border:2px  solid  red; }

相当于:

div{     border-width:2px;     border-style:solid;     border-color:red; }

1.  border-style(边框样式)常见的有:dashed(虚线)| dotted(点线)| solid(实线)

2.  border-width(边框宽度)

3.  border-top:1px solid red; 只设置上边框 4.  border-right:1px solid red;  只设置右边框 5.  border-left:1px solid red;  只设置左边框

6.  div{border-bottom:1px solid red;}  只设置下边框

高度和宽度:

css定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素的实际宽度(盒子的宽度)=左边界 左边框 左填充 内容宽度 右边界 右边框 右边界

 

 

 

填充:

元素内容和边框之间可以设置距离的,称之为“填充”。padding

 

边界:

margin设置外边距

padding世内边距,margin是内边距

 

!important声明规则

!important声明的样式比一般声明优先级高,并且用户设置的!important比作者设置的!important优先级高。这样做的原因是为了方便用户实现一些特殊的要求,例如页面字体大小的调整等。

下面举一个!important规则的例子,代码如下。

JavaScript

<style> .box{ color:red !important; } .box{ color:green; } </style> <div class="box">!important</div>

1
2
3
4
5
6
7
8
9
<style>
  .box{
    color:red !important;
  }
  .box{
    color:green;
  }
</style>
<div class="box">!important</div>

在正常情况下,后一个“color:green”会层叠前一个“color:red”,但这里我们给“color:red”设置了!important规则,所以前一个优先级高。

直接在html代码中写css

1.1.6 CSS的命名

在代码复用时,也许你写过类似以下这样的代码,代码如下

JavaScript

size-10{ font-size:10px; }

1
2
3
size-10{
font-size:10px;
}

虽然这段代码看起来没什么问题,但如果考虑到可维护性,那就有很大问题了。假如有一天你不想用10px,想改成12px,也许你会想再加一个class就行了,修改后的代码如下

JavaScript

size-10{ font-size:10px; } size-12{ font-size:12px; }

1
2
3
4
5
6
size-10{
    font-size:10px;
}
size-12{
    font-size:12px;
}

但那些页面中原本用的size-10的class都得修改成size-12,所以不建议这么修改代码。笔者建议用语义的方式命名,代码如下

JavaScript

.size-small{ font-size:12px; }

1
2
3
.size-small{
  font-size:12px;
}

这样写代码的好处是当需要调整字体大小时,只需修改一处,而不必修改添加到元素上的class。也就是说不要按照显示的效果命名,而是根据这个class的用意命名。

伪类选择器

a:hover{color:red;}

一般用于a标签,使鼠标滑过变颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        a:hover{

            color: red;

        }

    </style>

</head>

<body>

<a href="">BaiDu</a>

</body>

</html>

放在BaiDu上,颜色变成红色。

 

1. 通过设置 width:0; 或 height:0; 隐藏一个元素

JavaScript

div{width:0;}

1
div{width:0;}

JavaScript

div{height:0;}

1
div{height:0;}

一个物体是由宽和高组成的,那么至少这个物体得有宽和高,这种方式的缺点是隐藏不了文字。可以将元素的color设置成与背景色一样的颜色,这样就看不见了。也可以设置成透明色(transparent),但问题是它们的内容还是存在的,所以需要将文字的大小设置成0,代码如下

JavaScript

div{font-size:0;}

1
div{font-size:0;}

</body>

1.3 隐藏元素

千万不要小看“隐藏”这个技能,多了解一点,就多一种选择。如果你是一个新手,就会发现在本节将出现很多你不认识的属性,它们可能是在CSS 2中就有的属性,也可能是在CSS 3中出现的新属性。

        }

9. 将元素的背景设置为透明,字体大小设置为0

JavaScript

div{ font-size:0; background-color:transparent; }

1
2
3
4
div{
    font-size:0;
    background-color:transparent;
}

元素还在,只是看不见。

 

1.1.2 为什么“@import”指令需要写在样式表的开头

代码如下。

JavaScript

@import url(style/layer.css); body{ background-color:red; }

1
2
3
4
@import url(style/layer.css);
body{
  background-color:red;
}

“@import”指令之所以需要写在样式表的开头,是因为这样可以使后面的样式能更好地层叠导入进来的样式。

长度值(px)

 

关于作者:追梦子

图片 26

快乐一直在我们身边,不管你身处何地何时,只要心是快乐的,一切都是快乐的。是那一秒,也是那一秒,都不会改变。 个人主页 · 我的文章 · 8 ·    

图片 27

元素分类

块状元素:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

内联元素:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素:

<img>、<input>

 

7. 通过visibility将元素设置为不可见

JavaScript

div{visibility:hidden;}

1
div{visibility:hidden;}

虽然元素不可见,但还占位置。

        }

1.1.1 在CSS中为什么要有层叠

在CSS中可能会有多个样式表同时影响同一个元素的某个属性,设计这个功能的主要原因有两个,解决模块化和作者、用户、用户代理样式冲突。

  • 模块化

一个页面中的样式可以拆分成多个样式表,代码如下。

JavaScript

@import url(style/base.css); @import url(style/layer.css);

1
2
@import url(style/base.css);
@import url(style/layer.css);

但这种方式也会随之产生一个问题,即如果对某个元素的同一个属性设置样式,到底应用谁的呢?

  • 作者/用户/用户代理

当作者(写代码的人)和用户(浏览页面的人),以及用户代理(一般指浏览器)都能更改样式表时,也会产生同样的问题:究竟用谁设置的样式,因此CSS层叠机制就显得格外重要。

    <title>Title</title>

选择器特异度的计算
  1. 如果一个声明出现在元素的style属性中,则将a计为1
  2. b等于选择器中所有id选择器加起来的数量和
  3. c等于选择器中所有class选择器和属性选择器,以及伪类选择器加起来的数量和
  4. d等于选择器中所有标签选择器和伪元素选择器加起来的数量和

将a、b、c、d这4个数字连接起来(a-b-c-d)就组成了选择器的特异度。一段特异度的计算,如下所示。

JavaScript

.box{} /* a=0 b=0 c=1 d=0 特异度 = 0,0,1,0 */ .box div{} /* a=0 b=0 c=1 d=1 特异度 = 0,0,1,1 */ #nav li{} /* a=0 b=1 c=0 d=1 特异度 = 0,1,0,1 */ p:first-line{} /* a=0 b=0 c=0 d=2 特异度 = 0,0,0,2 */ style="" /* a=1 b=0 c=0 d=0 特异度 = 1,0,0,0 */

1
2
3
4
5
.box{}           /* a=0 b=0 c=1 d=0 特异度 = 0,0,1,0 */
.box div{}       /* a=0 b=0 c=1 d=1 特异度 = 0,0,1,1 */
#nav li{}        /* a=0 b=1 c=0 d=1 特异度 = 0,1,0,1 */
p:first-line{}   /* a=0 b=0 c=0 d=2 特异度 = 0,0,0,2 */
style=""         /* a=1 b=0 c=0 d=0 特异度 = 1,0,0,0 */

它们的比较顺序是先比较a,如果a的值都相同,那么接着比较b、c、d的值,谁的数大则优先级就越高。

在使用CSS选择器时,你需要注意以下两点。

  • 继承的优先级最低,没有特异度;
  • 结合符(如 、>等)及通用选择符(*)特异度为0。

因此,可以知道之前a标签color属性为什么没有被应用了,因为继承的优先级最低。

css一些应用

body{font-family:"宋体";} 字体

body{font-size:12px;color:#666} 字号(大小),颜色

p span{font-weight:bold;} 粗体

p a{font-style:italic;} 斜体

p a{text-decoration:underline;} 下划线

.oldPrice{text-decoration:line-through;}  删除线

 

 

 

 

p{text-indent:2em;} 缩进

 

 

p{line-height:1.5em;} 行间距(行高)

 

 

h1{letter-spacing:50px;} 字间距

 

 

h1{     text-align:center; }

 

h1{     text-align:left; }

 

h1{     text-align:right; }

 

1.2.4 calc函数

在CSS中,如果需要用计算的功能,那么calc函数将非常有用。calc函数允许进行任何长度值的计算,运算符可以是加( )、减(-)、乘(*)、除(/)等。但需要注意的是,运算符前后都需要保留一个空格,虽然在某些特殊情况下可能不需要,但最好都加上,下面来介绍一些calc函数的使用场景。

/*.......*/

6. 通过给元素设置overflow来隐藏元素

CSS

div{ width:100px; height:100px; overflow:hidden; }

1
2
3
4
5
div{
    width:100px;
    height:100px;
    overflow:hidden;
}

如果元素超出所设置的宽和高,溢出的部分就会被隐藏。如果想让整个元素隐藏,将元素的宽和高设置成0即可。经常通过这种方式将超出的文字隐藏,代码如下

css样式设置小技巧

水平居中

html代码:

<body>   <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>

css代码:

<style>   .txtCenter{     text-align:center;   } </style>

 

水平居中定宽块状元素

html代码:

<body>   <div>我是定宽块状元素,哈哈,我要水平居中显示。</div> </body>

css代码:

<style> div{     border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/          width:200px;/*定宽*/margin:20px auto;/* margin-left 与 margin-right 设置为 auto */} </style>

 

水平居中总结

不定宽度的块状元素有三种方法居中:

1.  加入table标签

2.  设置display:inline方法:与第一种类似,显示类型设为行内元素,进行不定宽元素的属性设置

3.  设置position.relative和left:50%;利用相对定位的方式,将元素向左移50%,达到居中的效果。

html代码:

<div>  <table>   <tbody>     <tr><td>     <ul>         <li>我是第一行文本</li>         <li>我是第二行文本</li>         <li>我是第三行文本</li>     </ul>     </td></tr>   </tbody>  </table> </div>

css代码:

<style>table{    border:1px solid;     margin:0 auto; }</style>

 

第二种:

html代码:

<body> <div class="container">     <ul>         <li><a href="#">1</a></li>         <li><a href="#">2</a></li>         <li><a href="#">3</a></li>     </ul> </div> </body>

css代码:

<style> .container{     text-align:center;}/* margin:0;padding:0(消除文本与div边框之间的间隙)*/ .container ul{     list-style:none;     margin:0;     padding:0;     display:inline;}/* margin-right:8px(设置li文本之间的间隔)*/.container li{     margin-right:8px;     display:inline; } </style>

 

垂直居中,保持height和line-height高度一致,height是该元素高度,line-height行间距指在文本中行与行之间的基线间的距离。

如下代码:

<div class="container">     hi,imooc! </div>

css代码:

<style> .container{     height:100px;     line-height:100px;background:#999; } </style>

 

父元素高度确定的多行文本、图片等的竖直居中的方法有两种

(重要方法)方法一:使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。下面看一下例子:

html代码:

<body><table><tbody><tr><td class="wrap"><div>     <p>看我是否可以居中。</p> </div></td></tr></tbody></table></body>

css代码:

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

 

除了上面讲到的插入table标签,可以使父元素高度确定的多行文本垂直居中之外,本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差,只是提供大家学习参考。

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html代码:

<div class="container">     <div>         <p>看我是否可以居中。</p>         <p>看我是否可以居中。</p>         <p>看我是否可以居中。</p>     </div> </div>

css代码:

<style> .container{     height:300px;     background:#ccc;    display:table-cell;/*IE8以上及Chrome、Firefox*/     vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>

 

隐性改变display类型

有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:

 1. position : absolute 

 2. float : left 或 float:right 

简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。

如下面的代码,小伙伴们都知道 a 标签是 行内元素 ,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。

<div class="container">     <a href="#" title="">进入课程请单击这里</a> </div>

css代码

<style> .container a{     position:absolute;width:200px;     background:#ccc; } </style>

 

享受一片宁静的天空。

当中文超出7个字符以后,文字就会被隐藏,效果如图

图片 28

            color: red;

1.2.1 使用pointer-events控制鼠标事件

可以用CSS中的pointer-events来控制元素什么时候响应鼠标事件,比较常用的一个场景是获取验证码,如图1.4所示。

图片 29

图1.4 获取验证码

当用户单击“获取验证码”按钮后,需要等待60秒才能再次单击“重发验证码”按钮,在这种情况下,就可以尝试用pointer-events实现禁用鼠标单击事件。在pointer-events属性中有一个none值,将pointer-events的值设置成none就不会响应鼠标事件了。举一个获取验证码的例子,代码如下。

JavaScript

<style> a{ color:red; } .disable{ pointer-events:none; color:#666; } </style> <a href="javascript:;" id="btn">发送验证码</a> <script> var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ oBtn.classList.add('disable'); setTimeout(function(){ oBtn.classList.remove('disable'); },3000) }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    a{
        color:red;
    }
    .disable{
        pointer-events:none;
        color:#666;
    }
</style>
<a href="javascript:;" id="btn">发送验证码</a>
<script>
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){
        oBtn.classList.add('disable');
        setTimeout(function(){
            oBtn.classList.remove('disable');
        },3000)
    };
</script>

如果看不懂这段代码也没关系,将这段代码复制下来即可。这段代码的意义就是定义了一个鼠标事件禁用的class,单击“发送验证码”按钮后加上刚刚定义的.disable,3秒以后再将这个class去掉。默认情况下的按钮,如图1.5所示

图片 30

图1.5 默认情况下

单击此按钮后,在3秒内不会再次响应单击事件。

pointer-events除了可以实现此功能之外,还有很多用处,比如实现a标签禁止页面跳转,提高网页性能,用户在滚动页面时可能会不小心碰到一些元素上绑定的事件,这些事件就会被触发,从而浪费资源,但如果在页面滚动时给body加上pointer-events:none;属性,那么就避免了这个问题。

pointer-events还有一个妙用,比如将一个遮罩层元素的属性设置为pointer-events:none;,这样就可以单击到遮罩层后面的内容,如图1.6所示。

图片 31

图1.6 运用了pointer-events以后

如图1.6所示可以看到选中了遮罩层后面的内容,但需要注意的是,pointer-events:none只是用来禁用鼠标的事件,通过其他方式绑定的事件还是会触发的,比如键盘事件等。另外,如果将一个元素的子元素pointer-events设置成其他值,如auto,那么当单击子元素时,还是会通过事件冒泡的形式触发父元素的事件。

<link rel="stylesheet" href="base.css" type="text/css">这样导入

1.1.3 当CSS值为0时为什么可以省略单位

因为当CSS值为0时,任何单位的结果都是一样的,就像数学中的0乘以任何数都得0。

继承

CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。

p{color:red;}  <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

 

场景三:

如果再结合媒体查询,那么就很容易实现一个响应式的布局,代码如下。

<style> .box img{ width:calc(100% / 4 - 40px); margin:20px; float:left; } @media (max-width:600px){ .box img{ width:calc(100% / 2 - 40px); } } </style><code>

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.box img{
width:calc(100% / 4 - 40px);
margin:20px;
float:left;
}
@media (max-width:600px){
.box img{
width:calc(100% / 2 - 40px);
}
}
</style><code>

这段代码表示在屏幕不小于600px时,一行最多可以放4张图片,如果屏幕小于或等于600px时,一行最多只能放两张图片。

        #set{

4. 通过 text-indent 实现隐藏文字效果

JavaScript

div{text-indent:-999999px;}

1
div{text-indent:-999999px;}

给页面添加LOGO图片,若还想让搜索引擎搜索到,则需要添加这段文字,但如果又不想显示这段文字,就可以使用这个方法。

<body>

子选择器(>)

用于选择指定标签元素下的第一代子元素。

 

 

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:

p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。

下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1 1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1 1 10=12*/ #footer .note p{color:yellow;} /*权值为100 10 1=111*/

 

css布局模型

布局模型建立在盒子模型的基础之上。

css包含3种基本的布局模型:flow、layer、float

流动模型(flow):

流动(flow)是默认的网页布局模式。也就是说网页在,默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。

有如下的特征:

1.  块级元素都会在所处的包含元素自上而下按顺序垂直延伸分布,因为在默认情况下,块状元素的宽度都是100%,实际上,块级元素都会以行的形式占据位置。

2.  在流动模式下,内联元素都会在所处的包含元素内从左到右水平分布。

总结:html默认使用flow,流动,所有的内容都是应用在此之上。

浮动模型(float):

任何元素在默认情况下是不能浮动的,但可以使用CSS定义浮动,如div、p、table、img等元素都可以被定义为浮动。

层模型:

层模型有三种形式:

1.  绝对定位(position:absolute)

2.  相对定位(position:relative)

3.  固定定位(position:fixed)

绝对定位:

positon:absolute,这条语句的作用是将元素从文档中拖出来,然后使用left、top、right、bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位。如果不包含块,则相对于body元素,即相对于浏览器窗口。

div{     width:200px;     height:200px;     border:2px red solid;     position:absolute;     left:100px;     top:50px;} <div id="div1"></div>

 

 

相对定位:

positon:relative,通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动。

#div1{     width:200px;     height:200px;     border:2px red solid;     position:relative;     left:100px;     top:50px; }  <div id="div1"></div>

 

<body>     <div id="div1"></div><span>偏移前的位置还保留不动,覆盖不了前面的div没有偏移前的位置</span></bod<body>

 

总结:相对定位,就是虽然目标移动了,但是以前的位置还是留着。

 

固定定位:

position:fixed,与绝对定位(absolute)类似,但是它相对移动的坐标是视图(屏幕内的网页)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条而变化,因此它始终固定于窗口内视图的某个位置。导航条就是用这种固定方法。

 

Relative与Absolute组合使用

小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范:

1、参照定位的元素必须是相对定位元素的前辈元素:

<div id="box1"><!--参照定位的元素-->     <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div>

从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。

2、参照定位的元素必须加入position:relative;

#box1{     width:200px;     height:200px;     position:relative;         }

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

#box2{     position:absolute;     top:20px;     left:30px;          }

这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。

 <!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>相对参照元素进行定位</title>

<style type="text/css">

div{border:2px red solid;}

#box1{

    width:200px;

    height:200px;

    position:relative;

       

}

#box2{

       position:absolute;

top:20px;

left:30px;

         

}

/*下面是任务部分*/

#box3{

    width:200px;

    height:200px;

    position:relative;      

}

#box4{

    width:99%;

       position:absolute; 

bottom:0;

   

}

</style>

</head>

 

<body>

<div id="box1">

<div id="box2">相对参照元素进行定位</div>

</div>

 

<h1>下面是任务部分</h1>

<div id="box3">

    <img src=";

    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>

</div>

</body>

</html>

 

重要性

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。

如下代码:

p{color:red!important;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

注意:!important要写在分号的前面

这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

 

</body>

    <style type="text/css">

</head>

css写在外部单独文件中

css的注释

包含后代选择器

.first  span{color:red;},后代中所有的span标签都受影响

>:只影响第一代子元素

空格:所有后代都影响

 

层叠

我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

如下面代码:

p{color:red;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了:

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)

 

 

    <meta charset="UTF-8">

盒模型代码简写,css尽量较少代码量

1.  margin:10px 10px 10px 10px;

简写:margin:10px;

2.  margin:10px 20px 10px 20px;

简写:margin:10px 20px;

3.  margin:10px 20px 30px 20px;

简写:margin:10px 20px 30px;

4.  p{color:#000000;}

简写:p{color: #000;}

5.  p{color: #336699;}

简写:p{color: #369;}

6. 

body{     font-style:italic;     font-variant:small-caps;      font-weight:bold;      font-size:12px;      line-height:1.5em;      font-family:"宋体",sans-serif; }

简写:

body{     font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif; }

 

颜色值

1.  英文命令颜色

p{color:red;}

2.  RGB颜色

p{color:rgb(133,45,200);}

3.  十六进制颜色

p{color:#00ffff;}

 

 

块级元素

特点:

  1.  每个块级元素都从新的一行开始,并且其后的元素也另起一行。

2.  元素的高度、宽度、行高以及顶和底边距离都可设置。

3.  元素宽度在不设置的情况下,是它本身父容器的100%,除非设置一个宽度。

设置display:block就是将元素显示为块级元素

 

本文由时时app平台注册网站发布于web前端,转载请注明出处:CSS再学

关键词: