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>

block、inline和inline-block相关推荐

ios 添加block 类别_ios之Block的详细使用和具体说明
image.png iOS代码块Block 一:概述闭包 = 一个函数「或指向函数的指针」+ 该函数执行的外部的上下文变量「也就是自由变量」:Block 是 Objective-C 对于闭包的实现. ...
ios 添加block 类别_iOS 关于Block代码块的详解
概述 block 上图就是一个block简单使用,它包括了block的声明.赋值实现.调用三个部分,其中,实现部分可以看作是一种匿名函数:跟函数一样,block也是需要调用才能执行内部代码的:赋值的 ...
block的用法以及block和delegate的比较（转发）
看到一篇写的关于block和delegate放在一起来方便大家理解的文章,感觉不错,就推荐给大家来看一下. 代理设计模式对于iOS开发的人来说肯定很熟悉了,代理delegate就是委托另一个对象来帮忙 ...
喜欢用Block的值得注意-Block的Retain Cycle的解决方法
本文不讲block如何声明及使用,只讲block在使用过程中暂时遇到及带来的隐性危险. 主要基于两点进行演示: 1.block 的循环引用(retain cycle) 2.去除block产生的告警时, ...
block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
PSIM软件中 Simplified C Block模块和 C Block模块区别
在使用PSIM的C语言模块时,一直以为Simplified C Block模块和 C Block模块用法基本是一样的,但是今天在仿真BUCK电路时,同样的代码使用C Block模块仿真结果就正常 ...
Perl 安装Inline 和 Inline Java模组(windows)
前言在 Perl 安装及模组安装方法[windows] 这一篇中, 介绍了安装模组的几种方法. 使用PPM来安装应该是最简单的.因为PPM 会自动帮我们找到依赖项, 并进行安装. 但是实际状况却并非 ...
block标签、inline标签、inline-block标签的特点
欢迎关注朋友的公众号"证件照一键换底色",可处理证件照(换背景.换底色.换正装) block标签(比如div) 1.默认独占一行显示 2.没有宽度时,默认撑满一排 3.支持所有cs ...
oracle block corrupted,ORA-01578: ORACLE data block corrupted (file # 9, block # 45729)
今天在实验的机子的oracle上的一张表中批量插入5000000条记录,在插入过程中途发生了表空间不够的情况,导致插入终止,在表空间上添加一个数据文件,对表中的数据进行查询,发生如下的错误: SQL& ...
php html block,html中的block name=content是什么意思？
模板继承是一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中定义相关 ...

block、inline和inline-block

block、inline、inline-block

行内元素和块级元素

block

inline

inline-block

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

常见用法 display

案例(简单实现导航栏)

block、inline和inline-block相关推荐

最新文章

热门文章