2020-07-20---css-白红宇

2020-07-20---css

阅读量：3960 次

发布时间：2019-05-24

本文共 1622 字，大约阅读时间需要 5 分钟。

span标签

span，一个容器标签，不具备任何特殊功能，仅当容器来使用。用于包裹一段文本，便于给文本增加样式。

div标签

div，一个通用容器标签，不具备任何特殊功能，仅当作容器来使用。可以包裹任何内容，也可以容器直接相互包裹。

一个空的div，宽度默认是100%，高度是0。

css选择器

ID选择器 #box

id表示身份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素。

类别选择器 .nav

选择拥有该类别的多个属性。

标签选择器 div

根据标签名，选择对应的所有标签

通用选择器 *

针对页面上所有的标签都生效。

这四种选择器的范围从小到大为ID选择器、类别选择器、标签选择器、通用选择器。

选择器之间的优先级

选择器之间的优先级，就是当这些选择器同时作用于某一元素时，这些选择器生效的先后顺序，高优先级的选择器生效之后，低优先级的选择器就不再生效。

当样式发生冲突的时候，谁的权重值高，谁就生效

通用选择器	权重值0
标签选择器	权重值1
类别选择器	权重值10
ID选择器	权重值100
行样式	权重值1000

行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器

例如下面的选择器

#box p .tt 它表示boxid下面的p标签下面的tt这个类别。那么这个标签的权重值就为100+1+10

看下面这段代码，里面三个超链接字体的颜色分别由哪个选择器决定

选择器选择的范围越小越精确，优先级就越高

导航栏各个超链接之间的竖线可以设置div只留下右边框就可以。

效果

内联样式是行内样式，不叫内部样式，内联和内部是两种样式表。

浮动

浮动元素会脱离网页文档，与其它元素发生重叠，但是，不会与文字内容、图片、表单元素发生重叠。

overflow：auto；overflow表示溢出的意思。对于超出父元素边界的元素，父元素可以做自动的调整。

clear：left/right/both。当我们不希望当前元素受到前面浮动元素影响的时候，我们就给当前元素增加clear样式，即谁不希望受到影响，谁就增加clear样式。
（1）clear：left；表示该元素不受左浮动的影响；
（2）clear：right；表示该元素不受右浮动的影响；
（3）clear：both；表示该元素不受左右浮动的影响；

清除浮动是为了解决浮动带来的负面影响；
父元素的高度无法被撑开，影响与父元素同级的元素；
与浮动元素同级的非浮动元素（内联元素）会跟随其后

例如我们要做一个聊天样式

代码如下

			
   								
   			
    聊天样式
			
    聊天样式聊天样式
			
    聊天样式聊天样式聊
			
    聊天样式聊天
			
    聊天样式
			
    聊天样式
			
    聊天样式聊天样式
			
    聊天样式聊天样式
			
    聊天样式聊天
			
    聊天样式聊天

浮动元素在排列时，只参考前一个元素位置即可。
例如一个大的box里面有3个盒子，当有第4个盒子的时候，大的box放不下了，这时第四个盒子会到下一行显示，那么它的位置具体在哪呢，只需要看它的前一个元素的位置即可。

当有第四个盒子的时候，它的位置如下。

同样当前三个盒子的初始排列为下面的位置的时候

第四个盒子的位置如下

这就是所谓的：浮动元素在排列时，只参考前一个元素位置即可。

所谓填充，就是指向一个元素对的内部，增加空间，也可以称为“内边距”，和外边距不同的是，填充会改变元素大小。随着填充的增加，元素会被撑大。

img input是行内块元素，具备了一行内显示且能设置宽高的特点。

转载地址：http://zvqzi.baihongyu.com/

你可能感兴趣的文章