html5 day6

Day6
Webpage Layout:
How to center version center around? ?
Add margin: 0 auto to the center element to be centered;

css list attribute:
list:
ul (ordered list)
ol (unordered list)
dl (custom list)
list symbol for study list.
1: list-style-type:
circle hollow circle
square small black square
none clear list symbol

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

3:     list-style-position:
        inside    (内容区域里面)
        outside   (内容区域外面)
        
4: list-style:none;(重点    清除列表符号)

CSS border attribute:
border: 10px solid red; (shorthand \ composite writing)

    border-width:10px;
    border-style:solid;
    border-color:red;

    常用的线条类型：solid(实线)  dashed(虚线)  dotted(点状线)  double(双线) none(没有)

1：给单一方向添加边框。
    border-left:10px solid red;
    border-right:10px solid red;
    border-top:10px solid red;
    border-bottom:10x solid red;

2: border的其他设置方法：
    border-width\border-style\border-color  
    这三个属性能单独拿出进行设置。
    这三个属性每个最多能接收4个属性值。 
        border:10px solid;
        border-color:  1到4个属性值。
            1个属性值：  四周
            2个属性值：  上下   左右
            3个属性值：  上    左右   下
            4个属性值：  上右下左
            
3: 用css实线一个三角形。
    颜色值为透明：  transparent;

background :; Compound attribute
1: Background color:
background-color :;

2: 背景图：
    background-image:url(路径);
    背景图的显示状态：
        1: 背景图是不占据空间的。
        2: 背景图大小 小于 容器大小的时候，直到铺满为止
        3: 背景图大小 等于 容器大小的时候，正好显示一张
        4: 背景图大小 大于 容器大小的时候，只显示容器区域
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;
简写：background:red url(背景图的路径) no-repeat 200px bottom;

css box model:
is the cornerstone of web page layout! Box model, from the inside out comprising: a
content region
within the padding (padding)
the box frame (optional)
margins
use of padding:
. 1: is the length between the padding and the contents of the box, inside the box.
2: padding is to adjust the positional relationship of the child element in the parent element.
3: The characteristics of padding: The padding value will prop up the box.
4: If you want to keep the original size of the box, you need to subtract the padding value based on the width and height.
5: Set the padding value for a single direction:
padding-left / right / top / bottom :;
6: padding setting method:
padding: 1 value around
padding: 2 values ​​up and down and left and right
padding: 3 values ​​up and down and left and right
padding: 4 Value top right bottom left

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