HTML排版+CSS3基础讲解

1）块儿级标签

标题标签

<h1></h1>

h1--h6

*列表标签：ul/ol/dl

*排版标签：div/p/

表格标签：table

（2）行级标签：span/a/strong等

（3）定位

静态定位static（排版方式由上到下、由左到右）

相对定位relative（未脱离文档流）

绝对定位absolute（脱离文档流）

固定定位flxed（脱离文档流）

绝对定位与固定定位的相同点与不同点：

相同点：都脱离了标准文档流。

不同点：

1）绝对定位是根据他的父节点定位进行偏移的，不是相对于自己原来的位置发生偏移，也就是说他移动后他原来的位置就空了，后面的元素会自动移动上去，其次，他现在的位置也不在标准文档流当中，也就是说现在的他相当于浮动在标准文档流之上。

2）固定定位是根据body进行偏移的，不会随页面滚动条的滚动而发生位置变化。

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;
}

（参考地址：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文件导致页面布局错乱。