定位与浮动

1.css背景类样式:

     background-color 背景颜色
     background-image 背景图片
     background-repeat 背景图片的重复
     repeat-y 只允许在y轴重复
     repeat-x 只允许在x轴重复
     no-repeat 不重复,只显示一次
     background-position 背景图片的定位
     取值: 两个,分别表示x和y方向。如果只写一个,则两个值相等
     例如:京东、淘宝 五星好评
     雪碧图: 各个小图标的集合,使用的目的是减少http的请求
      background 是把上面所有的全部合在一起
      background : color image repeat position
      background-size 背景图片的大小

2.框模型:

       任何一个元素,都可以理解成一个盒子,盒子是可以装"东西",里面东西跟"盒子的包装"有一定的空间,两个盒子或者说多个盒子,盒子之间是不是有一定的"距离"(空间)      盒子模型的组成:

          margin     外边距 盒子与盒子之间的距离
          border     边框
          padding   内边距 
          content    内容 
margin 合起来写的属性: 
          margin-top  上外边距    margin-right  右外边距    margin-bottom下外边距     margin-left左外边距 
          这四个属性可以单独的拿出来写


        border 边框 合写的属性
        border-color 颜色:  border-top-color: ;   border-left-color:border-style 样式: 也分上下左右

        border-width 宽度:也分上下左右     写的时候不需要区分顺序:例:border:1px solid   red;
        padding:   上右下左     对边补齐

      定义的width和height只是content部分
      padding和border会把盒子撑大
    盒子的大小 content+padding+border


3.css布局:

       定位      :    top,left,right,bottom 只有元素增加定位的情况下才会使用.

       相对定位: relative       占有位置     以自己的左上角移动位置

        绝对定位:absolute     不占位置    1、若父级有定位,则以最近的父级左上角为准

                                                               2、若父级没有定位,则以最近的文档左上角为准

       固定定位:fixed            不占位置    不管父级有没有定位,只听浏览器的以浏览器为准。

定位模式的转换:当元素添加了绝对定位、相对定位和固定定位后,元素的模式会转化为行内块元素,可直接给宽高。

浮动:浮动分为两种,左浮动 (float:left;)和右浮动(float:right;)。浮动会脱离文档流。浮动可以让元素默认转换为行内块,元素的大小宽度取决于文字大小。

猜你喜欢

转载自www.cnblogs.com/mmnm/p/10947514.html