行内元素、块元素及css三特性

 

行内元素特点:

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

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

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

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

注：行内元素在设置 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

行内块属性 img、input等

块级元素特点

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）

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

3、元素宽度在不设置的情况下，宽度为100%（和父元素的宽度一致），除非设定一个宽度。

注：在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素（inline）元素。

块级元素是可以设置宽高的，但是它的实际宽高是本身宽高padding。block元素要单独占一行。内联元素不单独占一行，给他设置宽高是没有用的。

块属性

div、p、ul、ol、li、h1-h6等

块级元素和行内元素列表：

 

css三特性

CSS叠加性：同一个元素被多条样式规则指定。

CSS继承性：后代元素会继承前辈元素的一些样式和属性。

CSS优先级：由于CSS的叠加性和继承性，将产生优先级，这指的是哪条样式规则会最终作用

于指定的元素，他只遵循一条规则，指定的越具体，优先级越高

浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行

并非所有css属性都具有继承性。

具有继承性的属性：

1.文本相关属性是继承的:font-family,font-size,line-height,font-weight,font-style,text-transform

2.列表相关属性是继承的：list-style,list-style-image,list-style-position

3.颜色相关属性是继承的：color

无继承性的属性

1.所有背景属性，盒子属性，布局属性

我们在ul下设置color属性，并不会使ul>li>a下的a的字体发生样式的改变，但会使li下的字体样式发生改变