知识梳理——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方式:
①条件注释
如:<!--[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篇的更多相关文章
- 知识梳理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#开发的基础,重 ...
随机推荐
- android data recovery and nc
目录下会出现mmcblk0.raw文件,文件大小等于手机内部存储空间的大小,该文件正是手机内部存储空间的镜像文件. 第七步,打开一款传统的数据恢复工具,由于raw文件是linux文件系统格式,因此需要 ...
- nginx:负载均衡的session共享
一.场景 当nginx做了负载均衡之后,同一个ip的url请求服务器的时候,负载均衡会根据每台服务器的权重等一些设置将请求转发到不同的服务器上去进行处理,这样的话针对一些带有状态请求的情况来说就是个很 ...
- Caocao's Bridges---hdu4738(桥)
http://acm.hdu.edu.cn/showproblem.php?pid=4738 题就是求出所有的桥,然后输出桥的权值的最小值. 如果一开始是不连通的,输出0. 图有重边,需要处理, 不能 ...
- Linux中的Buffer Cache和Page Cache echo 3 > /proc/sys/vm/drop_caches Slab内存管理机制 SLUB内存管理机制
Linux中的Buffer Cache和Page Cache echo 3 > /proc/sys/vm/drop_caches Slab内存管理机制 SLUB内存管理机制 http://w ...
- 使用Atom预览markdown
1.打开任意.md文件(markdown源文件)2.windows : ctrl + shift + pmac : command + shift + p这条命令跟Sublime Text是一样的,打 ...
- EasyUI Resizable 可调整尺寸
通过 $.fn.resizable.defaults 重写默认的 defaults. 用法 通过标记创建可调整尺寸(resizable)对象. <div class="easyui-r ...
- Mac/OSX上安装xshell
xshell没有mac版,且不愿意仅为一个程序运行一个虚拟机.怎么办?装上wine个来跑shell吧! 1.安装 WineBottler 过程略(制作.管理windows程序,类似CrossOver) ...
- 【原创】PHPstorm本地修改同步保存到远程服务器
PHPstorm设置本地修改的代码同步保存到远程服务器: 设置里面搜索“Deployment”,选择+号,然后选择SFTP: 填写远程主机的信息: 然后选择Mappings,填写本地代码路径和远程主机 ...
- Arthur and Brackets
n<605设计出n对夸号 给出n个条件每个条件为[l,r] 表示第i对夸号右夸号离左夸号的距离,然后夸号的右夸号出现的顺序必须按照给的顺序 出现, 那么如果存在就输出否则输出impossilb ...
- 如何有规律的备份 WordPress 博客(转)
转自:http://blog.wpjam.com/m/backup-your-blog-regularly/ 我们都知道备份 WordPress 博客应该是规律性的操作,但是事实上往往我们都会因为 ...