H5初学者 css属性学习笔记

  第一节：浮动说明

    添加浮动的元素不占据空间（脱离文档流）
        注：只要子元素有浮动，父元素必须添加高度！！！（暂时性记住）

  第二节：页面布局
    设计图：
                版式宽度：1920  1680   ...

                网页的版心：960 - 1200
    结构规划：
                id名称：网页外围结构
                pc端  版心宽度不能用百分比！！！

    怎样让版心左右居中？？
                给要做居中的版心元素 添加  margin:0 auto;

  第三节：css列表属性：

        ul
        ol
        dl
    研究列表的列表符号。
    1：（了解）
            list-style-type:
                   circle    空心圆
                    square    实心方块
                    none      清除列表符号

    2：（了解）
    list-style-image:
    把一张图片当作列表符号

    3: （了解）
    list-style-position:
    inside    (内容区域里面)
    outside   (内容区域外面)

    4: list-style:none;(重点    清除列表符号)

  第四节：边框属性
    1:边框长在哪里
                长在元素的宽高之外的 外围

     2：border：10px solid red;(简写/复合式写法)
                border-width:10px;
                border-style:solid;
                border-color:red;

       常用的线条类型：
        solid:实线
        dashed：虚线
        dotted：点状线
        double：双线（双层线条）
         none:没有 （清楚线条）

    3：如何给单一方向添加边框：
        border-left:10px solid red;
        border-right:10px solid red;
        border-top:10px solid red;
        border-bottom:10px solid red;

            如何给单一方向边框去掉
                    border：10px solid red;(简写/复合式写法)
                     border-left:none;

    4:border的其他设置方法：
                border-width border-style border-color
                这三个属性能单独拿出来进行设置
                这三个属性每个最多能接收4个属性值

            eg:border：10px solid ;
               border-color: 1-4个属性值；
                    1个属性值：代表4周
                    2个属性值：第一个值：上下    第二个值：左右
                    3个属性值：第一个值：上 第二个值；左右  第三个值：下
                    4个属性值：上 右 下 左（顺时针方式设置）

    5：用css实现一个三角形：
                颜色值为透明： transparent

  第五节：背景属性
     background:;   复合属性！

    1：背景颜色：  background-color:;

    2: 背景图：  background-image:url(路径);

    背景图的显示状态：
        a: 背景图是不占据空间的。
        b: 背景图大小 小于 容器大小的时候，直到铺满为止
        c: 背景图大小 等于 容器大小的时候，正好显示一张
        d: 背景图大小 大于 容器大小的时候，只显示容器区域

    3：控制背景图是否平铺：  background-repeat:;
            属性值：
                repeat          平铺（默认值）
                no-repeat       不平铺
                repeat-x        横向平铺
                repeat-y        纵向平铺

    4: 控制背景图的位置：   background-position:;
            属性值：
                第一个值：水平的位置   第二个值：垂直的位置
                eg:
                     100px 200px       ->     距离左侧100px,距离顶端200px
                     -100px -30px      ->     往左移动100px,往上移动30px;
                     10%   20%           ->    支持百分比
                     left  bottom        ->     让背景图的左侧和底部，贴着容器的左侧和底部
                     right center         ->     让背景图右侧贴着容器右侧，上下居中
                     center bottom    ->      左右居中，背景图底部贴着容器底部
                     center                 ->      水平和垂直都居中

    5: 背景图的固定：  background-attachment:;
            属性值：fixed/scroll;
    6：简写：
        background:red url(背景图的路径) no-repeat 200px bottom;
    注：背景图：
                网页渲染。
                不占空间

        img导入的图片：
                属于HTML的结构
                占据空间

    7：什么时候使用背景图？什么时候使用img：
    图片类型：
        ．ｊｐｇ　 用的最多的　　图片不透明，没有动画的时候
        ．ｐｎｇ    支持透明
        ．ｇｉｆ    支持透明    支持动画
  第六节：盒模型
    css盒模型:
    是网页布局的基石: 盒模型 从里到外包括:
        内容区
        内填充(补白)
        盒子边框(可选)
        外边距 (盒子外部距离)
     padding用法:
        1:padding是长在内容和盒子之间的,在盒子内部
        2:padding是为了调整 子元素在 父元素里面的位置关系.
        3:padding的特点:padding值会把盒子撑大
        4:如果想让盒子保持原有大小,需要把原有宽高减去padding值
        5:给单一方向设置padding值:
            padding-left/right/top/bottom;
        6:padding的设置方法:
            padding:1个值   四周
            padding:2个值   上下 左右
            padding:3个值    上  左右  下
            padding:4个值   上 右 下 左(顺时针方向设置:钟面原则)

        7:padding不能设置复制
        8:padding不会对背景图造成影响
        9:如果一个盒子没有设置固定的宽和高,添加padding是不用减的