6.css属性和盒模型

布局练习代码：https://download.csdn.net/download/qq_38903404/12416552

列表属性

list-style-type:            
 			 属性值：
                  square
                  circle
                  disc
                  none
                 ......​ 
list-style-image:url()            把图片当作列表符号显示​​        
list-style-position:            
属性值：                
		inside                
		outside​​        
(重点)        
list-style:none;   去掉列表符号！​

边框属性

 边框
        border:10px solid blue;   ->  复合式写法

        1：拆分出来：
            border-width:10px;
            border-color:blue;
            border-style:solid;
                线形：solid(实线)  dashed(虚线)  dotted(点状线) double(双线)  none(清除)

            总结：
                border-width/border-style/border-color
                以上三个属性最多每个都能接受四个属性值。
                一个属性值：  四周
                两个属性值：  上下   左右
                三个属性值：  上   左右   下
                四个属性值：  上右下左


        2: 边框长在什么位置?
            边框是长在元素宽高以外的


        3：怎么给单一一个方向添加边框
            border-left:10px solid red;
            border-right:10px solid red;
            border-top:10px solid red;
            border-bottom:10px solid red;
       
       当边框没有颜色的时候，根据当前容器里面的color的颜色值进行显示。

背景属性

background:; -> 复合式写法

1：背景颜色
    background-color:;

2: 背景图（背景图是不占据空间）
    background-image:url(图片的路径);

    背景图默认的显示状态：
        a: 容器大于背景图尺寸：直到铺满
        b: 容器等于背景图尺寸：只能显示一张
        c：容器小于背景图尺寸：只显示容器区域

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

4: 背景图的位置:
    background-position:;
        属性值：
            水平方向               垂直方向
            left/right/center      top/bottom/center
            10px(距离容器左侧10px)  20px(距离容器顶端20px)
            -10px(往左走10px)      -20px(往上走20px)
            百分比                  百分比


5: 背景图的固定：
    background-attachment:;
        属性值:
            fixed （ 固定 ）
            scroll (滚动)
注：简写：
    background:背景颜色 url(背景图) 是否平铺 背景图位置。
    eg：
    background:red url(./images/1.jpg) no-repeat center;

浮动属性

浮动：
        属性：
            float:;   ( 把气球的绳子剪断 )

        属性值：
            left      （风向 ： 往左吹）
            right     （风向 ： 往右吹）
            none

    特点：
        脱离布局流（文档流）,不占据空间
        
   注意的事项：
        1：浮动的元素，不占据空间的！
        2：如果想让多个元素横向排列：
            a: 多个元素必须都添加浮动
            b: 添加浮动的元素外层必须有个父元素存在。
        3：当浮动的盒子整个宽超出父元素的时候，后面放不下的元素会被挤到下一行。
        4: 当子元素有浮动的时候，父元素必须有高度，否则父元素会出现“高度坍塌”

css的继承性

css的继承性：

        不可继承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

        所有元素可继承：visibility和cursor。
        内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
        块状元素可继承：text-indent和text-align
        列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
        表格元素可继承：border-collapse。

盒模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

 盒模型：
        a:是网页布局的基石，盒模型控制着网页中的元素之间位置关系。
        b:盒模型构成：从里到外包括：内容区、内填充（补白）、边框、外边距


    padding的用法：
        1: padding是长在内容 和 盒子之间的，在盒子里面。
        2：padding作用：控制内容在盒子里面的位置关系。
        3：padding会把盒子撑大！
        4：如果想让盒子在有padding的情况下，保持原本的大小，需要在宽高的基础上减掉padding值
        5：给单一一个方向添加padding值。
            padding-left:;
            padding-right:;
            padding-top:;
            padding-bottom:;
        6: padding属性值的设置技巧：
            padding:10px;                      四周
            padding:10px 30px;                 上下  左右
            padding:10px 30px 60px;            上  左右  下
            padding:10px 30px 60px 100px;      上右下左

        7：padding属性值不能接受负数
        8: padding不影响背景图的位置的显示
        9: 如果一个容器没有设置固定的宽高，靠内容撑开大小，添加padding之后不用减。
        
      margin的用法：
        1：margin是在元素的宽高以外的。
        2：margin的作用：控制元素与元素之间的位置关系。
        3：margin不能改变盒子自己的宽度和高度的。
        4：单一一个方向设置margin值：
            margin-left:;
            margin-right:;
            margin-top:;
            margin-bottom:;

        5: margin设置技巧：
            margin:10px;                      四周
            margin:10px 30px;                 上下  左右
            margin:10px 30px 60px;            上  左右  下
            margin:10px 30px 60px 100px;      上右下左
        6: margin是可以接收负数的
        7: 让当前元素在父元素里面左右居中：
            margin:0 auto;
        8: margin经常出现的BUG  
            a：上下两个元素之间的margin会重叠，按照最大值显示。
            b: 默认情况下（父子元素都没有类似浮动等属性），给第一个子元素添加margin-top 会错误的把margin-top的值解析到父元素上面

 控制子元素在父元素里面的位置关系的时候，用padding
    控制同级元素之间的位置关系的时候，用margin

    避免不必要的bug