web前端开发第一阶段——盒子阴影/选择器/浮动

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_43151638/article/details/102696491

1、box-shadow：2px 2px 2px green inset;

第一个值：X轴的偏移量
第二个值：Y轴的偏移量
第三个：模糊度
第四个：阴影颜色
第五个:内阴影 inset（默认外部阴影）

阴影可以叠加
box-shadow：2px 2px 2px green inset,-2px -2px 2px green;

2、选择器（不完全）

1.伪类选择器(以a标签为例)

1)没有点击之前
	a:link
2)鼠标悬浮在上面(可以搭配任何标签)
	a:hover
3)已被访问状态
	a:visited
4)用户激活/点击后
	a:active

2.伪元素选择器:插入一个加标签,内容

通过css添加
	 在前面：
		：before{
			content:"插入内容";
		}
	在后面：
		：after{
			content:"插入内容";						
		}

3.子选择器：“>”

包含关系
	.list ul>li{
		font-family:"华文行楷"；
	}

4.下一个兄弟选择器：“+”

例如：
	<div>chu </div>
	<span>lai</span>
	label

5.后代选择器

找到第n个标签  同级
	li:nth-of-type(n){
		color:blue;
	}

6.只找属性选择器

[class="list"]{
	background: #98FB98;
}

3、浮动

Float:让标签能在一行显示
	Left/right/none
文档流：标签在页面里面的位置
特点：
		i. 标签脱离文档流，影响其他标签
		ii. 加了浮动后，任何标签任意样式都有效果  注意：与前面行内标签宽高设置无效呼应
		iii. 当不给父级设置高度时，浮动元素不能把父级chengk#
		iv. 加浮动后，标签无继承
浮动范围：
	在父级范围内左右浮动
浮动位置：
	a. 浮动标签的上一个兄弟标签设有浮动，在当前自己的位置上面左右浮动
	浮动标签的上一个兄弟标签有浮动，会连在上一个兄弟标签后面