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;,（可以取消间隙，但是会影响父元素盒子内其他元素的字体大小）
复制代码
