CSS的内联元素和块级元素
块级元素<h1>-<h6>、p、dt是不可以内联块级元素的
1、block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
2、大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
3、常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
4、常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
Display属性中几种常见的属性值
Display:none 是元素隐藏不显示
display:block
1、block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
2、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
1、inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
2、nline元素设置width,height属性无效。/3、inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
1 、简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
2、在当两个元素标签之间有换行符时,如果用inline-blockde 的方式将元素并排显示时,如果父容器的宽度正好为并排显示子元素的宽度之和,则有可能不能并排显示,原因是inline-block会将换行渲染成空格占用一定的空间,所以为了让子元素并排显示则可以再父容器上设置font-size:0,这样空格就不会占用空间,如果子元素中又要显示的文本内容,则再在子容器上设置font-size就好。
CSS 中的内联元素、块级元素以及display的各个属性的特点的更多相关文章
-
CSS内联--与块级元素区别
内联元素:1.内联元素(inline)不会独占一行,相邻的内联元素会排在同一行.其宽度随内容的变化而变化. 2.内联元素不可以设置宽高 3.内联元素可以设置margin,padding,但只在水平方向 ...
-
CSS 中的内联元素、块级元素、display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
-
CSS基础知识(概念、块级元素、行内元素、选择器)
1.CSS概念 全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css" 作用:将HTML的结构(HTML标签即html)与样式( ...
-
CSS里有哪些常见的块级元素和行内元素以及其区别?
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
-
CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
-
css基础 行内元素 块级元素
1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...
-
HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
-
CSS块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
-
HTML--内联元素与块级元素
>>内联元素(inline element) a,span,input,select,label,img,textarea,sub,sup,li,i,small,strong,em,b,b ...
随机推荐
-
select()
select(),确定一个或多个套接口的状态,本函数用于确定一个或多个套接口的状态,对每一个套接口,调用者可查询它的可读性.可写性及错误状态信息,用fd_set结构来表示一组等待检查的套接口,在调用返 ...
-
JavaScript 日历
效果图: <html> <head> <script language="javascript"> /*@ 解题思路: .计算本月有多少天(先要 ...
-
uboot中添加FIQ中断及相关问题
本文主要说明了在uboot中添加FIQ中断时遇到的问题以及对应的解决办法. 首先交代一下项目的软硬件环境.硬件方面,使用s3c2440作为主控芯片,外接串口.网卡等设备.软件方面,主控芯片上电后运行u ...
-
乐视云计算基于OpenStack的IaaS实践
本文作者岳龙广,现在就职于乐视云计算有限公司,负责IaaS部门的工作. 从开始工作就混在开源世界里,在虚拟化方面做过CloudStack/Ovirt开发,现在是做以OpenStack为基础的乐视云平台 ...
-
js中两个对象的比较
代码取自于underscore.js 1.8.3的isEqual函数. 做了一些小小的修改,主要是Function的比较修改. 自己也加了一些代码解读. <!DOCTYPE html> & ...
-
基于Visual C++6.0的DLL编程实现
整理自基于Visual C++6.0的DLL编程实现 本文通过通俗易懂的方式,全面介绍了动态链接库的概念.动态链接库的创建和动态链接库的链接,并给出个简单明了的例子,相信读者看了本文后,能够创建自己的 ...
-
Linux 下查看CPU的使用情况
1.top使用权限:所有使用者使用方式:top [-] [d delay] [q] [c] [S] [s] [i] [n] [b]说明:即时显示process的动态d :改变显示的更新速度,或是在交谈 ...
-
浅酌iOS 11兼容性
WeTest导读 苹果在WWDC2017大会,公布了最新的iOS 11,系统新特性肯定是让不少果粉充满期待.在网上已能看到不少关于iOS 11的体验文章,那么iOS 11的新特性会对APP产生什么兼容 ...
-
dbclient python ---influxdb -install -relay--http write--read.[create db]
1s=1000ms 1ms=1000 microseconds 1microsecond=1000 nanoseconds+01:00 from influxdb import InfluxDBCli ...
-
还在手工制作APP规范文档?这款设计神器你不容错过
之前写了一些关于APP原型文档的文章:一款APP的交互文档从撰写到交付 这次想写下关于APP设计规范文档的内容,规范文档这个东西,实际上大部分中小型公司没有这方面的需求,也没精力去制作这样一个系统性的 ...