HTML+CSS学习Day09笔记

Day09笔记

一、认识定位

关于流问题：
1、标准（文档、普通）流：就是网页正常的排版顺序

2、元素类型：block、inline、inline-block、table、inline-table、table-cell、list-item

3、浮动流：一个标记设置了float属性就成为浮动流，脱离文档流、脱标

4、可以让块级元素横向排列，可以让内联元素设置宽和高，可以让横向排列的元素去除默认间隙

5、定位流：一个标记设置了position属性就成为定位流

二、定位流：

1、语法：position:static|absolute|relative|fixed

2、position 定位，让元素的位置发生改变或者移动

3、static 静态定位，默认值，就是这个属性最初始的状态，设置了没有任何效果，遵循的是标准流的规则

4、定位属性在网页应用中非常广泛，例如：轮播图、侧边栏广告、导航栏小图标等等

5、定位属性必须配合left、right、top、bottom这几个值一起使用才会起作用

6、区分元素类型，以前在标准流中是什么类型什么特点现在设置了相对定位依旧是什么类型什么特点

三、relative 相对定位：

特点：
    
    1、不脱离文档流，不占位置或者空间
    
    2、相对于自己以前在标准流中的位置进行定位的
    
    3、区分元素类型的
    
    4、对元素进行微调，一般是配合绝对定位一起使用，给绝对定位作为参照

/*告诉浏览器这是相对定位，可以遵循它自身的规则执行了*/
		position:relative;
		top:21px;
		left:-97px;

四、absolute 绝对定位：

1、脱离文档流，不占空间
    
    规则：
    
    如果给所有的元素都设置了绝对定位，元素与元素之间会进行重叠处理。最后定位的元素会默认排列最上面
    
2、相对于祖先（父元素）元素进行定位的
    
    查找规则：
    
    绝对定位先去查看父元素有没有定位流，如果有就以父元素进行定位，如果没有继续往上进行查找，如果找到最外层还是没有定位流就以body作为定位的参照对象

五、fixed 固定定位：

特点：

1、脱离文档流，不占位置

2、相对于body进行定位

3、不区分元素类型

4、它不会随着滚动条的滚动而滚动
/*设置了固定定位后，没有指定元素的相对谁进行定位，所以它的位置会默认跟随标准流进行变化*/
	position:fixed;
	top:0;

六、定位元素的层级属性

css给咱们提供了一个属性可以控制定位的层级关系：

z-index:number|auto; 没有单位。默认情况下定位属性的层级属性默认值都是0或者auto  auto:默认值，遵从其父对象

注意点：值越大越排列最上面，值越大层级越高

/*只针对有定位的元素，此属性仅仅作用于position属性值relative或absolute，fixed的对象*/

z-index:1;

六、元素垂直居中

	*{margin:0;padding:0;}
	.box{
		width:300px;
		height:300px;
		background-color:yellow;
		margin:50px auto;
		position:relative;
		}
	.box div{
		width:100px;
		height:100px;
		background-color:red;
		position:absolute;
		left:50%;
		top:50%;
		/*子元素自身的一半*/
		margin-left:-50px;
		margin-top:-50px;
		}
    /*第二种方法*/
	/*
	.box div{
		width:100px;
		height:100px;
		background-color:red;
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
		}
	*/

七、圆角属性

/*缩写形式*/
border-radius:20px;
/*分写形式*/
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
注意点：当圆角属性的属性值是圆角元素自身宽度一半的时候，元素就变成圆

八、鼠标指针：

/*鼠标指针，表示小手*/
cursor:pointer;

九、子选择器

/*包含选择器也叫做后代选择器，只要是它的后代元素都会起作用*/
/*子选择器，只对子元素起作用其他的元素没有作用*/
.nav>li

十、opacity透明属性

opacity透明属性：
    
    1、opacity:value; 取值范围0-1 在IE低版本的浏览器下不支持 没有单位
    
    注意点：子元素会继承父元素的透明属性
    
    2、filter:alpha(opacity=value); 取值范围1-100
    
    3、如果不想让子元素继承父元素的透明属性，直接使用css3新增的rgba()形式

/*老旧浏览器，IE9以下无法识别，新语言*/
opacity:.5;
/*IE9以下浏览器透明属性代码，取值范围1-100*/
filter:alpha(opacity=50);
/*rgb值：0 0 0表示黑色  255 255 255表示白色 如果是rgba，后面这个a表示就是透明,透明属性取值范围0-1*/
background-color:rgba(255,255,255,0.5);

十一、marquee滚动字幕

<!--滚动字幕的应用-->

<marquee

behavior(行为)="scroll(滚动)/alternate(晃动)"

direction(方向)="up(从下向上)/down(从上向下)/left(从右向左)/right(从左向右)"

scrollamount(滚动速度)="value" 

height="value"

width="(左右滚动范围)">

</marquee>

十二、包含块的概念及作用

1、包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考

默认状态下，body是一 个大的包含块, 所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

2、定义元素为包含块，给绝对定位元素的父元素添加声明position:relative;

如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

3、绝对和相对定位的区别

1）参照物不同,绝对定位(absolute) 的参照物是包含块(父级)，相对定位的参照物是元素本身位置;
2）绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。