CSS知识点

内联元素的特点：span a em label strong等。
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。而块级元素自动填满父元素。

 

input 、img属于内联块级标签。

 

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。text-align可以设置。vertical-align需要在设置了line-height后也可以使用（块级元素也一样需要）。

 

设置文字间隔或者字母间隔就可以使用    letter-spacing 。设置英文单词之间的间距呢？可以使用 word-spacing （对中文不起作用）

p{text-indent:2em;}。字体缩减两个。

 

设置行间距（行高）为2em，p{line-height:2em;}

 

为同一个元素设置了不同的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*//*权值为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*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

 

 

position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position：absolute 、float中任意一个，都会让元素以display:inline-block的方式显示。

1、使用内联式CSS设置“超酷的互联网”文字为粉色。

2、然后使用嵌入式CSS来设置文字为红色。

3、最后又使用外部式设置文字为蓝色（style.css文件中设置）。

但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面

word-wrap: break-word; 连续数字或字母换行，而不超出容器宽度。

 

 

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

 1. position : absolute 

 2. float : left 或 float:right 

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

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