行内元素和块级元素

行内元素和块级元素

1.块级元素

  • 独占一行
  • 宽高以及边距都可以设置
  • 宽度缺省是他容器的100%,除非设定一个宽度
  • 可以容纳内联元素(行内元素)和其他块级元素

2.行内元素

  • 和其他行内元素在一行上
  • 高,行高以及边距不可改变
  • 宽度是他文字或者图片的宽度,不可改变
  • 行内元素只能容纳文本或者其他行内元素
  • 注意:
    设置宽度width 无效。
    设置高度height 无效,可以通过line-height来设置。
    设置margin 只有左右margin有效,上下无效。
    设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。两者的区别主要在盒模型上。

3.行内元素和块级元素的转换(display属性)

描述
none此元素被隐藏
block元素显示为块级元素,并前后会带有换行符
inline默认,元素显示为内联元素,前后没有换行符
inline-block行内块元素
  • inline-block 的元素(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。块级元素会换行,就有换行,HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙

  • 如何取消inline-block产生的间隙
    1.使用负值的margin各个浏览器的负值也不相同,才能完美贴合
    2.在父元素的css中设置word-spacing负值

  • HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。

  • 在了解inline-block之前,导航栏一直采用float浮动来达到横向排列的目的,然而浮动是会产生副作用的,需要清除浮动,相对变得麻烦了。使用inline-block将会变得很方便

4.HTML中常见块级元素

标签描述
canvas定义图形
caption定义表格标题
div定义文档中的节
dl定义列表
dt定义列表中的项目
footer定义section或者page的页脚
header定义section或者page的页眉
h1-h6定义html标题
hr定义水平线
nav定义导航链接
ol定义有序列表
ul定义无序列表
li定义列表中的项目
p定义段落
section定义节
table定义表格
thead定义表头
th定义表头单元格
tbody定义表格主题内容
tr定义表格中的行
td定义表格单元
tfoot定义表格标注内容(脚注)

5.HTML中常见行内元素

标签描述
a定义锚
b字体加粗
br下一行
button定义按钮
textarea定义多行的文本输入控件
del定义被删文本
em强调文本
img定义图像
i定义斜体
input定义输入控件
lable定义input元素的标注
select定义选择列表
option定义选择列表的列表
time定义时间
video定义视频

可变元素

标签描述
button定义按钮
del删除文本
map图片区块
script客户端脚本
appletjava applet
iframeinline frame
ins插入的文本
objectobject对象
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值