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方向。如果只写一个,则两个值相等
    background 是把上面所有的全部合在一起
    background : color image repeat position
    background-size 背景图片的大小

    例:五星好评
    <div class="d03_bgimg d03_02"></div>

    .d03_bgimg{
    background-image: url(../images/sprite.jpg);
    }
    .d03_02{
    78px;
    height: 16px;
    background-position: -484px -45px;
    }

    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.css布局

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

    相对地位  一般不要去用top,left,right,bottom
    绝对定位  
    元素会脱离文档流
    一般不要去用margin,用top,left,right,bottom
    固定定位 
    元素会脱离文档流
    使用场景:回到顶部  侧边栏的广告
    只有浏览器的窗口可以管的住
    一般的情况下:相对定位和绝对定位是同时出现的
    一般所有的下拉框都是绝对配合着相对定位完成的

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

    浮动

    浮动分为两种,左浮动和右浮动
    浮动会脱离文档流
    难点在于清除浮动
    清除浮动: 不是清除自身的浮动,而是清除上一个浮动对自身造成影响

  • 相关阅读:
    关于面向对象
    关于内存的划分和传引用传参数的区别
    关于目前我们专业的各种发展方向
    关于C语言底层
    关于游戏行业目前的形势
    关于jsp,javascript,php等语言
    鼠标滑动图片变大
    在Linux环境下mysql的root密码忘记解决方法
    百度网盘
    bootsrtap 主题元素
  • 原文地址:https://www.cnblogs.com/4556xu/p/10945585.html
Copyright © 2011-2022 走看看