前端学习笔记(三)

 样式初始化+元素类型

一.样式初始化

    浏览器对标签默认属性有默认值,但不同浏览器默认值不一定相同;为使页面和代码兼容性,需要对一些标签进行样式初始化.

    *{

        margin:0;
        padding:0;
    }/* *通配符选择器 也是选择器的一种表示 选择页面中所有的元素*/
    *通配符选择器的利弊
    浪费性能，每个标签多执行8次！
    多元素选择器多个选择器组合起来使用
    body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
    ol,ul{margin:0;padding:0;list-style:none;}
    a{text-decoration:none;}
    img{border:0;}

二.元素类型的转换

    元素的类型通常分为 块级元素 内联元素 内联块元素

    1.块级元素

    定义：块级元素会占据一行的位置,它后面的元素内容会换行显示

    块级元素里面可以放任何内容,主要用来布局。

    默认占据一行
    自动换行
    支持添加宽度高度
    支持margin
    支持padding
    常见的块级元素:
    div
    p
    ul li
    dl dd
    h1 h6
    hr
    pre
    table

    2.行内元素

    定义：内联元素也叫行级元素.它只占据他内容所占的位置,其它的
    内容在他后面显示，但是 行级元素里面不能放块级元素
    不自动换行
    不支持宽高
    margin上下无效 左右有效
    padding上下无效 左右有效
    padding只对自身有效
    元素类型互相转换呢？
    用到display属性：
    none
    block
    inline

    3.内联块元素

    span{
    /*以行内元素形式排列，以块级元素形式显示*/
    display:inline-block;
    }

    1.不换行 横排显示（会解析空格）

    2.支持宽高，不给宽高的时候，内容撑开，不给内容的时候是0.0
    3.给宽高的时候，占据宽高的位置，不给的时候，占据内容的位置，没内容的时候，不占据
    位置
    4.支持margin padding 不支持margin auto

    4.元素嵌套规则

    1 块级元素可以套任意内容 p 标签里面不能套块级 包括其自身 h标签 dt 标签不建议套块级
    2 行内不能套块级 a标签不能套a a可以套块级 但是最好是块级套a 然后把a转化成块级元素
    3 行内块可以套任意,但是内联元素不管变成什么样子，都不要套块级。

    5.外边距合并

    垂直相遇的两个盒子会出现外边距合并的情况
    包含关系的margin合并的问题
    解决原理：
    不让他们相遇 加padding 或者 border