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：绝对定位（脱离文档流）
相对定位：元素在文档流中依然占据原来的位置，只是在“表现”上会根据原来的位置而产生相对偏移。
相对定位图示：
示例图上虚线部分为元素原来的位置并得以保留，元素相对其原始位置向右偏移30px，向下偏移20px。
绝对定位：块元素完全从文档流中删除，并通过精确的定位属性值来确定元素的位置。该元素原来在文档流的位置将消失，元素定位后生成一个块级元素框。
图示如下：
绝对定位后，框2原来的位置消失，框1和框3挨在了一起。框2的定位值（top和left取值）为相对其已定位的祖先元素。
绝对定位中top等元素的用法和相对定位一致，请参考相对定位一文说明。
提示
- 要是用绝对定位，必须指定 left，right，top，bottom 属性中的至少一个
- 使用绝对定位的元素，若无已定位的祖先元素，则其相对位置可能会是浏览器画布（浏览器可显示页面）body或HTML元素
css回忆（一）的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- 原来css中的border还可以这样玩
原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
- HTML+CSS知识点总结
转自:http://blog.csdn.net/qiushi_1990/article/details/40260447?utm_source=tuicool&utm_medium=refer ...
- CSS魔法堂：说说Float那个被埋没的志向
前言 定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...
- css引入方式优先级以及不同选择器的优先级区别
我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style ...
- 纯css实现照片墙3D效果
每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自 ...
- css常见的易混淆属性和值的区别(一)
css的属性很多,每一个属性的值也很多,组合起来便有成千上万种.不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言.下面对工作中常见的易混淆的属性和值进行总结: 1. lin ...
- 史上最全的HTML、CSS知识点总结，浅显易懂。
来源于:http://blog.csdn.net/qiushi_1990/article/details/40260447 一,html+css基础1-1Html和CSS的关系学习web前端开发基础技 ...
随机推荐
- 为什么使用ConcurrentHashMap
ConcurrentHashMap是有Segment数组结构和HashEntry数组结构组成. Segment是一种可重入锁(ReentrantLock),在ConcurrentHashMap里扮演锁 ...
- Python 脚本 监控数据库状态
打算用这个脚本通过zabbix 监控Mariadb的,无奈要等Mariadb完全上线才行,所以先写一个粗略大致功能的版本. #coding:utf-8 #author:shiyiwen #versio ...
- 创建一个LinkedList，然后在其中插入多个值，确保每个值都插入到List中间（偶数中间两个数之一，奇数在正中间）
这是Thinking in java 中的一道题,下面是我的解决方案: package test; import java.util.LinkedList; import java.util.List ...
- IOS第11天(1:UIPickerView点餐)
UIPickerView #import "ViewController.h" @interface ViewController ()<UIPickerViewDataSo ...
- ios-model数据结构
主要作用:简化VC代码,便于请求数据中字段的增.删.查.找,以及后期代码维护. 一.构建Model. 创建继承于NSObject的PlaceOrderModel #import <Foundat ...
- linux命令学习（2）：wc 命令
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项]文件... 2．命令功能: 统计指定文件中的字节数. ...
- Bootstrap 弹出框和警告框插件
一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type=" ...
- discuz安装
1.upload文件复制到根目录下,访问,安装 2.数据库需要提前建好 3.数据库地址默认是localhost,我安装时是127.0.0.1 4.最好在本地安装时,配置本地域名和线上域名一样,不然迁移 ...
- request.getHeader所想到的
request.getHeader(""),简单的说就是获取请求的头部信息,根据http协议,它能获取到用户访问链接的信息. /** * Returns the value of ...
- Eclipse Memory Analyzer，内存泄漏插件，安装使用一条龙
网上文档很多,但最初都有问题.整理一份,作为备份.使用过程:开发代码写完后,对可能出现内存溢出的代码,添加配置文件,生成.hprof文件,用memory Analyzer分析排查问题,且泄漏内存大小可 ...