CSS（三）

浮动

float:left/right

html部分
	<div class="wrapper">
	    <div class="content1">1</div> 
	    <div class="content1">2</div>
	    <div class="content1">3</div>
	</div>
	
	<div class="wrapper">
	    <div class="content2">1</div> 
	    <div class="content2">2</div>
	    <div class="content2">3</div>
	</div>



css部分
	.wrapper{
	  width: 300px;
	  height: 300px;
	  border: 1px solid black;
	  margin-bottom: 50px;
	}
	.content1{
	  float: left;
	  color: #fff;
	  background-color: black;
	  width: 100px;
	  height: 100px;
	}
	.content2{
	  float: right;
	  color: #fff;
	  background-color: black;
	  width: 100px;
	  height: 100px;
	}

• 文字环绕图片

HTML部分
 <img src="pic.jpg" class="img">Google News is a news aggregator app developed by Google. It presents a continuous flow 
    of articles organized from thousands of publishers and magazines. Google News is available as an app on Android, iOS, 
    and the Web. Google released a beta version in September 2002 and the official app in January 2006. Google News is a 
    news aggregator app developed by Google. It presents a continuous flow of articles organized from thousands of
    publishers and magazines.


css部分
img{
  float: left;
  width: 300px;

}

浮动元素产生浮动流

• 所有产生浮动流的元素，块级元素看不到他们。
• 产生了bfc的元素和文本类属性（inline）的元素以及文本能看到浮动元素。

HTML部分
	<div class="box1"></div>123
	<div class="box2"></div>


css部分
	.box1{
  float: left;
  width: 100px;
  height: 100px;
  background-color: black;
  opacity: 0.5;
}
.box2{
  width: 150px;
  height: 150px;
  background-color: blue;
}

因为浮动流，父级元素包不住子集元素

解决办法
消除浮动流clear:both;(必须是块级元素才能消除浮动流)


     方法一

html部分
	<div class="wrapper">
	    <div class="content">1</div>
	    <div class="content">2</div>
	    <div class="content">3</div>
	    <p></p>
	</div>



css部分
	.wrapper{
  margin-top: 100px;
  border: 1px solid black;
}
.content{
  float: left;
  color: #fff;
  background-color: black;
  width: 100px;
  height: 100px;
}
p{
  clear: both;
}

     方法二

HTML部分
	<div class="wrapper">
    	<div class="content">1</div>
    	<div class="content">2</div>
    	<div class="content">3</div>
	</div>



css部分
	.wrapper::after{
  content: "";
  clear: both;
  display: block;
}
.wrapper{
  margin-top: 100px;
  border: 1px solid black;
}
.content{
  float: left;
  color: #fff;
  background-color: black;
  width: 100px;
  height: 100px;
}

     方法三
利用bfc

html部分
	<div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>


css部分

	.wrapper{
	  float: left;
	  /* poaition: abolut; */
	  margin-top: 100px;
	  border: 5px solid green;
	}
	.content{
	  float: left;
	  color: #fff;
	  background-color: black;
	  width: 100px;
	  height: 100px;
	}

方法三与方法一二不同的原因：

        position:abolute; float:left/right;在内部元素会被转化为inline-block元素

伪元素

伪元素存在于任意元素中
在伪元素中可以输入任何css代码

HTML部分
	<span>
    
    	这是span元素

	</span>



css部分
	span::before{
	  content: "这是逻辑最前的伪元素，属于span";
	
	}
	span::after{
	  content: "这是逻辑最后的伪元素，属于span";
	
	}

溢出处理

• 单行文本

white-space: nowrap;到达容器边界不换行；
overflow: hidden;溢出部分隐藏；
text-overflow: ellipsis;溢出部分打点显示。

HTML部分
	<p>北京：借鉴健康码，北京为促进高校毕业生就业推出“京尤码”</p>



css部分
	p{
	  width: 300px;
	  height: 20px;
	  line-height: 20px;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}

背景图片

HTML部分
	<div class="img1">123</div>
    <div class="img2">123</div>


css部分
	.img1{
	  width: 400px;
	  height: 400px;
	  background-image: url(pic.jpg);
	  background-size: 400px 400px;
	  margin-bottom: 30px;
	}
	.img2{
	  width: 400px;
	  height: 400px;
	  background-image: url(pic.jpg);
	  background-size: 200px 200px;
	  margin-bottom: 30px;
	}

background-repeat:repeat(默认平铺)/repeat-x/repeat-y/no-repeat;

html部分
 	<div class="img1">123</div>
    <div class="img2">123</div>


css部分
	.img1{
	  width: 400px;
	  height: 400px;
	  border: 1px solid black;
	  background-image: url(pic.jpg);
	  background-size: 200px 200px;
	  background-repeat: repeat-x;
	  margin-bottom: 30px;
	}
	
	.img2{
	  width: 400px;
	  height: 400px;
	  border: 1px solid black;
	  background-image: url(pic.jpg);
	  background-size: 200px 200px;
	  background-repeat: no-repeat;
	  margin-bottom: 30px;
	}

调整图片位置：background-position:x y/left top/center center/...;

	.img1{
	  width: 400px;
	  height: 400px;
	  border: 1px solid black;
	  background-image: url(pic.jpg);
	  background-size: 200px 200px;
	  background-repeat: no-repeat;
	  background-position: center center;
	}