【无标题】

css

显示隐藏
display：
可选值：none（影藏）block（显示）
visibility:
可选值：hidden（元素不可见）visible（元素可见）
区别是display设置隐藏时，不占用原来的位置
visibility设置元素不可见时，依旧占有原来的位置

    div {
        background-color: pink;
        width: 200px;
        height: 30px;
        line-height: 30px;
    }

    p {
        background-color: aqua;
        width: 200px;
        height: 30px;
        line-height: 30px;
        /* 设置元素隐藏 */
        display: none;
        /* 设置元素不可见 */
        /* visibility: hidden; */
    }

    div:hover>p {
        /* 设置元素显示 */
        display: block;
        /* 设置元素可见 */
        /* visibility: visible; */
    }

盒子模型
盒子模型组成部分：标准盒子
从内向外
1.内容区：content：分内容的
2.内边距：padding：设置内容与边框的距离
3.边框：border：设置区分盒子内外
4.外边距：margin：设置元素与元素之前的距离，设置元素的位置
用法与padding基本一致 -->
盒子模型的理解：组成部分及各自的含义
盒子模型的分类：
标准盒子/W3C盒子：元素默认设置的宽度和高度是指内容区域
IE盒子/怪异盒子：元素默认设置的宽度和高度是指内容区域+内边距+边框
box-sizing:设置盒子尺寸，设置width和height作用的对象
默认值：content-box：内容盒
border-box：边框盒：这时设置的宽度和高度=border+padding+content