第四章 元素类型与样式初始化

/**CSS样式初始化**/
        body,p,ul,h1,ol,dl,dd{/*通配符，选择页面中所有存在的元素，设置样式*/
            margin:0;
            /* padding:0; */
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration:none;
        }
有几种盒子
页面的元素基本分盒子和文本
块级元素：我们的盒子的本质就是块级元素
行内元素：我们的单个字的本质是行内元素

2、元素常见类型：display：inline/*行内元素*/;block/*块级元素*/inline-block行内快元素;
行内元素特性：
    a/b/i/em/img/lable/span
    1、和其他行内元素处于同一行
    2、不支持宽高，img可以设置宽高行内元素
    3、上下外边距无效，左右外边距有效，auto无效
    4、内边距只对内联元素产生影响，无视块级元素
    5、标签之间的空格解析
    6、a标签能包裹块级元素（特殊，区域链接）

block块级元素特性：
    div/p/dl/form/h1-h6/ol/ul
    1、独占一行
    2、高度由里面元素撑开6、宽度）
    4、可以设置外边距/内边距
    5、可以包裹其他任意元素
    6、p标签不可包裹块级元素（特殊，只存放文本）
inline-block行内块元素（行内一样的块元素）：
img/input/button
    1、本质上是行内元素，具有行内元素的性质
    2、支持宽高
    3、上下外边距有效，auto无效
    4、内边距只对内联元素产生影响，无视块元素
    5、标签之间的空格解析
    6、img标签不是行内块元素（是行内元素，但可以设置宽高）
解决空格原因解决方案
1、给行内元素父级设置字体大小为0，行内块元素字体大小重新设置
2、删除标签空格

display:none:隐藏对象，不显示
特点：
1、不占据空间，无法点击交互
2、内部子元素也不会显示
3、会产生页面回流与重绘