css ——行级元素与块级元素解析
一 . 先说说二者的本质区别吧：
行级元素是可以和其他元素处于一行，不用必须另起一行。块级元素是每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
二 .下面看看各自的特点：
块级元素
1.元素的高度、宽度、行高和顶底边距都是可以设置的。
2.元素的宽度如果不设置的话，默认为父元素的宽度。
3.块级元素即使设置了宽度,仍然是独占一行。
常见块级元素：address、blockquote、center、dir、div、dl、ul、ol、li、fieldset、form、form、*hn、hr、menu、noframes、frames、noscript、p、 pre、table等。
行级元素
1.元素的高度、宽度及顶部和底部边距不可设置。
2.元素的宽度就是它包含的文字、图片的宽度，不可改变。
常见行级元素：a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等。
纸上得来终觉浅，下面举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>区别</title>
<style type="text/css">
.div1{ background-color: blue;
color: #fff;
} .span1{ background-color: red;
color: #fff;
} </style> </head>
<body>
<div class="div1">我是块级元素1</div>
<div class="div1">我是块级元素2</div>
<span class="span1">我是行级元素1</span>
<span class="span1">我是行级元素2</span>
</body>
</html>
结果如下：三. 二者的转换
可以在css样式中用display:inline将块级元素设为行级元素
同样，也可以用display:block将行级元素设为块级元素
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
background-color: blue;
color: #fff;
display：inline； }
.span1{
background-color: red;
color：#fff；
display: block;
}
</style>
</head>
<body>
<div class="div1">我是块级元素1</div>
<div class="div1">我是块级元素2</div>
<span class="span1">我是行级元素1</span>
<span class="span1">我是行级元素2</span>
</body>
</html>
得到结果如图：
四. 行级—块级元素
如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？
此时就可以用 display:inline-block；行内块元素，既具有block的宽度高度特性又具有inline的同行特性。
css ——行级元素与块级元素解析的更多相关文章
- CSS行内元素和块级元素的居中
一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- 前端css之文本操作及块级元素和行内元素
1.文本操作 1.1文本颜色(color) 颜色指定方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 1.2水平对齐方式 ...
- html行级元素和块级元素以及css转换
之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗. 这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么 ...
- 初学css 行内元素与块级元素
行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...
- C#基础-css行内元素、块级元素基础
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
- css——行内元素和块级元素的具体区别与行内块元素
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...
- CSS中的行内元素和块级元素
我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢 看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div ...
- HTML 行内元素和块级元素的理解及其相互转换
块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...
随机推荐
- SQL Server 主键及自增长列的修改
一.对主键的修改 主键值都会带有主键约束,当执行update操作或是其他操作的时候就会受到限制无法修改,解决的方法是:取消主键约束->删掉主键列->插入修改后的主键值. (1)取消主键约束 ...
- DBLookupCombobox实现下拉联动
这次用DBLookupCombobox实现省份-城市-地区的下拉联动,用以学习DBLookupCombobox的一些用法 效果图: 首先建立数据表(数据表形式可以多种多样:数据库表.文本.xml等,最 ...
- padding属性很有用
html代码中的text-align有时失效,特别是用bootstrap时,用padding-left:xx%,能够很好定位,而且只能够电脑和手机浏览器显示的统一.
- sqlserverdatasouce控件如何让添加删除修改自动化
对于sqlserverdatasouce控件,添加插入修改和删除命令,可以自动删除修改更新数据,不需要编写一行代码,但是有时更新失败,原因在于选中了[开放式并发],这个选中,如果该表与其他的数据表关联 ...
- node遍历文件夹并读取文件内容
var fs = require('fs'); var path = require('path');//解析需要遍历的文件夹 var filePath = path.resolve('./dist' ...
- 小白的python之路10/30磁盘分区
总结:fdisk mkfs mount 1.磁盘分区 硬盘分区有三种,主磁盘分区.扩展磁盘分区.逻辑分区. 一个硬盘主分区至少有1个,最多4个,扩展分区可以没有,最多1个.且主分区+扩展分区总共 ...
- validation-api各注解的用法
入参用@Valid,要不下面实体类中的注解不生效 @AssertFalse 被注解的元素必须为false@AssertTrue 被注解的元素必须为True@DecimalMax(value) 被注解的 ...
- MFC的PNG贴图按钮类(详细注释)
MFC的PNG贴图按钮类(详细注释) (转载请注明出处) 作者:梦镜谷雨 萌新第二次写帖子,请多多包涵.末尾附上相应代码(PS公司繁体系统所以部分注释繁体请别介意). 因自带控件不美观,于是网上参考学 ...
- vim常用指令
命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim ...
- xcode的打包上线出问题：导入此构建版本时出错
原因:升级mac系统到了High sierra(10.13,目前还是测试版,并没有正式版,全新的文件系统 APFS (Apple File System))发现没有这个问题,于是乎,所以给出这种解决方 ...