行级元素和块级元素的区别和各种选择器的演示

一,下面从概念的角度来说一下块级元素和行内元素

1.块级元素,一般都是从新行开始,它可以容纳行内元素和其他块元素,常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素

2.行内元素:也叫做内联元素,一般都是语义级别的基本元素,内联元素已办只能容纳文本或者其他内联元素。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。而当加了css控制以后,块元素可以变为内联元素,内联元素也可以变为块元素。

二。块级元素和内联元素的区别

1.块级元素会独占一行,其宽度自动填满其父元素宽度

行内元素不会独占一行,相邻的行内元素会排列到同一行里,直到一行排不下,才会换行,其宽度随元素的内容变化而变化,

2.一般情况下,块级元素可以设置width,height属性,行内元素设置width,height无效

(注意,块级元素设置了width宽度属性后仍然是独占一行的)

3.块级元素可以设置margin,padding属性,行内元素的水平方向的padding-left和padding-right都会产生边距效果,但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。


关系选择符:有四种1包含选择器  2子选择器  3相邻选择器  4兄弟选择器
e f{
}
这种选择方发叫做 包含选择器 :e内部包含的所有f都被选中,不论是子级还是孙子级


e>f{
}
这种选择方法叫做子选择器,它的作用是e内部的f 只有为e的直接子标签 时才会被选中




e+f{
}
相邻选择器:只有紧挨着e的f元素才会被选中


e~f{
}
兄弟选择器:只要父级标签是e的f元素都会被选中,不局限于紧挨着这个条件




元素选择符有:1通配选择符  2类型标签(div p a)选择符
3ID选择符  4类(.class)符


#1{
}
id选择器
id是唯一的所以只能被一个标签使用

猜你喜欢

转载自blog.csdn.net/jinqianwang/article/details/80390273