Day042---浮动 背景图设置 相对定位绝对定位

1.练习浮动

2.文本属性和字体属性

文本对齐

​ text-align

• left 左对齐

• right 右对齐

• center 中心对齐

• justify 两边对齐 只适应于英文

• text-indent 首行缩进 建议单位使用em

• text-decoration: underline 下划线

• text-decoration:none; 无线

• 文本垂直居中

  • 单行文本  行高== 盒子的高度

  • 多行文本 padding-top =  (height-行数* 行高)/2,并且减掉盒子的高度

3.background属性

• 背景颜色 background-color

  • 颜色表示法: 单词 rgb 十六进制

• 背景图片 background-image:url('')

• 背景图片 background-image:url('')

  background: url("banner.jpg") no-repeat center top;  调整大图显示区域  水平居中,顶部对齐页面  
  right top表示 图片右端,顶部对齐页面

• 背景图定位 background-position: x方向 y方向

  • 如果x和y方向 是正值,表示调整背景图的位置

  • 如果是负值 表示"精灵图技术"(在一张大图有多张小图片)

• banner图设置  大图来说

   .wrap{
              width: 100%;
              height: 500px;
              /*left center right*/
              background: url("./banner.jpg") no-repeat center top;
          }

4.定位

​ 布局的一种方法

• 相对定位

• 绝对定位

• 固定定位

  相对定位

  ​ position:relative;

  如果对一个盒子仅仅设置相对定位,这个盒子没有任何变化

  参考点

  ​ 以原来的位置

  相对定位有压盖现象,小心相对定位留的坑

  相对定位的作用

  • 微调元素

  • '子绝父相'

  绝对定位

  position:absolute

  参考点

  ​ 单独设置绝对定位,以top描述,是以页面的左上角(区分浏览器左上角)

  ​ 以bottom描述,是以浏览器左下角

  绝对定位的现象

  • 脱标

  • 压盖(层级提高  用绝对定位)

  父相子绝的参考点

  ​ 父辈元素设置相对定位,子盒子设置绝对定位,是以父辈盒子的左上角为参考点