div+css布局与盒子

1:div+css

    background-color 背景颜色

    background-image 背景图片

    background-repeat： repeat 背景图片是否扩展 （水平方向和垂直方向都扩展）

                norepeat 不扩展不平铺

                repeat-x 仅仅水平方向扩展 平铺

                            repeat-y 仅仅垂直方向扩展 平铺

    background-position    背景图片的偏移效果

    背景的简单写法

        background：颜色 url（图片路径） repeat-x/repeat-y  50px 20px

2.布局属性

    float ：left/right 浮动效果

            利用float属性可以让多个块级元素在同一行

    clear ：both left right 清除其他元素的float效果 让它不影响本元素

    display ：block 以块级元素效果来展示，把行级元素转换成块级元素

          none  隐藏不显示 不保留位置

          inline 以行级元素效果显示，把块级元素转换成行级元素

    visibility     visible 可见 显示

            hidden 隐藏 不现实 但保留自身位置

    display和visibility的区别：visibility的位置可保留 display可实现块级与行级元素的转换

    overflow : visible     可见

           auto     自适应方式 不超出正常，超出出现滚动条

          hidden     隐藏

           scroll     以滚动条的方式显示

3.盒子模型（div p ul li）

    width

    height   

    border   

    margin 外间距（盒子与盒子之间的间距）margin不会使盒子变大

    简单写法： margin：10px 20px 30px 40px 上－右－下－左的顺序作用于四边、

           margin：10px   四个方向都是一致的

           margin：10px  20px  上下方向一致，左右方向一致

           margin：10px  20px  30px 上为10px 右为20px 下为30px 左为对面的值20px

           margin 的叠加效应

            在垂直方向 margin-top 和margin-button不会叠加，只会在两者之间取一个最大值

            在水平方向 margin-top 和margin-button 会叠加

        margin：0 auto

    padding 内填充 内间距 单元格与内容之间的间距，会影响单元格的大小

    padding-bottom:

    padding-right:

     padding-left:

    padding-top:

    盒子大小的计算

    宽度=padding-right:+padding-left:++margin-left+margin-right+border-right+borderleft

4.

border-radius: 20px

块级元素边框圆形化