知识梳理——CSS篇

css引入方法

内嵌

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    ....

  </style>

</head>

行间
```
<body style="background:red;">
```

外联

<link rel="stylesheet" href="./css/main.css" />

@import方法
```
@import url("css/mycss.css")
```

基础选择器

　　元素选择器：h1...

　　类选择器：.class

　　id选择器：#id

　　通配符选择器：*

　　子元素选择器：>

　　后代元素选择器：ul li

　　相邻元素选择器：+

　　属性选择器：[]

　　组合选择器：h1,h2,h3,h4,h5{}

　　复合选择器：div.test{} (注意：中间没有空格，否则就会被识别为后代选择器了)、

伪元素

　　:first-letter :first-line :before :after ::selection(css3中唯一引入的伪元素)

伪类

　　css2中只有:link、:visited、:hover、:active、:focus、:first-child、:lang等有限的几种伪类选择器；

　　css3中增加了大量的伪类选择器：

　　结构化伪类：:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:last-child、:first-of-type、:last-of-type、

　　:only-child、:only-of-type、:root :empty

　　目标伪类：:target

　　状态伪类：:enabled、:disabled、:checked、:indeterminate、:default

　　否定伪类：:not()

　　（css3中新增伪类的具体用法可参见《CSS高效开发实战》一书）

盒子模型

　　标准盒子模型中：内容区域的宽度和高度就是width和height

　　IE盒子模型中：内容区域的宽度包含了内容、内边距、边框的总和。

　　CSS3中的box-sizing属性可以定义要使用何种盒模型。

定位

　　static: 默认

　　absolute（绝对定位）：相对于与它最近的那个已经定位了的祖先元素进行定位，如果没有已定位的祖先元素，则它的位置相对于初始包含块。绝对定位使元素的位置与文档无关，因此不占据空间。

　　relative：相对于它原来在的位置进行定位，使用相对定位时，无论是否移动，元素仍然占据原来的空间。

　　fixed：总是以视口的左上角进行定位

清除浮动

　　1、float父元素

　　2、添加空标签clear

　　3、overflow:hidden或者auto;

　　4、after伪类{

　　　　　　　　content:".";

　　　　　　　　height:0;

　　　　　　　　visibility:hidden;

　　　　　　　　display:block;

　　　　　　　　clear:both;

　　　　　　}

CSS hack--使css代码兼容不同的浏览器

　　常用的css hack方式：

　　①条件注释

如：

　　②属性前缀

　　如：-webkit -o -moz -ms

　　③选择器前缀

　　如：*html

CSS3常用属性：

　　border-radius,box-shadow,text-shadow,transform(rotate,scale,skew,translate),transition,animation,@font-face,媒体查询@media　　

知识梳理——CSS篇的更多相关文章

知识梳理HTML篇
HTML 浏览器内核: IE:trident Firefox : gecko Safari/chrome : webkit Opera : presto(新 ...
知识梳理——HTML篇
浏览器内核: IE: trident Fixfox: gecko Safari: webkit Opera: 以前是presto,现已改用Google Chrome的Blink Chrome: Bli ...
[C# 基础知识梳理系列]专题六:泛型基础篇——为什么引入泛型
引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...
Oracle知识梳理（三）操作篇：SQL基础操作汇总
Oracle知识梳理(三)操作篇:SQL基础操作汇总一.表操作 1.表的创建(CREATE TABLE): 基本语句格式: CREATE TABLE table_name ( col_ ...
Jmeter 接口测试知识梳理——应用基础篇
Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! Jmeter 接口测试知 ...
Jmeter 接口测试知识梳理——持续集成篇
Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! Jmeter + Ant ...
Jmeter 接口测试知识梳理——环境搭建篇
Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! 环境搭建篇很多文章介绍 ...
jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
C#基础知识梳理索引
C#基础知识梳理索引一引子之前曾写了一篇随笔<.NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标> 三个月过去了,目标使更多的编程初学者,轻松高效地掌握C#开发的基础,重 ...

随机推荐

New Garbage Collector http://wiki.luajit.org/New-Garbage-Collector
New Garbage Collector http://wiki.luajit.org/New-Garbage-Collector GC Algorithms This is a short ove ...
Flink简介及使用
一.Flink概述官网:https://flink.apache.org/ mapreduce-->maxcompute HBase-->部门 quickBI DataV Hive--& ...
第一课：初识Hadoop
Hadoop核心组件之分布式文件系统HDFS: 特点:扩充性,容错性,海量数据存储. 在HDFS中每次上传文件,都会将文件切分成指定大小的数据块(默认128m)并以多副本的存储在多个机器上. 数据切分 ...
mysql 约束条件 auto_increment 自动增长目录
mysql 约束条件 auto_increment 自动增长 mysql 约束条件 auto_increment 自动增长起始值布长起始偏移量 mysql 约束条件 auto_increment ...
python实现文件夹遍历
python 中os.path模块用于操作文件或文件夹 os.path.exists(path) 判断文件路径是否存在 dir = "c:\windows"if os.path.e ...
try...cath...finally中的return什么时候执行
一finally可以没有,也可以只有一个.无论有没有发生异常,它总会在这个异常处理结构的最后运行.即使你在try块内用return返回了,在返回前,finally总是要执行,这以便让你有机会能够在异常 ...
Java基础知识陷阱(十)
本文发表于本人博客. 上个星期由于时间比较紧所以未能继续写下去,今天再接再厉,专心 + 坚持这样离目标就越来越近了!废话少说说正题,今天我们还是来说说java中比较基础的知识,大家知道编写java程序 ...
SQL Server 一些使用小技巧
1.查询的时候把某一个字段的值拼接成字符串以下是演示数据. 第一种方式:使用自定义变量 ) SET @Names='' -- 需要先赋值为空字符串,不然结果会是 null SELECT @Names ...
项目中使用protobuf 3.0
protocol buffer从3.0 原生的compiler支持c++,Java,Python,Go,Ruby,JavaNano,JavaScript,Objective-C,C#,PHP这篇文章作 ...
pyDay14
内容来自廖雪峰的官方网站. 1.map的优点:省代码 + 提高可读性. 2.map 运用示例: >>> def f(x): ... return x * x ... >> ...

知识梳理——CSS篇

知识梳理——CSS篇的更多相关文章

随机推荐

热门专题