HTML5+CSS3 2
html5语义化标签
<header> 内容区块或者整个页面的标题
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。<section> 内容区块
<article> 独立内容（文章）
<nav> 导航链接
<footer> 脚注
css选择器
* 通用选择器 选择所有元素 *{}
标签名 标签选择器 根据标签选择元素 a{} ,p{}
.<类名> 类选择器 根据class值选择元素 .beam{}
#<id值> ID选择器 根据你就ID的值选择元素 #logo{}
[<条件>] 属性选择器 根据属性选择元素 [alttr="val"]{} / /属性值为val
<>,<> 并集选择器 同时匹配多个选择器，取并集 em,strong{} //两个标签选择器
<> <> 后代选择器 先匹配属于第一个选择器中并属于 .vn l{} //中间空格
第二个选择器的元素
<>><> 子代选择器 匹配第二个选择器中属于第一个 l>k{}
选择器元素的后代
<>+<> 兄弟选择器 匹配紧跟的两个兄弟元素 h1+p{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1111</title>
</head>
<style type="text/css">
h1+p{
margin-top:50px;
float:left;
color:red;
position:absolute;
}
</style>
<body>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
</body>
</html>
显示
显示顺序不对？ 就是3变红的意思
：：<伪元素>或者：<伪类> 伪选择器 增加特殊效果
常见伪元素
：：first-line 匹配首行
：：first-letter 匹配首字母
：：before 在选中元素的内容之前插入内容
常见伪类
：first-child 父元素的第一个子元素
：nth-child(n) 匹配父元素的第n个子元素
：hover 匹配鼠标悬停状态下的元素
：link 匹配链接元素
：active 匹配被激活状态下的元素
：nth-of-type(2n) 匹配偶数行类型
盒子模型：
将html页面内的元素当做盒子，盒子由外边距，边框，内边距，内容构成。
两个垂直相邻的元素或者嵌套的两个元素，边距为较大者边距；
css默认块级元素独占一行，自上而下，行内自左向右排列。
css浮动：
float:left 向左浮动即行内元素左对齐上下排列
浮动后元素自动成为块级元素；浮动元素不超过父元素边缘；两个浮动元素同行空间不足就换行显示
css定位：
position:relative 相对定位（相对文档流位置）
position:absolute 绝对定位（除static定位的第一个上级元素定位）
position:fixed 相对浏览器定位
top:13px 距离顶部边线13px
z-index position为absolute,relative,fixed 有效，表示靠用户距离，越大越近。
overflow-x:hidden 水平方向溢出，没有滚动条
overflow-y:scroll 垂直方向内容溢出则出现滚动条
outline:none 当 元素获得焦点的时候，不出现虚线框
list-style:none 清除默认样式
text-decoration:none 清除文本样式
