CSS的inline、block与inline-block
基本知识点
行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局。
块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。
行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。
行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。
其中img和input为行内块元素。
行内元素与块状元素之间的转换:
- float: 当把行内元素设置完float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。行内元素去除了之间的莫名空白。
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
p{background-color: red;height: 500px;width: 30%;padding: 20px;margin: 20px;float: left;}
div{background-color: green;height: 50px;width: 40%;padding: 20px;margin: 20px;}
span{background-color: gray;height: 70px;padding: 40px;margin: 20px;float:left;width:200px;}
strong{background-color: blue;height: 70px;padding: 40px;margin: 20px;}
</style>
<!--<p>块级元素一</p>-->
<div>块级元素一</div>
<span>行内元素一</span>
<strong>行内元素二</strong>
</body>
如图,当把行内元素一设为左浮动时,就可以为其设置宽度了,说明它已经变成了块级元素。
2. position: 当为行内元素进行定位时,position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。
3 .display:
1、块级标签转换为行内标签:display:inline;
2、行内标签转换为块级标签:display:block;
3、转换为行内块标签:display:inline-block;
常用的 display 可能的值:
特性
1.text-align属性对块级元素起作用,对行内元素不起作用:
原因是块级标签如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽,那么在100%的宽度中居中生效;但是行内元素的宽完全是靠内容撑开,所以宽度就是内容撑开的宽:
所以块级是在盒子中间居中了,但是因为行内元素的宽就是内容宽,没有可居中的空间,所以text-align:center;就没有作用;但是如果给font转换为块级就不一样了:
2.块级元素独自占一行且宽度会占满父元素宽度,行内元素不会独占一行,相邻行内元素可以排在同一行。
3.块级元素可以设置weith和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行。注意但块级元素当没有明确指定 width 和 height 值时,块级元素尺寸由内容确定,当指定了 width 和 height 的值时,内容超出块级元素的尺寸就会溢出,这时块级元素要呈现什么行为要看其 overflow 的值(visible,hidden,overflow,scroll)
4.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果,但是竖直方向的margin-top、margin-bottom不起作用。
5.行内元素的padding-top和padding-bottom会起作用,不过就像脱离了标准流一样(即padding-left和padding-right的层级比其他元素高),并不会占据位置,并且还把其他元素给盖住了。但是,假如inline的元素没有内容,“padding-top、padding-bottom"将不起作用。如果想要起作用,只需要给padding-left或者padding-right设置一个值,或者当inline的元素有内容时就会起作用。
<style type="text/css">
div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;}
span{background-color: gray;height: 70px;padding: 40px;margin: 20px;} strong{background-color: blue;height: 70px;padding: 40px;margin: 20px;float: left;}
</style>
<div>块级元素一</div>
<span>行内元素一</span>
<strong>行内元素二</strong>
如图所示,当我们改变padding值时,效果是背景向四个方向扩展,padding-top和padding-bottom是增大的,但是对于块状元素一是没有影响的(在竖直方向上),不然行内元素一也不会挤入块状元素了。
下面的实例可以看到如果inline的元素没有内容,“padding-top、padding-bottom"将不起作用
<style>body,div{margin: 0;padding:0;}.item1{height:100px;background-color: red;}.item2{display: inline;padding-top: 50px;padding-bottom: 50px;background-color: pink;}</style><div class="item1"></div>
<div class="item2"></div>
如果想让padding-top或者padding-bottom起作用,只需要给padding-left或者padding-right设置一个值,或者当inline的元素有内容时就会起作用。
<style>body,div{margin: 0;padding:0;}.item1{height:100px;background-color: red;}.item2{display: inline;padding-top: 50px;padding-bottom: 50px;padding-left: 50px;background-color: pink;}</style><div class="item1"></div>
<div class="item2"></div>
6.当inline-block碰到同类(inline,inline-block)时,谁的上下margin、paddin或line-height大,就听谁的。除非它是inline,因为inline的margin是不起作用的。且inline的padding是不占空间的。
<style>body,div{margin: 0;padding:0;}.item1{display: inline-block;width: 100px;height:100px;margin-top: 20px;background-color: red;}.item2{margin-top: 100px;display: inline-block;background-color: pink;}</style><div class="item1">item1</div>
<div class="item2">item2</div>
<style>body,div{margin: 0;padding:0;}.item1{display: inline-block;width: 100px;height:100px;line-height: 100px;background-color: red;}.item2{display: inline-block;background-color: pink;}</style><div class="item1">item1</div>
<div class="item2">item2</div>
如图所示,inline-block碰到同类时,行高也会一起使用。其他的padding-top和margin-top甚至都会一起使用
7.inline和inline-block会引起间距的空格
<style>body,div{margin: 0;padding:0;}div{display: inline;background-color: #61dafb;}</style><div class="item1">item1</div>
<div class="item2">item2</div>
可以看到两个div之间会有几个像素的间距,这个间距是有换行或回车导致的。有以下解决方法
(1)将空格直接删除,放到一行
<div class="item1">item1</div><div class="item2">item2</div>
(2)在空格代码中加入注释
<div class="item1">item1</div><!--
--><div class="item2">item2</div>
(3)设置margin-left为负值,但是每个浏览器的间距不一样,所以基本不用这种方法
.item2{margin-left:-8px;display:inline;background-color:pink;
}
(4)给父元素增加“font-size:0px"
<style>body,div{margin: 0;padding:0;}body{font-size: 0px;}.item1{display: inline-block;width:100px;height:100px;font-size: 20px;background-color: red;}.item2{display:inline-block;font-size: 20px;background-color: pink;}</style><div class="item1">item1</div>
<div class="item2">item2</div>
(5)给父元素加letter-spacing负值,然后通过子元素清除letter-spacing值
<style>body,div{margin: 0;padding:0;}body{letter-spacing: -8px;}body *{letter-spacing: 0px;}.item1{display: inline-block;width:100px;height:100px;background-color: red;}.item2{display:inline-block;background-color: pink;}</style><div class="item1">item1</div>
<div class="ite
CSS的inline、block与inline-block相关推荐
- DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- CSS 中 display 的 block,inline,inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
- display:inline-block,block,inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- block,inline和inlinke-block细节对比
block,inline和inline-block概念和区别 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 ...
- block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 【学习笔记】block、inline(替换元素、不可替换元素)、inline-block的理解
本文转载 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).blo ...
- Block和inline元素对比
所有的HTML元素都属于block和inline之一. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div ...
- HTML元素分类:inline、inline-block、block
三者可以互相转化--设置display属性值:inline.inline-block.block inline textarea.span.a.img.input.select 行内元素特征:(1)设 ...
- block、inline和inline-block
block.inline.inline-block 行内元素和块级元素 block inline inline-block 行内元素和块级元素的区别 常见用法 display 案例(简单实现导航栏) ...
- css变成块级元素_设置标签的css样式代码为“display:block”,标签将变为块级元素。( )...
设置标签的css样式代码为"display:block",标签将变为块级元素.( ) 答:对 青藏高原常见垫状植物有( ? ? ). 答:垫状点地梅 甘肃蚤缀.垫状棘豆 垫状驼绒藜 ...
最新文章
- python刷新页面_小伙利用Python制作浏览器,网友点评这小伙将来要进腾讯
- python pandas DataFrame 字符串转日期格式
- windwos -- bat脚本
- .NET完全手动搭建三层B/S架构
- js array 的理解
- 提示账户不被允许使用docker的情况
- 基于Matlab使用激光雷达从点云到跟踪列表跟踪车辆仿真(附源码)
- 8类网线利弊_CAT8 八类网线是何方神器?
- 阿里巴巴2017实习面试
- Windows字体美化指南
- 考勤统计表sql 某个项目在某个月的考勤统计
- matlab 牛顿冷却定律,传热学MATLAB度分布大作业完整版.doc
- unity中单位是米还是厘米_Unity3D 单位
- 如何深入理解 iOS 开发中的锁?
- Scrapy学习过程之二:架构及简单示例
- jvm与非jvm语言优劣_JVM语言的兴衰
- MOOC翁恺老师零基础学Java语言课程编程题——第六周
- net start mysql发生系统错误2 解决方法
- uniapp获取微信授权登录和手机号一键登录(保姆教程)
- JavaFX8开发过程中的问题记录
热门文章
- python对象编程例子-python编程进阶之类和对象用法实例分析
- monty python-Monty Python
- python入门代码示例-Python入门100个实例(14)——换行符和制表符
- python语言必背代码-Python新手必须知道的25条知识点
- python入门教程非常详细-python初学者怎么入门:python入门教程非常详细
- 函数式编程语言python-用Python进行基础的函数式编程的教程
- python timer使用-Python timer定时器两种常用方法解析
- python爬虫项目-23个Python爬虫开源项目代码
- ThreadLocal的设计与实现
- string的find和find_first_of的区别