5.学习html5笔记

  • background-position:
    • x右,y下;背景图片位置 右下值为正,可以接受负值
    • bottom right;
  • background:red url(./i.png) no-repeat center 0;
    • 背景图片简写:颜色 地址 平铺方式 关联方式 位置;任何属性都可以省略;
  • background-attachment:
    • scroll默认属性关联随着滚动条滚动
    • fixed 背景图片关联不随着滚动条滚动
  • 当元素大小小于背静图片,只显示图片一部分,应用精灵图

CSS盒子模型###

  • padding border margin position
  • hezi

边框 border####

  • border
    • top
    • right
    • bottom
    • left
  • border-width:2px 3px 4px 1px;
    • 单独设置一个可以是全部边框
    • 设置两个可以表示上下, 左右
  • border-style:
    • solid;实线
    • dashed;虚线
    • dotted;圆点
  • border-top-color:block;
  • border:1px soild #000;黑1px实线边框; 样式不能省略,默认无。

内边距 padding

  • 内边距在边框和内容之间
  • padding
    • top right bottom left
  • 元素的边框大小会由内边距和元素内容大小撑起来
  • 内边距会显示背景颜色

外边距 margin

  • margin
    • top right bottom left
    • 外边距不会显示背景颜色
    • 外边距的合并,会按照元素水平外边距加和,垂直方向的margin会按照较大的执行。
      ###盒子模型###

猜你喜欢

转载自blog.csdn.net/weixin_43333826/article/details/84574858