css学习笔记(五)

我们发现div是独自占一行的,而多个span标签才占一行,这就是今天要讲的显示模式,就好比我们android中的是垂直还是竖直布局,

在css中元素可以分为 块级元素  行内元素  行内块元素

块级元素:每个块级元素会独自占一行或者多行,可以设置宽  高  对齐属性,常见的块元素有<h1>...<h6> ,<p>,<div>,<ul> <ol> <li>等,其中div是最常见的块级元素,其中块级元素的宽度是默认容器的宽度,还有一个特点就是块级元素内能嵌套其他行内元素

行内元素：也叫内联元素,不占有独立的区域,仅仅靠自身的字体大小和内容或者图像大小来决定高度和宽度,一般不可以设置宽度,高度,对齐属性,但是padding,marign是可以的,但是在垂直方向是无效的,常用于控制页面中文本样式，一般情况下行内元素只能放行内元素,不会放块级元素

常见的行内元素有：<a>,<b>,<strong>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>，其中<span>是最典型的行内元素.

注意：

1:<p>,<h1>...<h6>不能放其他块级元素

2:<a>不能放块级元素

行内块元素,也就是这个标签既有块元素特点也有行内元素特点,从这名字就可以看到出来,常见的行内块元素有

<image>,<input>,<td> 可以对其设置宽  高   对齐属性

行内块元素特点:

1:和相邻行内元素在一行上,但是元素之间有空隙

2:默认宽度就是内容的宽度

3:高度  行高  内边距   外边距 都可以控制

标签的显示模式是可以相互转换的 使用display

1:块转行内元素 display:inline

2:行转块级元素 display:block

3:块级元素  行内元素都可以转换成行内块元素  display:inline-block