块状标签 行内标签的区别

块状标签行内标签的区别

不同类型标签的默认样式的区别（块级行内）

对于很多新人学习前端在HTML和CSS上面关于默认样式了解不是很明白，我今天就来说下我的经验。

块级标签（标准盒子）

1.默认宽度100%（所在容器内容的宽度），独占一行，默认两个 块级标签不能在同一行并排排列。

2.可以给块状标签设置宽高（width/height）

3.块标签可以设置margin左右是auto，这样块标签会在容器水平居中的位置

行内标签（类似于文字）

1.行内标签默认宽度auto（自身内容撑开的宽度），不会独占一行，默认两个行内标签会在同一行并排展示

2.行内标签设置宽高无效

3.行内标签不具备margin左右是auto控制水平居中的效果，但是可以通过让其所在容器设置text-align：center；把其作为文本水平居中

行内块级标签（同事具备行内标签和块级标签的某些特点）

1.继承行内标签特点，宽高默认是auto（内容撑开），默认同一行并排排列

2.继承了块级标签的特点，宽高可以手动设置

3.水平居中也是靠所在容器text-align：center控制

类型转变

display

• none 控制元素隐藏
• flex 弹性伸缩盒子模型
• block 显示元素/ 把其他类型标签转换为块级标签
• inline 把其他类型标签转换为行内标签
• inline-block 设置为行内块级标签

对齐方案

1.第一种水平对齐方案：让原色变为行内块级标签
display：inline-block
问题：会把每一个原色之间的换行和空格当做白元素（也相当于文本），导致元素和元素之间存在间隙，我们需要取消这个间隙
解决方案：让其所在父容器的文字大小为零，这样可以让空白文本不占任何位置，即可解决（为了防止当前元素字体也没大小，还需要单独设置）

2.第二种水平对齐方案：基于浮动方式实现水平排列
float：left / right
问题：默认情况下，子元素当做内容会撑开父元素的高度（因为盒子的高度默认是auto）；但是一旦子元素设置浮动，则当前浮动的元素脱离文档流（和父元素不在同一个平面中了），导致父元素的高度变为零；
解决方案：给父元素末尾追加一个虚拟元素，并且设置celer：both 属性，来清除子元素浮动对父元素的影响