DAY SIX

目录

float浮动

清除浮动

position定位

absolute定位

fixed、sticky、zlndex

 css添加省略号

css精灵

css圆角设置

---

float浮动

			#box1{width: 300px;height: 300px;background-color: #FF0000;}
			#box2{width: 100px;height: 100px;background-color: aliceblue;
			float: right;}

清除浮动

上下排列：clear属性，表示清除浮动的，left、right、both

			#box1{width: 100px;height: 100px;background-color: aliceblue;
			float: right;}
			#box2{width: 300px;height: 300px;background-color: black;
			clear: both;}

 嵌套排列：

 clear属性只会操作块，对内联不起作用

			#box1{width: 300px;height: 300px;background-color: black;}
			#box2{width: 100px;height: 100px;background-color: aliceblue;
			float: right;}
			.clear:after{content: '';clear:both;display: block;}/* 转成块才支持清浮动 */

position定位

			#box1{width: 100px;height: 100px;background-color: #FF0000;}
			#box2{width: 100px;height: 100px;background-color: aqua;}
			#box3{width: 100px;height: 100px;background-color:palevioletred;
			position: relative;left: 100px;top: 100px}

absolute定位

			#box1{width: 100px;height: 100px;background-color: #FF0000;}
			#box2{width: 100px;height: 100px;background-color: aqua;}
			#box3{width: 100px;height: 100px;background-color:palevioletred;
			position: absolute;}
			span{position: absolute;}

fixed、sticky、zlndex

 

			#box3{width: 100px;height: 100px;background-color:palevioletred;
			position: absolute;z-index: 1;}

position实现装饰点

 

 css添加省略号

			#content{width: 200px;height: 200px;border: 1px #000000 solid
			;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

css精灵

			#box1{width: 20px;height: 21px;background: url() no-repeat
			left -596px;}
			#box2{width: 300px;height: 50px;border: 1px #000000 solid;
			line-height: 50px;padding-left: 30px;
			background: url() no-repeat right -516px;}

css圆角设置

			#box{width: 200px;height: 200px;background-color: #FF0000;
			border-radius: 50%;}/* 形成圆形 */
			
			#box{width: 200px;height: 200px;background-color: #FF0000;
			border-radius:20px/40px;}/* 椭圆相切 */
			
			#box{width: 200px;height: 200px;background-color: #FF0000;
			border-radius:100px 100px 0 0;}/* 半圆 */