css引入方法

  1. 内嵌

    <head>
    
  <meta charset="UTF-8">
    
  <title>Document</title>
    
  <style>
    
    ....
    
  </style>
    
</head>
  2. 行间  
    <body style="background:red;">
  3. 外联  
    <link rel="stylesheet" href="./css/main.css" />
  4. @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方式：

　　①条件注释

　　如：<!--[if IE]> 这段文字只在IE浏览器中出现 <![end if]-->

　　②属性前缀

　　如：-webkit -o -moz -ms

　　③选择器前缀

　　如：*html

CSS3常用属性：

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

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

  1. 知识梳理HTML篇

    HTML 浏览器内核: IE:trident         Firefox : gecko        Safari/chrome : webkit        Opera : presto(新 ...

  2. 知识梳理——HTML篇

    浏览器内核: IE: trident Fixfox: gecko Safari: webkit Opera: 以前是presto,现已改用Google Chrome的Blink Chrome: Bli ...

  3. [C# 基础知识梳理系列]专题六:泛型基础篇——为什么引入泛型

    引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...

  4. Oracle知识梳理（三）操作篇：SQL基础操作汇总

    Oracle知识梳理(三)操作篇:SQL基础操作汇总 一.表操作 1.表的创建(CREATE TABLE): 基本语句格式:       CREATE TABLE  table_name ( col_ ...

  5. Jmeter 接口测试知识梳理——应用基础篇

    Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! Jmeter 接口测试知 ...

  6. Jmeter 接口测试知识梳理——持续集成篇

    Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! Jmeter + Ant ...

  7. Jmeter 接口测试知识梳理——环境搭建篇

    Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! 环境搭建篇 很多文章介绍 ...

  8. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  9. C#基础知识梳理索引

    C#基础知识梳理索引 一 引子 之前曾写了一篇随笔<.NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标> 三个月过去了,目标使更多的编程初学者,轻松高效地掌握C#开发的基础,重 ...

随机推荐

  1. jquery ztree 刷新后记录折叠、展开状态

    ztree :http://www.ztree.me/v3/main.php 项目中用到了这个插件,刚好也有需求 在页面刷新后,保存开始的展开.折叠状态, 其实 dtree: http://www.d ...

  2. android中的验证码倒计时

    1.如图所示,要实现一个验证码的倒计时的效果                             2.实现 图中获取验证码那块是一个button按钮 关键部分,声明一个TimeCount,继承自C ...

  3. Spark Shuffle（二）Executor、Driver之间Shuffle结果消息传递、追踪(转载)

    1. 前言 在博客里介绍了ShuffleWrite关于shuffleMapTask如何运行,输出Shuffle结果到Shuffle_shuffleId_mapId_0.data数据文件中,每个exec ...

  4. POJ2891：Strange Way to Express Integers（解一元线性同余方程组）

    写一下自己的理解,下面附上转载的:若a==b(modk);//这里的==指的是同余,我用=表示相等(a%k=b)a-b=kt(t为整数)以前理解的错误思想:以前认为上面的形式+(a-tb=k)也是成立 ...

  5. CentOS6.9安装httpd并正确配置静态IP地址

    题目要求 在vmware中安装一台虚拟机,操作系统为centos6.9 ip地址为 192.168.56.11 要求: 1.xshell能够连接上此虚拟机 2.此虚拟机必须可以上网 3.使用yum安装 ...

  6. Java系列介绍

    Java系列目录 重新编写equals()方法,hashCode()方法,以及toString(),提供自定义的相等标准,以及自描述函数 Java 7新增功能 Java应用程序中System.out. ...

  7. 右值引用与转移语义（C++11)

    参考资料: http://www.cnblogs.com/lebronjames/p/3614773.html 左值和右值定义: C++( 包括 C) 中所有的表达式和变量要么是左值,要么是右值.通俗 ...

  8. python selenium 安装与 chromedriver安装

    安装 pip install selenium 安装完成之后运行脚本,如果没报错那ok.但是很不幸运,我报错啦.(本人使用ubuntu16.04,python2,or python3) 贴出我的报错: ...

  9. 索引查找Java实现

    package 索引查找; import java.util.Scanner; public class IndexSearch { public static long stu[] = { 1080 ...

  10. VS2010/MFC编程入门之前言

    鸡啄米的C++编程入门系列给大家讲了C++的编程入门知识,大家对C++语言在语法和设计思想上应该有了一定的了解了.但是教程中讲的例子只是一个个简单的例程,并没有可视化窗口.鸡啄米在这套VS2010/M ...