阅读 842

五.块元素、行内元素、行内块元素

1.块元素的特性block

  • 独占一行;
  • 宽度缺省是它父级元素的100%,除非设定一个宽度;
  • 高度、行高、外边距、内边距都可以设置
  • 可以容纳其他内联元素或者其他块元素,一般用于配合css完成网页的基本布局;

常见块级元素

div – 常用块级容器,也是CSS layout的主要标签
p – 段落
h-标题标签和水平线
pre – 格式化文本
form – 交互表单
ol – 有序表单
ul – 无序列表
li
dl – 定义列表
menu – 菜单列表
table – 表格
复制代码

2.行内元素 inline

  • 不会独占一行,遇到父级元素边界会自动换行;
  • 高、行高以及内外边距都不可以改变
  • 宽度与内容一样宽,且不可改变
  • 行内元素只能容纳文本或者其他行内元素
  • 对于行内元素,设置宽高无效,可以通过设置line-height来设置,
  • 设置margin和padding只有左右有效,上下无效

2.1常见的行内元素

a – 锚点
span – 常用内联容器,定义文本内区块
img – 图片
input – 输入框
button-按钮
label – 表格标签
textarea – 多行文本输入框
select – 项目选择
br – 换行
strong – 粗体强调
复制代码

2.2行内元素的间距问题

两个行内元素在一起,会出现一定的间距,即使将border、padding、margin都设置为零也无济于事,那么怎么才能去除这些间距呢?

1.重设字体
给行内元素的直接父级设置font-size:0px;再给行内元素设置字体大小就可以解决。

2.借助HTML注释
在两个行内元素之间加入HTML注释,告诉浏览器这中间不是换行也不是空格,而是连接在一起的,这样也可以解决。
复制代码

3.行内块元素inline-block

元素排列在一行
宽度默认由内容决定
元素间默认有间距
支持宽高、外边距、内边距的所有样式的设置


缺点:
多个相邻行内块之间有间隙(空隙产生的原因:当元素有行内元素的特性时,元素间的空白符都会被解析,回车换行会被解析成一个空白符,如果字体不为零那么就会占一定的宽度,并且这些间距会随字体的大小而变化)
里面的文本行数不一致时会出现盒子塌陷

解决:取消盒子间隙的方法
删除标签之间的空白(有效果但是不建议使用,代码看起来不太规范,一般不使用)
给转化显示模式为行内块的盒子添加margin-left: -10px;,取负值,可以把间隙遮挡。
给转化显示模式的盒子的父元素添加属性font-size: 0;,(可以取消间隙,但是会影响父元素盒子内其他元素的字体大小)
复制代码
文章分类
前端
文章标签