CSS基础学习03

1. CSS Display(显示) 与 Visibility（可见性）

display与visibility属性可以用来设置html元素的隐藏和显示

display设置html元素的隐藏和显示，隐藏的元素不会占用任何空间.

也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

none隐藏当前元素 block显示当前元素，当前元素被设置成块级元素

<style>
		#img1 {
			display: block;
		}
		</style>

显示如下：

visibility属性指定一个元素应可见还是隐藏

隐藏的元素仍需占用与未隐藏之前一样的空间

hidden隐藏当前元素 visible显示当前元素

#img2 {
			visibility: hidden;
		}

<img id="img2" src="imgs/avatar2.png" >
		  <span>测试图片之后</span>

显示如下;

2. CSS定位设置

想要将html元素放置在网页的指定位置那么就需要设置定位属性

position 设置html元素在网页中的定位方式/定位标准/定义原则

默认网页中的定位方式：从左上角开始排列，一行排满以后自动换行，当碰到块级元素时无论有没有排满当前行都会自动折行。

static--没有定位，遵循默认网页中的定位方式【顶部 top，底部bottom，左侧left和右侧right属性无效】

absolute--不遵循默认网页中的定位方式，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于body

relative--遵循默认网页中的定位方式，相对于其他元素的位置而确定

fixed--不遵循默认网页中的定位方式,元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.

sticky--粘性定位,在relative与fixed 定位之间切换。

顶部 top，底部bottom，左侧left和右侧right属性---设置具体定位距离

顶部 top，底部bottom，左侧left和右侧right属性在使用之前需要先设置position属性

2.1 absolute定位

不遵循默认网页中的定位方式

元素的位置相对于最近的 已定位父元素

如果没有最近的已定位的父元素，那么它的位置相对于body

如果最近的已定位的父元素是static定位，那么它的位置相对于body

如果最近的已定位的父元素是除static 定位，那么它的位置相对于absolute定位

依靠top,left,bottom,right设置具体位置

（1）没有父元素，定位相当于body

<style>
	body {
			margin: 0;
		 }
  #img1 {
		position: absolute; /*绝对定位*/
	    top: 50%;
        left:200px;
		 }

<img id="img1" src="imgs/avatar3.png" >

显示如下：

（2）有父元素，但未定位

父元素<div>,但未定位，依然相对于body

父元素<div>,但定位为：static，依然相对于body

div {
			 width: 400px;
			 height: 400px;
			 background-color: tomato;
		 }
		 #img2 {
			 position: absolute;
			 top: 100px;
		 }

<div>
			<img id="img2" src="imgs/avatar3.png" >
		</div>

显示如下：

 （3）有父元素，定位了absolute

div {
			 width: 400px;
			 height: 400px;
			 background-color: tomato;
			 position: absolute;
		 }
		 #img2 {
			 position: absolute;
			 top: 100px;
              left:100px;
		 }


<div>
			<img id="img2" src="imgs/avatar3.png" >
		</div>

显示如下：

（4）有父元素定位，但定位不是absolute，跟absolute效果一样

（5）有父元素，最近已定位父元素为 div1。与div2 无关，因为无定位

#div1 {
			 width: 400px;
			 height: 400px;
			 background-color: tomato;
			position: absolute;
		#div2 {
			 width: 400px;
			 height: 400px;
			 background-color: blue; 
		 }


<div id="div1">
			<div id="div2">
				<img id="img2" src="imgs/avatar3.png"/>
			</div>
		</div>

（6）有已定位的父元素:div1 ,div2。最近的为div2

#div1 {
			 width: 500px;
			 height: 500px;
			 background-color: tomato;
			position: absolute;
		}
		#div2 {
			 width: 400px;
			 height: 400px;
			 background-color: blue; 
			 position: absolute;
              top: 100px;
			 left: 100px

		 }
		 #img2 {
			 position: absolute;
			 top: 100px;
			 left: 100px;
		 }


<div id="div1">
			<div id="div2">
				<img id="img2" src="imgs/avatar3.png"/>
			</div>
		</div>

2.2 relative定位

遵循默认网页中的定位方式，相对于其他元素的位置而确定

(图片离文字的距离)

<style>
		body {
			margin: o;
		}
		#img1 {
			position: relative;
			top: 100px;
		}
		
		</style>

<span>图片之前</span>
		<img id="img1" src="imgs/avatar4.png" >
		<span>图片之后</span>

显示如下：

2.3 fixed定位

不遵循默认网页中的定位方式,元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.

<style>
		p.pos_fixed {
			position: fixed;
			top: 30px; /*距离最顶端*/
			right: 50px;/*距离最右端*/
		}
		</style>
<p class="pos_fixed">Some more text</p>

显示如下：

2.4 sticky 定位

在relative与fixed 定位之间切换。

<style>
		  div.sticky {
			  position: sticky;
			  top: 0; /* 滑动到最顶端，上边距为0 */
			  padding: 5px;
			  background-color: aqua;
			  border: 2px solid black;
		  }
		</style>

<p>尝试滚动页面</p>
		<div class="sticky">我是粘性定位</div>
		<div style="padding-bottom:2000px"><!-- 内边距很大，相当于一个大盒子 -->
			<p>滚动我</p>
			<p>来回滚动我</p>
		    <p>滚动我</p>
			<p>来回滚动我</p>
		    <p>滚动我</p>
		    <p>来回滚动我</p>
		</div>

显示如下：

 3. z-index设置元素重叠

z-index取值大的在取值小的上面

没有position属性设置的话，z-index的重叠顺序是无效的

<style>
		#div1 {
			width: 200px;
			height: 200px;
			background-color: red;
			position: absolute;
			top:150px;
			z-index: 1;
		}
		#div2 {
			width: 200px;
			height: 200px;
			background-color: blue;
			position: absolute;
			top:200px;
			z-index: 0;
		}
		</style>

 显示如下：

4. Overflow

控制内容溢出元素框时在对应的元素区间内添加滚动条

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

<style>
		   body {
			   margin: 0;
		   }
		   div {
			   width: 100px;
			   height: 100px;
			   border: 10px solid aqua;
			   overflow: scroll;
		   }
		</style>


<div>
			<img src="imgs/avatar5.png" >
		</div>

显示如下：

5. CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

浮动元素之后的元素将围绕它。

<style> 
	body{margin: 0;} 
	#img2{ 
	float: right; 
	} 
	</style>

<p id="p1">
			<img id="img2"src="imgs/avatar2.png" />
			元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
			浮动元素之后的元素将围绕它。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
		
			浮动元素之后的元素将围绕它。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
			浮动元素之后的元素将围绕它。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
			浮动元素之后的元素将围绕它。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
	
		</p>

显示如下：