HTML排版+CSS3基础讲解
总裁视野
1、HTML的排版；什么是块儿级标签、行级标签、定位
1）块儿级标签
标题标签
<h1></h1>
h1--h6
*列表标签：ul/ol/dl
*排版标签：div/p/
表格标签：table
（2）行级标签：span/a/strong等
（3）定位
静态定位static（排版方式由上到下、由左到右）
相对定位relative（未脱离文档流）
绝对定位absolute（脱离文档流）
固定定位flxed（脱离文档流）
绝对定位与固定定位的相同点与不同点：
相同点：都脱离了标准文档流。
不同点：
1）绝对定位是根据他的父节点定位进行偏移的，不是相对于自己原来的位置发生偏移，也就是说他移动后他原来的位置就空了，后面的元素会自动移动上去，其次，他现在的位置也不在标准文档流当中，也就是说现在的他相当于浮动在标准文档流之上。
2）固定定位是根据body进行偏移的，不会随页面滚动条的滚动而发生位置变化。
2、全局通用样式
body{
font-family: 微软雅黑;
font-size: 14px;
color: #333;
}
a{
text-decoration: none;
cursor: pointer;
color: #333333;
}
ul{
list-style: none;
}
input{
border: none;
outline: none;
background: none;
box-shadow: none;
}
table{
/* 合并边框模型 */
border-collapse: collapse;
}
img{
/* IE11以下图片会出现边框线 */
border:none;
}
.name3 ul li:first-child{
color: #fff;
}
[infobox]3、CSS3样式简介[/salong-message]
（参考地址：https://segmentfault.com/a/1190000017138873）
3.1display:flex;弹性布局
display:flex是一种布局方式。可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex的常见属性:
justify-content:space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
justify-content:space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。
justify-content:center;元素在主轴（页面）上居中排列
flex-direction:column;让元素沿垂直主轴从上到下垂直排列
3.2选择器
CSS3新增了许多灵活查找元素的方法，能够极大的提高我们查找元素的效率和精准度。选择器分别分为：属性选择器、伪类选择器、伪元素选择器。
（1）属性选择器
属性选择器就是通过属性来选择元素：
| 选择器 | 含义 |
| [attr] | 存在attr属性即可 |
| [attr=val] | 属性值完全等于val |
| [attr*=val] | 属性值里包含val字符并且在“任意”位置 |
| [attr^=val] | 属性值里包含val字符并且在“开始”位置 |
| [attr$=val] | 属性值里包含val字符并且在“结束”位置 |
（2）伪类选择器
伪类元素中重点是结构伪类元素
| 选择器 | 含义 |
| :fist-child | 其父元素的第1个子元素 |
| :lase-child | 其父元素的最后1个子元素 |
| :nth-child(n) | 其父元素的第N个子元素 |
| :nth-last-child(n) | 其父元素的第N个子元素(倒着数） |
（3） 伪元素选择器
1、::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2、::first-line文本第一行；
3、::selection可改变选中文本的样式；
4、::before和::after
CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下:after、:before会被自动识别为::after、::before，这样做的目的是用来做兼容处理。
3.3文本阴影
text-shadow:2px2px2px#CCC;
1、水平偏移量正值向右负值向左；
2、垂直偏移量正值向下负值向上；
3、模糊度是不能为负值；
4、阴影颜色
注意：
1、在写新页面时不要引入无关的css文件，简单的页面尽量自己去写样式，这样第一可以减少代码量，提高页面的加载速度；
2、能够减少页面在引入无关的css文件导致页面布局错乱。
