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. nginx 下使用 bootstrap 字体的问题

    使用boostrap时,出现 glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff glyphicons-halflin ...

  2. No module named pip.req

    https://stackoverflow.com/questions/25192794/no-module-named-pip-req#

  3. [svc]ip地址划分

    网络界有2个计算题,一个是子网掩码,另一个就是三次握手,四次回收序列号计算了. 学会如何划分等长子网 学会如何合并网段 学会ip是否能分配 理解特殊的ip地址 ip头部 ip地址分类 现在的IP网络使 ...

  4. PAT 1114 Family Property[并查集][难]

    1114 Family Property(25 分) This time, you are supposed to help us collect the data for family-owned ...

  5. MonkeyScript使用教程

    原文地址https://www.cnblogs.com/yizhou-xu/p/8072813.html 原文地址https://www.cnblogs.com/YatHo/p/7205162.htm ...

  6. SpringData关键字查询练习

    我们在上一节知道SpringData关键字有很多,我就拿几个例子练练手 1.需求我们查询lastName like sun and id < ?的查询 package com.fxr.sprin ...

  7. HIVE: 自定义TextInputFormat (旧版MapReduceAPI ok, 新版MapReduceAPI实现有BUG？)

    我们的输入文件 hello0, 内容如下: xiaowang 28 shanghai@_@zhangsan 38 beijing@_@someone 100 unknown 逻辑上有3条记录, 它们以 ...

  8. 服务器负载、CPU性能判断

    说在前面: 在linux操作系统中,我们一般查看系统的cpu负载情况常用的命令可以是uptime,top,还有vmstat等这些个都是可以有的.每个工具所提供的信息各不相同, 我这里要讨论的仅说cpu ...

  9. DirectX9.0c SDK学习笔记（一）

    Direct9.0c SDK中提供了一个叫DXviewer的*.x格式文件查看器的源码,代码给出了基于DXUT框架的模型显示接口使用方法, 对于我想编写一个动作捕捉的上位程序是大有助益的. 我的想法是 ...

  10. Ubuntu16.04编译安装tensorflow，2018最新血泪踩坑之后的全面总结！绝对成功！【转】

    本文转载自:https://blog.csdn.net/pzh11001/article/details/79683133 大家好,我是 (深度学习硬件DIY总群)(719577294)群主:    ...