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. html 前端 总结(一)

    前端 html 总结(一) 基础部分:计算机原理 a: 是由运算器 控制器 内存组成储存器包括内存.外村外存 硬盘内存 由外村调入到内存执行输入——内存——cpu 运算 cpu运算——内存——输出设备 ...

  2. vue 解决display与 transition冲突

    下边是vue的源码 var raf = inBrowser && window.requestAnimationFrame; var waitForTransitionStart = ...

  3. String-自定义功能

    <script> /* *发现js中的String对象有限,想要对字符串操作的其他功能. *比如:去除字符串两端的空格.这时只能自.定义 */ //去除字符串两端的空格 function ...

  4. python 安装mysql-python模块

    方式一 使用yum安装 # yum install MySQL-python 方式二 使用pip 安装 # pip install mysql-python 使用pip方式安装需要提前安装如下依赖 m ...

  5. Code Snippet

    Code Snippet: http://msdn.microsoft.com/en-us/library/z41h7fat.aspx CodePlex.Snippets 4.0 - Visual S ...

  6. Java-马士兵设计模式学习笔记-代理模式-聚合与继承方式比较

    一.概述 1.目标:要在Tank的move()方法做时间代理及日志代理(可以设想以后还要增加很多代理处理),且代理间的顺序可活更换 2.思路: (1)聚合:代理类聚合了被代理类,且代理类及被代理类都实 ...

  7. sql操作之修改记录值

    mysql修改.删除数据记录 用update修改记录 UPDATE tbl_name SET 要更改的列 WHERE 要更新的记录 这里的 WHERE 子句是可选的,因此如果不指定的话,表中的每个记录 ...

  8. Java中的集合框架

    概念与作用 集合概念 现实生活中:很多事物凑在一起 数学中的集合:具有共同属性的事物的总体 java中的集合类:是一种工具类,就像是容器,储存任意数量的具有共同属性的对象 在编程时,常常需要集中存放多 ...

  9. 复制代理JOB

    复制代理说明: 复制代理执行许多与复制有关的任务,其中包括创建架构和数据副本.检测发布服务器或订阅服务器上的更新以及在服务器之间传播更改. 默认情况下,复制代理在 Microsoft SQL Serv ...

  10. replace截取字段

    var a = '123:'b = '123:disfkajsdhfjkasdhf'c = b.replace(a, '')"disfkajsdhfjkasdhf"