html/css学习笔记（一）

    =============================================================================================
    盒子模型
    1.background
        1.1
            background-color
            background-image: url("");
            background-repeat
            background-size: （x轴的比例 y轴的比例）
            background-position
            background-attachment:fixed;(背景图固定不滚动)
        1.2 复合写法
            background: color iamge position repeat;
    2.border
        2.1复合写法
            border: border-width border-style border-color;
        2.2边框圆角
            border-radius
    3.padding
        padding：20px 10px;  上下边距:20px 左右边距：10px
        padding: 20px 30px 4px; 上  左右 下
        padding：10px 20px 30px 40px; 上 右 下 左
    4.margin
        4.1写法和padding类似
        4.2注意
            a.子级margin-top特定情况下会穿透父级
                规避方法:   1.给父级加边框
                            2.给父级加voerflow:hidden;
                            3.将margin-top用父级padding-top替代。
            b.兄弟关系的margin-top和margin-bottom会叠压
    5.文本设置
        font-size 文字大小
        font-family  字体
        color  文字颜色
        line-height 文字行高
        text-align 文本对齐方式
        text-indent:（像素/em）;首行缩进
        font-weight 文字着重 (normal bold bolder)
        font-style 文字倾斜(normal italic oblique(斜体) )
        font-decoration 文本修饰 (none underline line-through)
        letter-spacing 字母间距(px)
        word-space 单词间距(以空格为解析单位)
    小结
        A.盒子模型 url("./img/盒子模型.jpg");

        B.常见复合属性
            background: background-color background-iamge background-position background-repeat

            border: border-width border-style border-color

            padding: 上 右 下 左

            margin: 上右 下 左

            font: font-style font-weight font-size/line-height font-family;
    =============================================================================================
    标签
    1.常见的标签
        title标签
            双标签
            语义：网页标题 权重最大
        div标签
            双标签
            语义：无意义
        h标签
            双标签
            语义：标题
            默认样式：font-size font-weight margin
            h1权重最大 h2次之
        p标签
            双标签
            语义：段落
            默认样式： margin
            p标签再嵌套不要包含块元素的标签
        ul标签
            语义：无序列表
            默认样式：margin padding-left list-style-type
        li标签
            语义：列表项
            默认样式：list-style-type;
        ol标签
            语义：有序列表
            默认样式：同ul
        dl标签
            字典标签
            语义：自定义列表
            默认样式：无
        dt标签
            语义：列表标题
            默认样式：无
        dd标签
            语义：列表说明
            默认样式：margin-left
    小结
        快属性标签的特性：
            1.默认父级100%的宽
            2.支持所有css样式
            3.独占一行
    =============================================================================================

    内联属性的标签
        内链属性标签特性：
            1.同属性的标签排在一排
            2.内容撑开宽度
            3.不支持宽高，不支持上下的padding和margin
            4.代码换行被解析 间距的大小取决于父级的font-size的大小
        span标签
            语义：无意义
        strong标签
            语义：强调(加粗)
            默认样式：font-weight 权重比较高
        em标签
            语义：强调(斜体)
            默认样式：font-style 权重比较高
        a标签
            语义：超链接
            默认样式：color text-decoration cursor；
            注：
                target="_self"(默认)当前页打开 target="_blank"新窗口打开
                herf属性：
                    1.如果要连接网址，一定要加http://
                    2.#代表连接到当前页面
    内联块属性标签
        特性：
            1.同属性的标签排在一排
            2.内容撑开宽度
            3.支持所有css的样式
            4.代码换行被解析 间距大小取决于父级的font-size大小
        img标签
            单标签
            语义：图片
            默认样式：低版本浏览器中有默认边框
    小结
        标签类型的转换
            显示为无：display：none;
            块属性： display：block;
            内链属性
                内联：display：inline;
                内联块：display：inline-block;
    =============================================================================================
    浮动的样式和特性
        浮动的特性
            1.浮动的元素排在同一排
            2.浮动的元素内容撑开宽度
            3.浮动的元素支持所有css样式
            4.浮动的元素脱离文档流
            5.浮动的元素提升层级半级(属性盖住内容溢出，可做文字环绕div的效果)

                                                        (未完待续......)