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. 23.如何查看一个keystore的具体签名信息

    keytool -list -v -keystore zhangzu.keystore

  2. Openstack（二）基本环境准备--网络、时间、yum源等

    2.1服务器版本安装 2.1.1服务器使用:centos7.4 + vm12 2.1.2重命名网卡: 传递内核参数 net.ifnames=0 biosdevname=0,以更改网卡名称为eth0,e ...

  3. sqlserver三种分页方式性能比较

    Liwu_Items表,CreateTime列建立聚集索引 第一种,sqlserver2005特有的分页语法 declare @page intdeclare @pagesize intset @pa ...

  4. The adidas NMD Camo Singapore consists of four colorways

    Next within the popular selection of the adidas NMD Singapore is really a clean all-black form of th ...

  5. Mybatis使用generatedKey在插入数据时返回自增id始终为1，自增id实际返回到原对象当中的问题排查

    今天在使用数据库的时候,遇到一个场景,即在插入数据完成后需要返回此数据对应的自增主键id,但是在使用Mybatis中的generatedKey且确认各项配置均正确无误的情况下,每次插入成功后,返回的都 ...

  6. python uwsgi报错epoll_ctl(): Bad file descriptor

    今天安装了uwsgi+supervisord+nginx,一直访问不了 直接启动uwsgi使用nginx访问,查看有大量报错:epoll_ctl(): Bad file descriptor [cor ...

  7. Android性能优化典范 - 第1季

    https://www.zhihu.com/question/30138734 http://hukai.me/android-performance-patterns/ 2015新年伊始,Googl ...

  8. 使用vux实现上拉刷新的总结

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullup ...

  9. 【运维技术】CentOS7上从零开始安装阿里RocketMQ版本：release-4.0.1【亲测哈哈】

    CentOS7上从零开始安装阿里RocketMQ版本:release-4.0.1[亲测哈哈] 安装git # 更新包 $ yum update # 安装git $ yum install git # ...

  10. 使用 log4js UDP 发送数据到 logstash

    本文地址 http://www.cnblogs.com/jasonxuli/p/6532723.html 因为 nodejs 一般会部署在多台机器,并且每台机器会起多个进程,因此查看日志时往往要人工区 ...