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. .NET 页面间传值的几种方法

    1. QueryString 这是最简单的传值方式,但缺点是传的值会显示在浏览器的地址栏中且不能传递对象,只适用于传递简单的且安全性要求不高的数值. 传递: location.href="W ...

  2. Javascript的逻辑判断和循环的知识点

    //boolean Number //Number:0,1.2,0377八进制.0xff进制 Infinity无穷大(10/0),指数(科学计数法) //Infinity * 0==NaN //Inf ...

  3. 最轻量级的前端Mvc框架backbone

    最轻量级的前端Mvc框架backbone依赖最轻量级的库understore backbone并非将前端再次切分为mvc,而是分为了七大模块,分别是:Events.Model.Collection.R ...

  4. 【iCore3 双核心板_ uC/OS-III】例程五：软件定时器

    实验指导书及代码包下载: http://pan.baidu.com/s/1eSHenjs iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  5. 使用 Sublime Text3 编辑 Markdown

    安装插件 可以通过安装 Markdown 的插件来使 Sublime Text3 变成一款 Markdown 编辑器 1.Markdown Preview 插件 输入Shift + Ctrl + P, ...

  6. android.util.Base64结尾加\n的问题

    测试代码,String data,String key. SecretKeySpec signingKey = new SecretKeySpec(key.getBytes(), HMAC_SHA1_ ...

  7. Ruby 类案例

    #!/user/bin/ruby # -*-coding:UTF-8-*- class Customer @@no_of_customers=0 def initialize(id,name,addr ...

  8. Eclipse定制右键创建文件快捷菜单

    打开窗口“Customize Perspective - Java EE”,切换选项卡到“Shortcuts”: 进行一下配置: “Generate”:如上图勾选方式 "Java" ...

  9. excel转换日期格式，将yyyymmdd类型日期转换成yyyy-mm-dd等日期类型方法

    源数据日期格式:例如: 20160420 20160422 目标日期格式类型: 2016-4-20 2016-4-22 或 2016/04/20 2016/04/22 方法: 一.选中相应数据的单元格 ...

  10. install MCR in silent mode linux server

    ./install -mode silent -agreeToLicense yes -destinationFolder /home/yanzhh/wq/Programs/MCR export LD ...