CSS开发基础——块级元素和内联元素

迷南。 2022-07-13 15:11 308阅读 0赞

## CSS开发基础——块级元素和内联元素 ##

#### **HTML 的元素可以分为两种：** ####

*  **块级元素（block level element）**
 *  **内联元素（inline element 有的人也叫它行内元素）**

两者的区别：  
1、内联元素会在一条直线上排列（都是同一行的水平方向排列）；  
2、块级元素各占据一行（即无法与其他元素显示在同一行内，除非你显式修改元素的 display 属性）；  
3、块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素；  
4、块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度；  
5、行内元素设置width无效、height无效、margin上下无效左右有效、padding上下无效左右有效；

### 最常见块级元素应该是 `<div>`吧，内联元素有 `<span>` 、`<a>` 、`<img>`等等 ###

举个例子

显示结果如下

![这里写图片描述][SouthEast]

通过修改设置值，可以得到下面的结果

![这里写图片描述][SouthEast 1]

可以看到块级元素可以修改width和height的值，内联元素对于修改这些值无效，但可以修改margin-left、padding-right这样的值。

## 块级元素和内联元素之间的转换 ##

可以用`dispaly` 来实现，[CSS的display 属性][CSS_display]规定元素应该生成的框的类型。  
可能值有

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td align="center">此元素不会被显示。</td> 
  </tr> 
  <tr> 
   <td>block</td> 
   <td align="center">此元素将显示为块级元素，此元素前后会带有换行符。</td> 
  </tr> 
  <tr> 
   <td>inline-block</td> 
   <td align="center">行内块元素。（CSS2.1 新增的值）</td> 
  </tr> 
  <tr> 
   <td>inline</td> 
   <td align="center">默认。此元素会被显示为内联元素，元素前后没有换行符。</td> 
  </tr> 
 </tbody> 
</table>

修改上面代码中的span为

span{
            background: blue;
            color: #fff;
            height： 100px;
            width: 100px;
            border: 2px solid red;
        }

显示结果为  
![这里写图片描述][SouthEast 2]

设置display：block，则可以显示如下的结果  
![这里写图片描述][SouthEast 3]

## 块元素(block element) ##

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>address</td> 
   <td align="center"> 
    <ul> 
     <li> 地址 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>blockquote</td> 
   <td align="center"> 
    <ul> 
     <li> 块引用 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td align="center"> 
    <ul> 
     <li> 举中对齐块 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>dir</td> 
   <td align="center"> 
    <ul> 
     <li> 目录列表 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>div</td> 
   <td align="center"> 
    <ul> 
     <li> 常用块级容易，也是css layout的主要标签 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>dl</td> 
   <td align="center"> 
    <ul> 
     <li> 定义列表 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>fieldset</td> 
   <td align="center"> 
    <ul> 
     <li> form控制组 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>form</td> 
   <td align="center"> 
    <ul> 
     <li> 交互表单 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>h1</td> 
   <td align="center"> 
    <ul> 
     <li> 大标题 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>h2</td> 
   <td align="center"> 
    <ul> 
     <li> 副标题 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>h3</td> 
   <td align="center"> 
    <ul> 
     <li> 3级标题 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>h4</td> 
   <td align="center"> 
    <ul> 
     <li> 4级标题 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>h5</td> 
   <td align="center"> 
    <ul> 
     <li> 5级标题 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>h6</td> 
   <td align="center"> 
    <ul> 
     <li> 6级标题 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>hr</td> 
   <td align="center"> 
    <ul> 
     <li> 水平分隔线 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>isindex</td> 
   <td align="center"> 
    <ul> 
     <li> input prompt </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>menu</td> 
   <td align="center"> 
    <ul> 
     <li> 菜单列表 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>noframes</td> 
   <td align="center"> 
    <ul> 
     <li> frames可选内容，（对于不支持frame的浏览器显示此区块内容） </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>noscript</td> 
   <td align="center"> 
    <ul> 
     <li> 可选脚本内容（对于不支持script的浏览器显示此内容） </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>ol</td> 
   <td align="center"> 
    <ul> 
     <li> 排序表单 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>p</td> 
   <td align="center"> 
    <ul> 
     <li> 段落 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>pre</td> 
   <td align="center"> 
    <ul> 
     <li> 格式化文本 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>table</td> 
   <td align="center"> 
    <ul> 
     <li> 表格 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>ul</td> 
   <td align="center"> 
    <ul> 
     <li> 非排序列表（无序列表） </li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

## 内联元素(inline element) ##

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>a</td> 
   <td align="center"> 
    <ul> 
     <li> 锚点 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>abbr</td> 
   <td align="center"> 
    <ul> 
     <li> 缩写 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>acronym</td> 
   <td align="center"> 
    <ul> 
     <li> 首字 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>b</td> 
   <td align="center">粗体(不推荐)</td> 
  </tr> 
  <tr> 
   <td>bdo</td> 
   <td align="center">bidi override</td> 
  </tr> 
  <tr> 
   <td>big</td> 
   <td align="center">大字体</td> 
  </tr> 
  <tr> 
   <td>br</td> 
   <td align="center">换行</td> 
  </tr> 
  <tr> 
   <td>cite</td> 
   <td align="center">引用</td> 
  </tr> 
  <tr> 
   <td>code</td> 
   <td align="center">计算机代码(在引用源码的时候需要)</td> 
  </tr> 
  <tr> 
   <td>dfn</td> 
   <td align="center">定义字段</td> 
  </tr> 
  <tr> 
   <td>em</td> 
   <td align="center">强调</td> 
  </tr> 
  <tr> 
   <td>font</td> 
   <td align="center">字体设定(不推荐)</td> 
  </tr> 
  <tr> 
   <td>i</td> 
   <td align="center">斜体</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td align="center">图片</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td align="center">输入框</td> 
  </tr> 
  <tr> 
   <td>kbd</td> 
   <td align="center">定义键盘文本</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td align="center">表格标签</td> 
  </tr> 
  <tr> 
   <td>q</td> 
   <td align="center">短引用</td> 
  </tr> 
  <tr> 
   <td>s</td> 
   <td align="center">中划线(不推荐)</td> 
  </tr> 
  <tr> 
   <td>samp</td> 
   <td align="center">定义范例计算机代码</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td align="center">项目选择</td> 
  </tr> 
  <tr> 
   <td>small</td> 
   <td align="center">小字体文本</td> 
  </tr> 
  <tr> 
   <td>span</td> 
   <td align="center">常用内联容器，定义文本内区块</td> 
  </tr> 
  <tr> 
   <td>strike</td> 
   <td align="center">中划线</td> 
  </tr> 
  <tr> 
   <td>strong</td> 
   <td align="center">粗体强调</td> 
  </tr> 
  <tr> 
   <td>sub</td> 
   <td align="center">下标</td> 
  </tr> 
  <tr> 
   <td>sup</td> 
   <td align="center">上标</td> 
  </tr> 
  <tr> 
   <td>textarea</td> 
   <td align="center">多行文本输入框</td> 
  </tr> 
  <tr> 
   <td>tt</td> 
   <td align="center">电传文本</td> 
  </tr> 
  <tr> 
   <td>u</td> 
   <td align="center">下划线</td> 
  </tr> 
  <tr> 
   <td>var</td> 
   <td align="center">定义变量</td> 
  </tr> 
 </tbody> 
</table>

## 可变元素：可变元素为根据上下文语境决定该元素为块元素或者内联元素。 ##

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>applet</td> 
   <td align="center">java applet</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td align="center">按钮</td> 
  </tr> 
  <tr> 
   <td>del</td> 
   <td align="center">删除文本</td> 
  </tr> 
  <tr> 
   <td>iframe</td> 
   <td align="center">inline frame</td> 
  </tr> 
  <tr> 
   <td>ins</td> 
   <td align="center"> 
    <ul> 
     <li> 插入的文本 </li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>map</td> 
   <td align="center">图片区块(map)</td> 
  </tr> 
  <tr> 
   <td>object</td> 
   <td align="center">object对象</td> 
  </tr> 
  <tr> 
   <td>script</td> 
   <td align="center"> 
    <ul> 
     <li> 客户端脚本 </li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

[SouthEast]: /images/20220713/d0bfb0f2fe9e4f8faf1740a46d732572.png
[SouthEast 1]: /images/20220713/9b663dd6f2b74202bc6bbd755a05d392.png
[CSS_display]: http://www.w3school.com.cn/cssref/pr_class_display.asp
[SouthEast 2]: /images/20220713/2aa58ac833be4e069e10e559b58e0dd1.png
[SouthEast 3]: /images/20220713/d79a0a7a609b4008a404d7fff9e59791.png