block、inline和inline-block

77 阅读 0 评论 51 点赞

我是靠谱客的博主深情水蜜桃，最近开发中收集的这篇文章主要介绍block、inline和inline-block，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

block、inline、inline-block

- 行内元素和块级元素
- - block
  - inline
  - inline-block
  - 行内元素和块级元素的区别
  - 常见用法 display
  - 案例(简单实现导航栏)

行内元素和块级元素

行内元素：又叫内联元素，
特点是行高以及底边距不可改变，只占内容的宽度(高度就是内容文字或者图片的宽度)；
行内的元素都会在同一条直线上，也就是水平布局的；
默认不会换行(不强制换行)。

常见的行内元素有：<span>、<br>、<em>、<input>、<a>、<label>、<img>、<strong>、<select>、<textarea>、<sub>、<sup>、<small>等。

块级元素：是一个元素，占用了全部宽度，在前后都是换行符。
可以设置width、height、padding、margin等属性。

常见的块元素有：<h1~6>、<p>、<form>、<table>、<ul>、<ol>、<li>、<dl>、<hr>、<div>等。

block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

行内元素和块级元素的区别

1. 块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行
2. 块级元素可以设置width和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行
3. 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right,可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果。

常见用法 display

(1)其中块级元素对应display：block
(2)行内元素对应display：inline。
(3)可以通过修改元素的display属性来切换行内元素和块级元素。
(4)display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

案例(简单实现导航栏)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>other</title>
		<style>
			/*将内联元素转成块级元素   将一行变两行*/
			/*span{
				display: block;
			}*/
			ul{
				margin: 0 auto;
				text-align: center;
			}
			/*将块级元素转换成内联元素*/
			ul li{
				line-height: 50px; /*与height设为一致 则字体垂直居中显示*/
				width: 80px;
				display: inline-block;
				height: 50px;
				text-align: center;
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
        <p>块级元素</p><p>lalala</p>
        <span style="width: 50px; float: left;">北京</span>
        <span>天安门</span>
        <br />
        <div style="width: 20%;float: left;">济南</div><div style="width: 20%;float: left;">泉城广场</div>
        <br>
        <b>Alubbar</b>
        <a href="#">超链接</a>
        <ul>
        	<a href="#"><li>News</li></a>
        	<li>Sport</li>
        	<li>Read</li>
        	<li>War</li>
        	<li>Games</li>
        </ul>
	</body>
</html>