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

    css背景类样

    background-color 背景颜色

    background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

    background-image 背景图片

    要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像.

    background-repeat 背景图片的重复

    如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性

    属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。

    repeat-y 只允许在y轴重复

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

    background 是把上面所有的全部合在一起
    background : color image repeat position
    background-size 背景图片的大小

     

     

    框模型

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

    盒子模型的组成
    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

     

  • 相关阅读:
    Vue
    数组去重、数组中的对象去重
    Vue 拖拽组件 vuedraggable 、 vue-dragging 、awe-dnd
    如何衡量一个人的 JavaScript 水平?
    八个免费的Vue图标库
    vue中使用animate.css实现动画
    web本地存储(localStorage、sessionStorage)
    vue引入iconfont报错
    RESTful API 最佳实践
    mysql 用户管理和权限设置
  • 原文地址:https://www.cnblogs.com/yn2025134/p/10942855.html
Copyright © 2011-2022 走看看