CSS伪类选择器
p:hover 选择鼠标指针位于之上的标签。
p:first-child 选择属于父元素的第一个标签，并且为p标签，如果第一个不是p标签则无效。
p:first-of-type 选择属于其父元素的首个出现的 <p> 元素。
.box:first-of-type （box为p标签类名）选择属于父元素的首个p标签，并且带有box类名，没有box类名则无效。
p:last-child 选择属于父元素的最后一个并且为p标签的标签，如果最后一个不是p标签则无效。
p:last-of-type 选择属于父元素的最后一个出现的p标签。
.box:last-of-type （box为p标签类名）选择属于父元素的最后一个p标签，并且带有box类名，没有box类名则无效。
p:nth-child(2) 选择属于父元素的第二个标签，并且为p标签，如果第二个不是p标签则无效。
p:nth-of-type(3) 选择属于父元素的第三个出现的p标签。
.box:nth-of-type(3)（box为p标签类名）选择属于父元素的第三个p标签，并且带有box类名，没有box类名则无效。
CSS行内元素与块级元素
行内元素：display：inline
与其他行内元素并排
不能设置宽高，默认的宽度就是文字的宽度
除了p之外，所有的文本级标签，都是行内元素。常见：a、span、b、strong、br
•
块级元素：display：block
独占一行，不能与其他任何元素并列。
能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%
所有的容器级标签，都是块级元素，以及p标签。常见：div、p、ul、ol、h1~h6
•
行内块级元素：display：inline-block
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍
不自动换行
能够识别宽高
默认排列方式为从左到右。常见：img、textarea、input、button、select
块级元素和行内元素的相互转换：
我们可以通过display属性将块级元素(比如div)和行内元素进行相互转换
display：inline 转换为行内元素
display：block 转换为块级元素
display：inline-block 转换为行内块元素
display：none隐藏元素
文本属性
文本设置
<style> div{ width: 100%; border: 1px solid red; color: red; text-align: center; font-size:24px; text-indent: 2em; text-decoration: underline; letter-spacing: 20px; } </style>文字设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
• <title></title>
<style>
• div{
• font-weight: bold;
• font-style: italic;
• font-size: 50px;
• font-family: "宋体";
• }
• </style>
• <!--
• font-weight 文字加粗
• bold 加粗
• font-style 文字倾斜
• italic 斜体
• normal 正常
• font-size 文字大小
• -->
</head>
<body>
• 鲸英三期
</body>
</html>
行高
div{
• border: 1px solid red;
• line-height: 50px;
• height: 50px;
• }
当文本行高与外部容器高一致时，文本会垂直居中
font复合样式
div{
• /*font-weight: noemal;
• font-style: normal;
• font-size: 48px;
• font-family: "宋体";*/
• border: 1px solid red;
• font: bold italic 26px/50px "宋体";
• }
float浮动布局
使用行内块元素会被换行空格等影响布局，这里引入float布局来解决这个问题。
float可设置left、right、none，默认值为none。
注意标签使用了浮动后，父标签不会自动撑开，需要给父级清除浮动。
清除浮动一般使用伪元素:after来清除：
.clearfix:after {
content: ""; /内容设置为空！！！/
display: block; /显示为块级元素！！！/
height: 0; /设置高度为0！！！/
visibility: hidden; /设置不可见！！！/
clear: both; /清除浮动！！！/
定位布局
float布局已经能完成大部分的布局了，但是相对位置还是很局限，只能设置左右浮动。这里引入定位布局，相对 float更加灵活，但是会复杂一点。定位布局允许你定义标签相对于其正常位置应该出现的位置，或者相对于父元素、甚至是浏览器窗口本身的位置。
定位：position，可选值：relative、absolute、fixed、static（默认值）
relative
标签偏移某个距离。但是标签仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
标签从文档流完全删除（类似浮动），并相对于父级或祖先级有定位属性的标签做定位，如果都没设置定位属性则相对浏览器窗口做定位。
fixed
元素框的表现类似于将 position 设置为 absolute，只不过是相对浏览器窗口做的定位。