block,inline,inline-block的区别
来源：互联网 发布：有趣的java小程序 编辑：程序博客网 时间：2024/06/09 17:17
一、每个元素都有自身的级别：如。p是一个块级元素，span 是行元素，以下是常用的块级和行级元素
1.1常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
1.2常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
二、block，inline和inlinke-block细节对比
- display:block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
- display:inline
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
- display:inline-block
- 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
三、下面是一个练习
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" href="css/new_file.css" />
<script type="text/javascript" src="js/new_file.js"></script>
</head>
<!--
作者：849979276@qq.com
时间：2016-02-26
描述：P 元素，只能包含inline元素(p是一个特殊情况，其他的块级元素都可以包含block元素的)
inline元素设置宽度是无效的,只有设置成块级元素才起作用;
inline元素设置margin-top,padding-top..是无效的。只有在水平方向上的设置才有效果
-->
<body>
<!--
描述：div和p同样是块级元素，下面嵌套一个块级元素。例1就可以正常显示在div中。而下面p元素内的块级元素就另起一行了
-->
<div class="box">例1<h1>我在div里面</h1></div>
<p class="box">例1..<h1>我在div外面了</h1></p>
<span style="width: 400px ;height: 100; background-color: red;" class=" db">例2</span>
<span style="width: 400px ;height: 100; background-color: red; padding-left:90px;">例3</span>
</body>
</html>
1 0
- display:inline block inline-block 的区别
- display:inline block inline-block 的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- inline、block、inline-block的区别
- inline、block、inline-block的区别
- 【三层学习】——VB.NET实现登录
- MySQL sql 语句优化资料和学习笔记
- ArrayAdapter简单应用
- 慕课网----大话PHP设计模式 一（命名空间，类的自动加载，PSR-0）
- evalJS跨webview回传参或执行方法
- block,inline,inline-block的区别
- Java笔记--权限管理（RBAC）
- 前端开发APP，从HBuilder开始~
- mysql汉字转拼音
- android开发时华为手机logcat不显示的解决方法
- 简单工厂模式
- JSP四个作用域、JSP四个会话跟踪技术、JSP包含三个编译指令和七个动作指令、JSP九大内置对象
- javascript匿名函数的理解
- Linux系统下Makefile文件编写
