css回忆(一)

1、css的引入方式:

  a) 在head部分加入<link  rel="stylesheet" type="text/css" href="my.css"/>,引入外部的CSS文件。

  b) 在head部分加入
    <style type="text/css">
      div{margin: 0;padding: 0;border:1px red solid;}
    </style>

  c) 直接在页面的标签里加 <div style="border:1px red solid;">测试信息</div>

  d) @import导入

    <style type="text/css">
      @import url(my.css);
    </style>

2、盒子模型

  在所有的页面中添加下列代码,告诉编译器是使用标准 w3c 盒子盒子模型进行解释代码:

  <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

3、定位:

  在CSS中关于定位的内容是:position:relative | absolute | static | fixed

    static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
    relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
    absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
    fixed 固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

  CSS中定位的层叠分级:z-index: auto | number;

    auto 遵从其父对象的定位
    number 无单位的整数值。可为负数。

  position 属性用于设定定位属性:

    relative:相对定位(只是在表现上出现偏移)

    absolute:绝对定位(脱离文档流)

相对定位:元素在文档流中依然占据原来的位置,只是在“表现”上会根据原来的位置而产生相对偏移。

  相对定位图示:

      css回忆(一)

示例图上虚线部分为元素原来的位置并得以保留,元素相对其原始位置向右偏移30px,向下偏移20px。

 

绝对定位:块元素完全从文档流中删除,并通过精确的定位属性值来确定元素的位置。该元素原来在文档流的位置将消失,元素定位后生成一个块级元素框。

  图示如下:

      css回忆(一)

   绝对定位后,框2原来的位置消失,框1和框3挨在了一起。框2的定位值(top和left取值)为相对其已定位的祖先元素。

   绝对定位中top等元素的用法和相对定位一致,请参考相对定位一文说明。

  提示

    1.   要是用绝对定位,必须指定 left,right,top,bottom 属性中的至少一个
    2.   使用绝对定位的元素,若无已定位的祖先元素,则其相对位置可能会是浏览器画布(浏览器可显示页面)body或HTML元素
上一篇:CXF(2.7.10) - RESTful Services, JSON Support


下一篇:使用 json-server 模拟数据