常见的内联元素(inline)和块级元素(block)

1.内联元素(inline):

a – 锚点 
abbr – 缩写 
b – 粗体(不推荐) 
big – 大字体 
br – 换行 
cite – 引用 
code – 计算机代码(在引用源码的时候需要) 
em – 强调 
font – 字体设定(不推荐) 
i – 斜体 
img – 图片 
input – 输入框 
kbd – 定义键盘文本 
label – 表格标签 
q – 短引用 
span – 常用内联容器,定义文本内区块 
strong – 粗体强调 
textarea – 多行文本输入框 

2.块级元素(block):

address – 地址 
blockquote – 块引用 
dir – 目录列表 
div – 常用块级容易,也是CSS layout的主要标签 
dl – 定义列表 
fieldset – form控制组 
form – 交互表单 
h1 – h6 标题 
hr – 水平分隔线 
menu – 菜单列表 
ol – 有序表单 
p – 段落 
pre – 格式化文本 
table – 表格 
ul – 无序列表 
li

3.内联元素与块级元素的区别

内联元素:

1、内联元素(inline)不会独占一行,相邻的内联元素会排在同一行。其宽度随内容的变化而变化。 
2、内联元素不可以设置宽高 
3、内联元素可以设置margin,padding,但只在水平方向有效

块状元素:

1、块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 
2、块级元素可以设置宽高 
3、块级元素可以设置margin,padding

内联块状元素inline-block:

简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现(可以设置宽高和margin值)。之后的内联对象会被排列在同一内联。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

4.互相之间的区别

区别主要是三个方面:一是排列方式,二是宽高边距设置,三是默认宽度。

(1)块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。

(2)块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。

(3)块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。


5.问题:页面排版的时候经常会遇到li包含img时,图片文件的下边缘出现大概5个或10个像素的间隙

原因:图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象,只要是inline元素和父级元素是baseline的属性的对齐。

html会把图片默认为内联级元素和文字是一样的,那文字的话,给他设置不同的文字大小或字体,肯定会有不同的行高,或者它们会有默认的行高。这样就有了img下面的空隙。

办法:

第一,给图片img标签display:block。

 img {display:block}

第二,定义容器里的字体大小为0。

 div {
     width: 110px;
     border: 1px solid #000;
     font-size: 0
    }

 

  • 29
    点赞
  • 118
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML元素可以分为内联元素块级元素内联元素inline)是指不独占一行的元素,它们在同一行内显示,并且只占据自身所包含内容的宽度空间。 常见内联元素有`<span>、<a>、<strong>、、<img>、<input>`等。<em>内联元素可以添加`width`、`height`、`padding`和`margin`等属性,但是对宽度、高度等属性的设置不会生效。 块级元素block)是指独占一行的元素,每个块级元素都会自动另起一行,它们会尽可能地占据父元素的整个宽度空间。 常见块级元素有`<div>、<p>、<h1>~<h6>、<ul>、<li>、<ol>、<table>`等。块级元素可以通过设置`width`、`height`、`padding`和`margin`等属性,来调整它们的宽度和高度以及外观样式。 内联元素块级元素的主要区别如下: 1. 显示方式:内联元素在同一行内显示,而块级元素会独占一行。 2. 占据空间:内联元素只占据自身所包含内容的宽度空间,而块级元素会尽可能地占据父元素的整个宽度空间。 3. 对宽高属性的设置:内联元素对于`width`、`height`等属性的设置不会生效,而块级元素可以设置这些属性来调整宽度和高度。 4. 是否可以容纳其他元素:内联元素不能直接容纳块级元素,只能容纳其他内联元素或者文本内容,而块级元素可以容纳任何类型的元素。 在实际应用中,正确使用内联元素块级元素可以更好地控制页面的布局和样式,使页面结构更合理、代码更精简。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值