HTML和CSS块级元素 div、h1~h6、p、hr、form、ul、dl、ol、li 特点：独占一行，并且其后的元

块级元素

div、h1~h6、p、hr、form、ul、dl、ol、li

特点：
1. 独占一行，并且其后的元素也另起一行(独自占据一整行或多整行)
2. 可设置高度、宽度、行高以及顶和底边距
3. 宽度缺省是它的容器的100%，除非设定一个宽度
4. 它可以容纳行内标签和其他块级标签

行内元素

a、strong、b、em、i、del、s、ins、u、span

特点：
1. 和相邻行内标签在一行上
2. 高，行高及外边距和内边距不可改变
3. 默认宽度是本身宽度
4. 设置margin, padding上下无效，左右有效
5. 行内元素只能容纳文本或则其他行内元素

a标签可以放div块级标签，同时a标签里不能再放a标签

行内块元素

img、input、td

特点：
1. 相邻行内元素（行内块）在一行上时之间会有空隙
2. 默认宽度就是本身内容的宽度
3. 高度、行高、外边距、内边距都可以控制
取消空隙
- 使用浮动

三者间转换

块转行内：display:inline;
行内转块：display:block;
块、行内转换为行内块： display: inline-block;

外边距可让块级盒子水平居中，必须指定宽度（width），左右设置为auto

行内块元素居中需要给父元素设置text-align：text

外边距合并

相邻块元素垂直外边距合并：相邻块元素垂直外边距合并, 两个之间的间距不是 margin-bottom + margin-top 之和,而是取两者之间的最大者

解决方法：尽量使用一个margin值

嵌套块元素垂直外边距塌陷：对于嵌套的块元素，父元素有上外边距同时子元素也有上外边距时，此时父元素的上外边距会被最大者替代。

盒子内有内容时不会塌陷

想要的效果：

实际效果：

实际代码：

CSS

    .demoFather {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin-top: 10px;
    }

    .demoSon {
        width: 200px;
        height: 100px;
        background-color: cyan;
        margin-top: 20px;
    }

html

    <div>
        <div class="demoFather">
            <div class="demoSon">
            </div>
        </div>
    </div>

解决：

    .demoFather {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin-top: 10px;
        
        // 解决方法有三种
        /* 会导致盒子变大 */
        border-top: 1px solid red; 
        padding-top: 0.5px; 
        overflow: hidden
    }

浮动的盒子不会有外边距塌陷，只是针对标准的盒子

`<img>` 标签会导致父容器`<div>`高度会多出3个像素

转换为块级元素
给图片添加verticel-algin 属性

HTML和CSS