HTML和CSS基础

选择器:

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大小的影响