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：绝对定位（脱离文档流）

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

　　相对定位图示：

　　　　　　

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

 

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

　　图示如下：

　　　　　　

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

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

　　提示

    1. 　　要是用绝对定位，必须指定 left，right，top，bottom 属性中的至少一个
    2. 　　使用绝对定位的元素，若无已定位的祖先元素，则其相对位置可能会是浏览器画布（浏览器可显示页面）body或HTML元素

css回忆（一）的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  3. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  4. HTML+CSS知识点总结

    转自:http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=refer ...

  5. CSS魔法堂：说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...

  6. css引入方式优先级以及不同选择器的优先级区别

    我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style ...

  7. 纯css实现照片墙3D效果

    每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自 ...

  8. css常见的易混淆属性和值的区别(一)

    css的属性很多,每一个属性的值也很多,组合起来便有成千上万种.不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言.下面对工作中常见的易混淆的属性和值进行总结: 1. lin ...

  9. 史上最全的HTML、CSS知识点总结，浅显易懂。

    来源于:http://blog.csdn.net/qiushi_1990/article/details/40260447 一,html+css基础1-1Html和CSS的关系学习web前端开发基础技 ...

随机推荐

  1. BizTalk动手实验（十六）EDI-AS2解决文案开发配置

    1 课程简介 通过本课程熟悉EDI.AS2解决文案的开发与配置,本动手实验步骤及内容采用微软官方SDK完成,学员在实验过程中结合官方教程来完成本实验 本实验基于BizTalk 2013(Windows ...

  2. python 正则使用笔记

    python正则使用笔记 def remove_br(content): """去除两边换行符""" content = content.r ...

  3. Codeigniter CRUD生成工具

    Codeigniter  CRUD生成工具 http://crudigniter.com/

  4. Android MP3录音实现

    给APP做语音功能,必须考虑到IOS和Android平台的通用性.wav录音质量高,文件太大,AAC和AMR格式在IOS平台却不支持,所以采用libmp3lame把AudioRecord音频流直接转换 ...

  5. Synergy 鼠标和键盘共享软件

    http://symless.com/nightly Synergy 正可以让你的多台电脑共享一套键鼠,甚至还可以共享剪贴板,如同一机多屏,并跨平台支持 .

  6. 生成器(generator)内部解析

    #http://kb.cnblogs.com/page/87128/(未看完)

  7. Java 实现MapReduce函数

    明白了MapReduce程序的工作原理之后,下一步就是写代码来实现它.我们需要三样东西:一个map函数.一个reduce函数和一些用来运行作业的代码.map函数由Mapper类来表示,后者声明一个ma ...

  8. LeetCode Count of Smaller Numbers After Self

    原题链接在这里:https://leetcode.com/problems/count-of-smaller-numbers-after-self/ 题目: You are given an inte ...

  9. Ajax例子，views返回，html接收数据

    Ajax例子,views返回,html接收数据 views from django.shortcuts import render,HttpResponse,render_to_response im ...

  10. POJ 2891 Strange Way to Express Integers（拓展欧几里得）

    Description Elina is reading a book written by Rujia Liu, which introduces a strange way to express ...