css基础

1.选择器

1.基本选择器

1. 统配选择器 *

2. 标签选择器

   会选择到这个页面上所有的这个标签的元素

3. 类选择器 .class名称{}

   选择所有class属性一支的标签,跨标签

4. 4.id选择器: #id名称{}

   ? id必须保证全局唯一

   ? 不遵循就近原则

   ? 优先级: id选择器 > class选择器 > 标签选择器

2.层次选择器

1. 后代选择器: body p{}
   1. 在某个元素的后面都有显示
2. 子选择器: body>p{}
   1. 在某个元素的后面一代显示
3. 相邻兄弟选择器: .active +p{}
   1. 只有同辈相邻的向下的 p元素的那一个(不包括自己)
4. 通用兄弟选择器: .active~p{}
   1. 同辈向下的所有 p 元素(不包括自己)

3.结构伪类选择器

/* ul 的第一个子元素	子元素为 li*/   
ul li:first-child{
    background:red;
}
/* ul 的最后一个子元素*/
ul li:last-child{
}

/*选中p1 : 定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效.
*	顺序/
p:nth-child(1){
}

/*选中父元素,下的p元素的第二个,	类型*/
p:nth-of-type(1){
}

4.属性选择器(常用)

属性名, 属性名 = 属性值(正则)

= 绝对等于

*= 包含这个元素

^= 以这个开头

$= 以这个结尾

/*都在a标签内
/*存在id属性的元素			a[]{}
	a[id]{}

id = first的元素
	a[id=first]{}

class中有links的元素
	a[class*="links"]{}

选中href中以http开头的元素
	a[href^=http]{}

选中href中以xx结尾的元素
	a[href&=http]{}

2.美化网页元素

文本的样式

1. 颜色: color rgb rgba
2. 文本的对齐方式 text-align =
3. 首行缩进 text-indent=
4. 装饰 text-decoration 下划线
5. 文本图片水平对齐: vertical-align:middle
6. text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径

超链接伪类

? 1.hover 鼠标悬停的状态

? 2.active 鼠标点击中的状态

3.块元素,内联元素,内联块元素之间的转换

display属性是用来设置元素的类型及隐藏的,常用的属性有:
	1.none 元素隐藏且不占位置
	2.block 元素以块元素显示
	3.inline 元素以内联元素显示
	4.inline-block 元素以内联块元素显示

4.父级边框塌陷问题

解决方案

1. 增加父级元素的高度

2. 增加以个空的div标签,清除浮动

   <div class="class"></div>
   	.clear{
   	clear:both;
   	margin:0;
   	padding:0;
   	}

3. overflow

   在父级元素中增加一个 overflow:hidden

4. 在父级添加一个伪类:after

   #father:after{
       content:‘‘;
       display:block;
       clear:both
   }

小结:

1. 浮动元素后添加div
   1. 优点:简单
   2. 缺点:代码中尽量避免空div
2. 设置父元素的高度
   1. 简单
   2. 元素假设有了固定高度就会被限制
3. overflow
   1. 简单
   2. 下拉的一些场景避免使用
4. 父类添加一个伪类:after(推荐)

5.定位

1. 相对定位: position:relative

   相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在标准文档流之中

   原来的位置会被保留

2. 绝对定位:基于xxx定位,上下左右

   1. 没有父级元素定位的前提下,相对于游览器的定位
   2. 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
   3. 在父级元素的范围内移动
   4. 相对于父级或游览器的位置,进行指定的偏移,绝对定位的话,他不在标准文档流之中

3. 固定定位

   不会随游览器移动