标签：
css兼容性问题 http://www.quirksmode.org/css/selectors/
程序员学英文 http://blog.csdn.net/friendbaby/article/details/6937290
关于CSS属性的浏览器兼容性，http://caniuse.com/
浏览器页面渲染过程 http://blog.csdn.net/lihongxun945/article/details/37830667
什么是table-cell
BFC
//规范
不推荐使用@import 引入其他css文件他会引起一些页面渲染的性能问题
分类命名 布局 g- 模块m-
语义命名
属性的书写顺序
先写 显示属性 而后是 自身属性 在后是 文本属性和其他属性
display width font
visibility height text-align
position margin text-decoration
float padding vertical-align
clear border white-space
list-style overflow color
top min-width background
大顺序是从左到右的顺序 而后才是从上到下的顺序
hack方式
ie6 _property:value;在属性名前加_只有ie6能识别
ie6/7 *property:value;在属性名前家*只有ie6/7能识别
css模块化
.m-nav {}
.m-nav li,.m-nav a{}
.m-nav li{}
.m-nav a{}
模块扩展就是在原先的类上在添加一个类例子如下
.m-nav-1 {}
.m-nav-1 li,.m-nav a{}
.m-nav-1 li{}
.m-nav-1 a{}
border-radius ie8及以下不支持
box-sizing ie7及以下不支持
box-shadow ie8及以下不支持
outline ie7及以下不支持
选择器
1.标签选择器 div,h1,p,span
2.类选择器 (区分大小写) class=""
3.id选择器 (区分大小写) id=""
4.属性选择器
[disabled] {background-color:red;}
[type=button] {color:blue;}
[id=btn]{color:red;} id选择器就是属性选择器的特例
[class~=sport] 选中类名里包含sport的元素
[lang|=en] 会选中lang属性值为en 或者en- 开头的元素 <p lang="en-us">hello</p>(用的不多)
[href^="#"] 选中href值以#号开头的元素 如果你的属性值是一个符号或者里面包含空格的话就需要用引号引起来;
[href$=pdf] 选中href值以pdf结尾的元素
[href*=lady] 选中href值中包含lady的元素
5.伪类选择器(都是以冒号开头的)
a:link 选中页面中所有的链接 并且 href 是有值的
a:visited 访问过的链接
a:hover 鼠标移上去的时候
a:active 点击的瞬间的样式
如果想四个都写顺序必须是这样的
:enabled 选中可用的元素设置样式 (input:enabled)
:disabled 选中不可用的元素设置样式 ..
:checked 选中被选中的元素设置样式
li:first-child{}
li:last-child{}
li:nth-child(even){} 选中偶数项
li:nth-child(3n+1){} n从0开始算 n=0:1 1:4 2:7 3:10 就是选中 1 4 7 10 项的元素
li:nth-last-child(even){} 倒着选
:only-child{} 选中那些只有一个子元素的元素 比如说ul下只有一个li
dd:first-of-type{} 选中所有dd元素中的第一个dd元素(当然不仅限于dd,可以是任何元素)
dd:nth-of-type(even) 选中偶数项的dd类型的元素
dd:nth-last-of-type(2n) 倒着选
span:only-of-type{} 选中子元素中只有一个span类型元素的父元素中的这个span类型元素 真绕 跟类型相关
:empty{} 选中没有子元素的元素 就是其中是空的 就像<div></div>这样
:root{} 选中的是html标签
:not(P) 选中不是括号中选中的元素
:target{} 选中当前正在活动的锚元素 不懂请看 例子 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target
p:lang() 选择带有以 "en" 开头的 lang 属性值的每个 <p> 元素 是开头
6.伪元素选择器
P::first-letter{} 选中p元素下面的第一个字符设置样式
p::first-line{} 选中第一行
::before{content:"."} 在选中的元素内容的前面插入content里的内容 (是内容的前面 不是前面 恩)
::after{content:"."} ..后面..
::selection{} 用于被用于选中的内容
7.后代选择器和子选择器
.main h2{} 选中class为main的元素里面的所有h2元素
.main>h2{} 选中class为main中第一级的h2元素 (是第一级别里所有的h2)
h2+p{} 选中一个P这个p的前面(紧跟的前面)必须是一个h2 所谓的兄弟
h2~p{} 选中h2后面(是后面)所有的一级的P元素
8.选择器分组
h1,h2,h3{}
css继承
子元素可以继承父元素的样式
有些样式是可以自动继承的 inherited:yes
color font text-align list-style
有些是不可以自动继承的 inherited:no
background border position
css优先级
a 行内样式
b id选择器
c 类 伪类 和属性选择器
d 标签选择器和伪元素选择器
权重从上往下依次降低
参考以下表
选择器 a b c d value
h1 0 0 0 1 1
p>em 0 0 0 2 2
style:"" 1 0 0 0 1000
.comment p 0 0 1 1 11
div#content 0 1 0 1 101
a:link 0 0 1 1 11
value值越高优先级越高
css层叠 如果优先级一样 后面覆盖前面
css改变优先级 如果优先级一样
1.可以改变样式的顺序
2.提升选择器的优先级+一个标签选择器 比如 .tip 和 .fuck 优先级一样 那么在.tip前加一个标签选择器 p .tip 他的优先级就提升了
3.color:blue !important; 在属性值的后面空一格加上!important; 那么他的优先级就会胜出 (山穷水尽的时候才用这种方式)
文本
font-size:[<length>|<percentage>] # (注意后面的#表示可以用,分隔写多个属性值)
font-size:2em;
font-size:200%; 参照物都是父元素上字体的大小
font-family:<family-name>|<generic-family>
<generic-family>=serif|sans-serif|cursive|fantasy|monospace
后面三种是不太常用的 前两种分别是:衬线体,非衬线体 是由浏览器或者系统默认指定的,如果浏览器默认设定的衬线体是微软雅黑,那么我们使用这个值的时候就是微软雅黑;
如果你英文想用一个字体中文想用一个字体的话可以这样写:
font-family:arial,"宋体"; 因为arial不包含中文 所以要用后面的中文字体;
font-weight:bold|noraml; 100|200|......900 吧粗细分成9等 但是绝大多数字体都是不支持9等的
font-style:normal|italic|oblique
italic用的是字体里的斜体,是字体里本身带的斜体, oblique是倾斜; 如果字体里有斜体即使你的值写的是oblique那么他用的也是 italic
line-height:normal|number|length|percentage |1,16px,2em,200%|
默认是normal 是1.14左右
如果是em,100%那么他的参照物是字体的大小 比如2em 字体是16px 那么他的line-height=32px;
line-height:值为number的时候比如说是3,那么他的继承方式是直接继承,意思就是他的子元素的line-height也是3 如果父元素的字体是30px子元素的字体是16px那么父元素的
line-height就是90px而子元素的只有48px;
值为百分比的时候是先计算然后再去继承,比方说300%按字体是30px来计算,计算出来是line-height是90px,那么他的子元素的line-height就是90px;就不管子元素的
字体怎么变都是90px了;
简写:font:30px/2 SimSun,SimSim;
font:italic bold 20px/30px SimSun;
font:20px Simsun;
(font-size/line-height)
三种简写方式
颜色:color:red|#ffffff|rgb(255,0,0)|rgba(255,0,0,1)|transparent 最后一个添加一个阿尔法通道可以控制透明度 1就是不透明
水平 text-align:justify;两端对齐,空格可能会加大 多增加一些间距使两端对齐
垂直 vertical-align:baseline,sub,super,top,text-top,middle,bottom,text-bottom,percentage,length;
百分比的参照物是行高;
在一段文字的中间插入一个表情图片 可以给这个图片设置class来设置样式;
如果值是20px;那么意思就是以baseline为起点往上走20px;
如果是50%;那就看行高如果行高是60px;那么就是30px;那么就是往上走30px;
top行的最高点
text-top文字的最高点
缩进 text-indent:2em|200%|10px;em是文字的大小的几倍 如果是百分比 那么参照物就是整个容器的宽度
-9999px;这一行字就没了可以说跑到屏幕外面去了
我们可以利用这样的手段去隐藏一些文字,seo里面
换行要不要保留 空格要不要合并 tab要不要合并 是否要自动换行
white-space:normal|nowrap|pre|pre-wrap|pre-line|
他们的处理方式看下表
换行 空格和tab 超出处理
normal 合并 合并 自动换行
nowrap 合并 合并 不换行让其超出
pre 保留 保留 不换行让其超出
pre-wrap 保留 保留 自动换行
pre-line 保留 合并 自动换行
上表中的合并就是自动合并 [换行 或者 空格和tab] 为一个空格
word-wrap:normal|break-word|
break-word:长单词允许自动换行;
word-break:normal|keep-all|break-all
break-all:任意两个字母之间都可以换行;
text-shadow:文字阴影:length(2~3) && color
text-shadow:1px 2px #f00; 阴影x轴的偏移 y轴的偏移 阴影颜色
text-shadow:1px 2px 2px #f00; 第三个值就阴影的模糊半径 阴影没有颜色的时候就是文字color的颜色;
text-decoration:none;underline,overline,line-through;
overline:上划线;
line-thought:中划线
text-decoration:underline overline;值可以写多个
text-overflow:clip|ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
三个配合使用 一行内文字溢出用...代替;
cursor:[url,]* 自定义鼠标形状; cursor:url(xxx.cur),pointer;
auto;自动处理;
help:带个问号
pointer:手型
zoom-in:放大
zoom-out:缩小
move:移动
inherit强制继承
盒模型
width:100px|3em|100%;
max-width:
min-width:
max-height:
min-height:
margin合并 毗邻元素之间的外边距会合并取较大值; 父元素margin和他的的第一个子元素或最后一个子元素的margin也会合并具体情况具体分析
border-radius:0px 5px 10px 15px/20px 15px 10px 5px;1和5对应 水平半径 垂直半径
border-top-left-radius:50%;分别设置
overflow:scoll显示两个滚动条 ;auto 自动显示滚动条
overflow-x:
overflow-y:
默认 width height 设置的是content-box的大小
内容盒子 content-box
边框以内(以内) border-box
box-sizing:content-box|border-box/用来设置width height指定的区域
同样的宽高padding border 设置不同的box-sizing 显示的大小的明显不同的
box-shadow:可以有多个用,隔开
box-shadow: 4px 0px 0px 0px red
水平便宜 垂直偏移 模糊半径 阴影大小
模糊半径和阴影大小可以不设置
颜色没有设置的时候就是文字颜色
box-shadow:inset 0 0 0 ,0 0 0 0 red;内阴影
模糊半径怎么理解,比方说模糊半径是3px;就是在阴影的外边缘 往外模糊1.5 往内模糊1.5
阴影是不占空间的
轮廓也是不占空间的
outline 轮廓 跟 border 类似 color:有一个不一样的值就是invert就是当前背景颜色的相反色;
背景
background-color: 跟color一样
background-image:url(),url(); 一个容器里会显示两个背景图片 先写的在上层 后写的在下层 背景颜色在下层;
background-repeat:space;等分空隙 : 平铺的在平铺的同时每张图片之间会流出一些空隙来;
round:缩放压扁可能:平铺的在平铺的同事图片会进行伸缩
当他是两个值的
第一个值是x轴的平铺 第二个轴是y轴的平铺
background-attachment:scroll,fixed,local;
背景和内容同时滚动用local;
内容滚动用scroll;
fixed 它的参照物是整个viewport
background-position:当用百分比的时候 20% 50%; 这个百分比是图片的20% 50%同时也是容器的20% 50%
background-image:linear-gradient()线性渐变
linear-gradient(red,green); 只写两个颜色 默认是从上到下所以是 上红下绿
(to top,red,green); 反向 从下往上 所以是下红上绿
(to right bottom,red,green) 向一个角 左上角红 右下角绿
(0deg,red,green); 0度从下往上的方向渐变
(45deg,red,blue); 以0度为标准顺时针旋转45度 方向还是0度时候的方向
(red,blue,green); 第一个默认缺省的值是0,第三个默认缺省的值是100,中间的默认值会平分所以就是50%;
(red,blue 20%,green); 设置中间占20%;
radial-gradient() 镜像渐变
extent-keyword closest-side | farthest-side | closest-corner |farthest-corner
离圆心 最近的那条边 最远的那条边 最近的那个角 最远的那个角
radial-gradient(closest-side,red,blue); 四个边离圆心都是最近的
(circle,red,blue); circle默认大小是最远的那个角
(red,blue); 没有写关键字默认的是farthest-corner
(100px 50px,red,blue); x轴半径是100y轴半径是50从内网外颜色是red blue
(100px 50px at 0 0,red,blue) 可以对他的圆心进行定位比如说是在 0,0点那么就是在右上角
(red,green 20%,blue);可设置多个
理解这些见附件
当我们为某一个背景图片设置 background-position:right bottom;
那么这个图片是在padding-box的右下角 为什么?
就是由background-origin:控制 border-box padding-box content-box
他的默认值就是padding-box
background-clip:border-box padding-box content-box
背景图片出现的区域裁剪 如果只想让其出现在content-box那么就使用content-box这个属性其他一样
自行脑补
background-size:auto,
20px 20px; 固定背景图片的大小
50% 50%; 都是容器的50%,很有可能被拉伸
cover;撑满整个容器 可能有些部分超出去
contain;尽可能的大,但是都不能超出容器
简写
background:url(red.png) 0 0/20px 20px no-repeat;
position/size
url(green.png) 50% 50%/contain no-repeat content-box green;
第一个box是origin,第二个是clip如果只出现一个那么他就即是origin也是clip
块级元素 :display:block;
宽度是父元素的宽度,
可设置宽高
换行显示
行级元素 display:inline;
默认宽度为内容宽度
不可设置宽高
同行显示
display:inline-block;
默认宽度为内容宽度
可设置宽高
同行显示
整块换行 如果超出后面的 就整块换行
可以为这种元素设置vertical-align:middle;那么他前后的文本节点都会垂直居中
display:none;
display:none|visibility:hidden;
如果visibility:hidden,只是不显示位置还占着
display:none;不显示并且位置也不占;
position:fixed;固定定位的元素他的默认宽度为内容宽度 参照物为视窗
遮罩层是固定定位width:100% height:100%;
一个绝对定位的元素 如果给他left top right bottom都设置值的话那么他额值就会被撑开;
三行自适应布局
.head{position:absolute;top:0,left:0;width:100%;height:100px;}
.body{position:absolute;top:100px;bottom:100px;left:0;right:0;}
.foot{position:absolute;bottom:0,left:0;width:100%;height:100px;}
relative定位的元素不会脱离文档流
绝对定位的元素是脱离文档流的 那么他后面的元素就会占据他原来的位置
float:
浮动元素的默认宽度为内容宽度
脱离文档流
脱离文档流的元素他后面的元素会占据他的位置
浮动的脱离文档流和定位的脱离文档流有些不一样
float会被边界挡住 不是完全的脱离
float的元素在同一文档流中
float对元素是脱离文档流 对内容来说是在文当流的
float:是半脱离文档流的
.clearfix:after{
content:"."; display:block;clear:both;height:0;overflow:hidden;visibility:hidden;
}
.clearfix{zoom:1;}
<div class="body clearfix">这么写
在父元素上加一个清除浮动 他的后续元素就不会占据了
居中布局
.child{display:inline-block;}
.parent{text-align:center;}
子元素为inline-block;父元素让他居中
.child{display:table;margin:0 auto;}
disply:table;的元素的宽度也是跟着内容走 只设置child 不需要设置父元素
.parent{
position:reative;
}
.child{
position:absolute;
left:50%;
trasform:translateX(-50%);
}
垂直居中 table-cell + vertical-align
vertical-align可以作用于inline inline-block table-cell元素
.parent{
position:reative;
}
.child{
position:absolute;
top:50%;
trasform:translateY(-50%);
}
一列定宽 一列自适应
一列不定宽 一列自适应剩余的宽度
多列的不定宽自适应
一列定宽 一列自适应
.left{float;left;width:100px; _margin-right:-100px;}
.right{margin-left:120px;}
ie6下回有bug
标签：
原文地址：http://www.cnblogs.com/diermeng/p/4809979.html
