inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高、margin等;并且在同一行显示,不换行,直到该行排满。
block 块级元素:是可以控制宽和高、margin等,并且会换行。块级对象元素会单独占一行显示,多个block元素会各自新起一行。
inline-block 内联块级元素: 具有宽度高度特性,又具有同行特性(一行内显示)
常見的inline元素:span,a,strong,em等。
常見的block元素:div,p,h1到h6,form,ul,ol等。
常見的inline-block元素:img,input等。
注意:
(1)块级元素的默认长度是它父元素的长度。
(2)块级元素能包含块级元素,内行元素。
(3)行内元素不能包含块级元素吗。
(4)行内元素能包含其他行内元素。
参考:
https://www.cnblogs.com/jerry666/p/5223409.html
https://www.jianshu.com/p/37de1610a1e1
inline元素、block元素、inline-block元素的更多相关文章
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- 块级元素和行内元素的区别 (block vs. inline)
块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...
- 【学习笔记】block、inline(替换元素、不可替换元素)、inline-block的理解
本文转载 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).blo ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- 【Web】block、inline、inline-block元素与background属性概述(案例实现社交账号注册按钮效果)
步骤三:社交账号注册按钮效果 文章目录 步骤三:社交账号注册按钮效果 案例的演示与分析 CSS属性与HTML标签 块级元素 内联元素 行内块级元素 CSS的display属性 CSS中的背景图片属性 ...
- display:inline-block,block,inline元素的区别
1.display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始.2.display : inline将元素显示为行内元素,高度,行高以 ...
- 使用float和display:block将内联元素转换成块元素的不同点
使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联 ...
- block,inline-block,行内元素区别及浮动
1.block: 默认占据一行空间,盒子外的元素被迫另起一行 2.inline-block: 行内块盒子,可以设置宽高 3.行内元素: 宽度即使内容宽度,不能设置宽高,如果要设置宽高,需要转换成行内块 ...
随机推荐
- 8 . IO类-标准IO、文件IO、stringIO
8.1 IO类 #include <iostream> //标准IO头文件 8.2 文件输入输出流 #include <fstream> //读写文件头文件 std::fst ...
- Kaggle初学者五步入门指南,七大诀窍助你享受竞赛
Kaggle 是一个流行的数据科学竞赛平台,已被谷歌收购,参阅<业界 | 谷歌云官方正式宣布收购数据科学社区 Kaggle>.作为一个竞赛平台,Kaggle 对于初学者来说可能有些难度.毕 ...
- 斐讯面试记录—TCP滑动窗口及拥塞控制
TCP协议作为一个可靠的面向流的传输协议,其可靠性是由流量控制和滑动窗口协议保证,而拥塞控制则由控制窗口结合一系列的控制算法实现. 一.滑动窗口协议 1. “窗口”对应的是一段可以被发送者发送的字节序 ...
- (转载)关于管理计算机\\xp1 找不到网络路径的解决方案
关于管理计算机\\xp1 找不到网络路径的解决方案 使用域管理员登录域控DC,然后打开AD用户和计算机 选择一台域成员计算机,然后选择管理,结果出现如下提示:点击确定后出现如下提示随后,立刻用域管理员 ...
- ACM-ICPC 2018 南京赛区网络预赛 Solution
A. An Olympian Math Problem cout << n - 1 << endl; #include <bits/stdc++.h> using ...
- Delphi中类的运行期TypeInfo信息结构说明(转载)
Delphi中类的运行期TypeInfo信息结构说明作者:刘啸CnPack开发组 http://www.cnpack.org关键字:RTTI, TypeInfo, TypeData, PropInfo ...
- nginx的启动、停止、重载配置、验证配置
[1]启动 启动nginx系统方式: (1)命令 nginx -c /usr/local/nginx/conf/nginx.conf 说明:-c 参数指定运行nginx系统的自定义配置文件. 若加:使 ...
- Spring笔记 #02# 利用切面和注解校验方法参数
例子还是之前的例子.仍然是对mage进行法术攻击时的咒语进行校验,不过略微提高了扩展性. 应用示例 1.在.properties文件中定义参数格式(正则): sp1=^\\D*hello\\D*$ s ...
- JSOIWC2019游记
世除我WC...都去广二了qaq,就我还在nj ycs至少也去了pkuwc啊 这个JSOIWC2019的内容看起来很水,进入条件简单,但窝啥都不会,肯定垫底 内容清单: 1.26 上午听机房dalao ...
- react-router 4.0(三)根据当前url显示导航
import React, { PropTypes } from 'react' import ReactDOM from 'react-dom' import { HashRouter, Route ...