选择器:
1.交集选择器:第一个是标签选择器,第二个是类选择器或者id选择器.选择器之间用点连接
2.并集选择器:可以是任何形式的选择器,各选择器之间用逗号连接
3.兄弟选择器:兄弟选择器之间用+或者~连接
例:div+p{color:red} div后面挨着的第一个p选择器;
例:div~p{color:red} div后面所有的同级的p选择器;
4.后代选择器:外层选择器在前,选择器之间中间用空格分隔,包括子孙后代
例: .class h1{color:red}
5.子代选择器:父在前,子在后,不包括子孙后代,选择器之间用>连接
例: .class>h1{color:red}
6.属性选择器:[type] 只要存在type都可以作用
CSS:层叠样式表
三大特性
层叠性:一个属性通过两个选择器设置到同一个元素上,某一个属性就会将另一个属性层叠掉
继承性:子元素可以继承父元素的样式
优先级:!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
块级元素:
通常会独占一行,设置宽高有效果
可以放块级元素和行内元素
如果设置了宽度,剩下的都是margin
行内元素
通常非独占一行,设置宽高没有效果
只能放行内元素或者文本
行内块元素
img和input 非独占一行,但是可以设置宽高
块转行内display:inline
行内转块:display:block
块\行内元素转换为行内块:display:inline-block
box-sizing: content-box; 标准盒子模型
盒子大小会受margin padding border大小的影响
box-sizing: border-box;怪异盒子模型
盒子大小不会受margin padding border大小的影响