zoukankan      html  css  js  c++  java
  • CSS

    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 合起来写的属性
    4个
    当你写一个的时候,四个全部相同
    两个的时候,上右,对边补齐
    三个的时候,上右下,对边补齐
    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.定位

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



    固定定位 肯定不是同一个爹
    元素会脱离文档流
    使用场景:回到顶部
    侧边栏的广告
    纯种的野孩子。只有浏览器的窗口可以管的住



    一般的情况下:相对定位和绝对定位是同时出现的
    一般所有的下拉框都是绝对配合着相对定位完成的

    position

    绝对定位(absolute)寻找他的亲哥相对定位(relative),才会去听亲哥的话,在他的亲哥眼皮底下活动

    找的过程是依次往父元素上面进行查找,找不到就直接认body为亲哥,在body的范围内活动

    相对定位的作用一般是用来管着绝对定位

  • 相关阅读:
    java实现倒计时
    javaweb启动时启动socket服务端
    二进制数与十六进制数之间如何互相转换
    分组查询最新时间的数据
    javaweb利用钉钉机器人向钉钉群推送消息(解决中文乱码)
    java利用钉钉机器人向钉钉群推送消息
    Java原生操作数据库(不使用框架)
    Mybatis 插入与批量插入以及多参数批量删除
    在spring中直接在类中注入dao
    web自动化测试实战之批量执行测试用例
  • 原文地址:https://www.cnblogs.com/hyh888/p/10947522.html
Copyright © 2011-2022 走看看