首页 > 代码库 > CSS 简单知识概括

CSS 简单知识概括

 CSS选择器

ID选择器

 #ID{color:red} 

类选择器

 .class{color:blue} 

属性选择器

注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择

 [title]{color:green} 

元素选择器

 p{font-size:15px} 

后代选择器

 p  a{font-size:15px} 

子元素选择器

 p > a{background:red} 

相邻兄弟选择器

 h1 + p{background:yellow} 

伪类选择器

 a:hover{color:red} 

 

网上流行的权重规则

内联样式:1000id选择器:100类,伪类,属性选择器:10元素选择器:1

 

盒子模型

盒子模型有两种,标准盒子模型和IE盒子模型(怪异盒子模型)

它们都有content(内容),padding(内边距),border(边框)和margin(外边距)

它们的的区别就在于,标准盒子模型,内容的长宽,即是盒子的长宽,IE盒子模型,内容+内边距的长宽=盒子的长宽

 

 

 

 

浮动属性相关

div{float:left}

属性包括:left,right,none,inherit

浮动元素会脱离标准文档流,浮动到其他元素上去,使用不当,还会造成浮动坍塌的问题,有兴趣可以去了解下

 

绝对定位和相对定位

a{position:absolute}

属性包括:static,absolute,relative,fixed

绝对定位absolute会脱离标准文档流,相对定位relative不脱离标准文档流,固定定位fixed同样脱离标准文档流

 

ps:这只是简单的资料概括,建议大家还是去专门的知识网站查阅,防止遗落知识点

 

CSS 简单知识概括