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. Web前端开发基础 第四课（CSS一些性质）

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  2. ASP.NET中如何读取和写入注册表

    直接给源码: 读取注册表内容: RegistryKey regkey=Registry.LocalMachine.OpenSubKey(@"SOFTWARE\Microsoft\Window ...

  3. Android课程---布局管理器之相对布局（二）

    这次示例代码是相对布局中兄弟组件之间,设置按钮的位置,难度:*****,一定要注意有同方向和反方向之分: 1.同方向 1)layout_alignLeft 同方向左对齐 2)layout_alignR ...

  4. 【iCore3 双核心板】例程十六：USB_HID实验——双向数据传输

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

  5. How to bind data to a user control

    http://support.microsoft.com/kb/327413 Create a user control  by inheriting from the System.Windows. ...

  6. JavaScript中的setTimeout和setInterval

    上一篇博文<浏览器中Javascript单线程分析>中描述了浏览器中Javascript单线程的原理. 在此基础上,这篇文章将主要介绍setTimeout/setInterval是如何模拟 ...

  7. Flink - RocksDBStateBackend

    如果要考虑易用性和效率,使用rocksDB来替代普通内存的kv是有必要的 有了rocksdb,可以range查询,可以支持columnfamily,可以各种压缩 但是rocksdb本身是一个库,是跑在 ...

  8. Java学习-041-颜色工具类（RGB,HEX）

    在日常的网页开发中,经常需要进行颜色数值获取.转换,例如获取红色,获取蓝色,获取绿色,RGB转十六进制颜色,十六进制颜色转RGB等,因而在学习过程中,写了一个小工具类,仅供各位小主参考! 多不闲言,直 ...

  9. Android颜色资源文件

    <?xml version="1.0" encoding="utf-8"?><resources> <color name=&qu ...

  10. centos7 开机画面定制

    安装包 yum install plymouth-plugin-script 设置开机启动画面 mkdir /usr/share/plymouth/themes/tup 创建主题目录 cp /root ...