css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素

元素有行内元素(inline)、块级元素(block)以及行内块元素(inline-block)之分，对应地它们之间的盒模型也会有不同。

1. 行内元素(inline)

通过display: inline可将元素声明为行内元素，顾名思义指在行里面的元素，因此没有换行的行为。

1.1 宽度和高度

行内元素不能设置宽度和高度，宽度和高度由内容撑开；

1.2 内边距

行内元素可以设置内边距，上下内边距不会影响行内元素的位置，但左右内边距会影响行内元素的位置；

1.3 边框

行内元素可以设置边框，上下边框不会影响行内元素的位置，但左右边框会影响行内元素的位置

1.4 外边距

行内元素不可以设置上下外边距(无效)，但可以设置左右内边距，且会影响元素的位置。

2. 块级元素(block)

通过display: block可将元素声明为块级元素，块级元素拥有换行的行为。

2.1 宽度和高度

块级元素可以自由设置宽度和高度，其中宽度默认为父元素内容区的宽度，而高度则由内容高度撑开。

2.2 内边距

块级元素的内边距也可自由设置，默认为0；

2.3 边框

块级元素的边框可自由设置，默认为0；

2.4 外边距

块级元素的外边距可自由设置，默认为0。值得注意的是，上下两个元素的外边距会发生重叠，比如A元素下外边距(margin-botom)为10px，A元素的上外边距(margin-top)为20px，两者之间的外间距为20px，而非想象中的30px。

3. 行内块元素(inline-block)

通过display: inline-block可将元素声明为行内块元素，行内块元素没有换行的行为，却可以设置宽度和高度，相当于行内元素和块级元素的综合体。

3.1 宽度和高度

行内块可自由设置宽度和高度；

3.2 内边距

行内块元素可正常设置内边距；

3.3 边框

行内块元素可正常设置边框；

3.4 外边距

行内块元素可正常设置外边距。值得注意的是，行内块的外边距跟其他行内块元素或块级元素的外边距不会发生重叠。

css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素相关推荐

Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
HTML学习笔记-----行内元素、块级元素和行内块元素
如图所示,a标签.i标签和span标签都是行内元素,p和h1标签都是块级元素,img则是行内块元素. 块级元素一般来讲,块级元素总会占据一行的空间,也就是说写在块级元素后面的内容会自动换行,另起一行 ...
块级元素，行内元素，行内块元素
常见元素类型有:块级元素.行内元素.行内块元素 .(这里所说的元素,就是指标签) 一.块级元素: 块级元素独占一行,不和其他元素并排:可以设置宽高和上下外边距:不设置宽度时默认宽度 100%:可以容纳 ...
行内块元素的间隙解决办法
在默认情况下,行内块元素(例如img.input)都存在间隙问题,例如说div中不写宽高的时候,给了个粉色的背景色,方便能看出div和图片之间的间隙,这时嵌套一个img,由图片撑开div,这时会明显的 ...
CSS中块级元素，行内块元素，行内元素的特点
CSS自学笔记目录一.什么是元素显示模式二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素前言网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
CSS中的块级元素、行内元素和行内块元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫"盒子".但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的.比如:div 与s ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
CSS入门基础----行内元素、块级元素和行内块元素的特点和转换
块级元素常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等,其中<div& ...

css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素

css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素相关推荐

最新文章

热门文章