程序媛html与css高级内容 知识点
一 html语义化
p默认情况下有上下间距 div没有，若想清除可以设置p{margin:0px;padding:0px;}，margin与padding同时也适用于css中p段落调整上下间距（而line-height由于值设置越大，段落间距和行距都会增加，不推荐）。
二 部分html5新标签
div--section--article
div无语义，仅定义样式化；section适用于有主题的内容块；article适用于与网页内容无关且可以放置在任意网页任意位置的内容。section和article里均可包裹header ,footer标签。
三 块级元素和行内元素
display：inline---- -block------inline-block---》改变元素的布局级别
1.display:inline--多个相邻元素排一行，直到占不下，宽度随着元素内容而变化，设置width，height无效
2.display：block--多个元素各自起新行，宽度自动填满父元素，可以设置width，height，padding，margin
3.display:inline-block--既具有block的宽度高度特性又具有inline的同行特性
示例如下:
1.<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
宽高度设置无效
2.<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
<a
href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
宽高度设置生效，自动生成两行
3.<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>
<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>
宽高度生效，且排列在同一行
四 内部样式表和外部样式表
内部样式表是在style标签内html和css分离编写，好处是清晰避免冗余，注意{}
外部样式表是在html里给相同div样式的不同页面添加css文件外链，修改其中某个页面时，注意对应页面css文件外链要在公共css文件外链下面。
五 选择器
1.id 选择器 #id名称{ } 构成只能是字母 数字 _ ,且不能以 数字开头，企业开发中只是为了设置样式时，一般采用类选择器，否则会认为是留给js使用的。
2.类选择器.{}(例子：class属性 class="right right1" .right {} .right1{}) 专门用来给特定的标签设置样式且每个标签可以设置多个类名。企业开发中学会 善于将公共的代码抽取到一个类选择器， 然后绑定给需要的标签。
3.vertical-align 元素对齐--子元素选择器 例子：.right>header {} 意思是类选择器为right的section元素中的header元素
见相册。
企业开发中如果想选中指定标签中的所有特定标签，应该用后代选择器（例子：标签1 标签2{ }div p{}），如果想选中指定标签中所有的特定儿子标签，则用子元素选择器（标签1>标签2{}）
4.通用选择器*{}
5.伪类选择器：{} 伪类元素：before 和:after。这其中涉及到dom树http://book.51cto.com/art/201407/444382.htm
6.序选择器