zoukankan      html  css  js  c++  java
  • CSS(2)

    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    宽度
       也分上下左右
      写的时候不需要区分顺序
      padding   上右下左对边补齐
       定义的width和height只是content部分
      padding和border会把盒子撑大 
      盒子的大小   content+padding+border

    3.css布局

     定位 :top,left,right,bottom 只有元素增加定位的情况下才会使用
     相对定位:
     一般不要去用top,left,right,bottom
     绝对定位:
     元素会脱离文档流
     一般不要去用margin,用top,left,right,bottom
     虽然都能达到效果,但是为了开发的方便,代码的简洁。 
    固定定位:

    元素会脱离文档流

    使用场景:

    回到顶部
    侧边栏的广告,只有浏览器的窗口可以管的住
       一般的情况下:相对定位和绝对定位是同时出现的
       一般所有的下拉框都是绝对配合着相对定位完成的
       position
      4.绝对定位和相对定位的使用方法

     找的过程是依次往父元素上面进行查找,找不到就直接认定body,在body的范围内活动, 相对定位的作用一般是用来管着绝对定位的

  • 相关阅读:
    Django会话之session(手动设置)
    Django model字段类型参考列表
    Django会话之cookie(手动设置)
    Java AES加密
    Java AES加密
    Java JDBC
    Java JDBC
    Java-Map
    Java-Map
    Java-螺旋方阵
  • 原文地址:https://www.cnblogs.com/phioo/p/10951017.html
Copyright © 2011-2022 走看看