HTML 选择器介绍学习和背景布局自学笔记

选择器
关系选择器
1：ul li{}后代选择器
2：h1,p,a{}并集选择器
3：div>p{}子选择器
4：h1+p{}下一个兄弟元素
5:h1~p{}下面的所有兄弟元素
伪类选择器
1：a:link{}没访问的状态
2：a:visited{}被访问过后的效果
3：a：hover{}鼠标悬停
4：a：active{}被选中的效果
写作顺序：hover必须在link之后，active必须在hover之后
伪对象选择器（content）
1：div：before{} css1 在元素之前添加内容
div：：before{} css3
2：div：after{} css1在元素之后添加内容
div：：after{ } css3
设置清除浮动：
.wrap::after{
content:""；/content必须写，不能省略/
display:block;
clear:both;
}
背景：
1：background-color:red背景颜色
2：background_iamge:url()背景图片
3: background_repeat背景平铺方式
repeat平铺（默认） repeat-x水平平铺 repeat-y垂直平铺 no-repeat不平铺
4: background-position背景图片位置
单位：像素或百分比
方向：left左 right右 top上 bottom下 center中
5：backgground-attachment设背景固定方式
scroll滚动图片 fixed固定
布局：
1：visibility是否隐藏元素
visible元素可见 hidden元素隐藏
2：display设置元素的显示方式
none隐藏 block块级元素 inline行级元素 inline-block有块级和行级样式
隐藏元素的区别：
visibility隐藏元素，面积会保留，display隐藏元素，不会保留面积
定位：
1.position定位
static无定位 absolution绝对定位 relative相对定位 fixed固定定位
2.方向
left right top bottom
3.z-index 元素的层叠关系
单位：数字，可以为负数，不可以为小数，默认是0
定位区别
1.fixed:会脱离标准流，永远参照body设置位置
2.absolute：会脱离标准流，如果没有父类，参照body设置位置，如果有定位父类，参照父类
3.relative ：不会脱离标准流，参照自己定位
注意：只要不参照body设置，我们采用相对定位嵌套绝对定位
表格
< table > 表格 块级元素
< tr > 行 块级元素
< td >单元格 行级元素
< th >单元格（标题单元格）默认加粗居中 行级元素
属性
1.rowspan 合并行 单位：数字
2.colspan 合并列 单位：数字
3.cellpadding 内间距
4.cellspacing 外间距
CSS样式
1.border-spacing 设置间距值 （外间距的修改）
单位：像素或百分比
2.border-collapse 合并边框
separtate 边框独立 collapse边框合并
3.empty-cells 隐藏无内容单元格
hide隐藏 show 显示