HTMLCSS小白——浮动模型、两个经典bug（bfc解决四种方式）、导航栏、伪元素、文字溢出处理

叁歲伎倆 2023-07-10 11:30 41阅读 0赞

## 文字溢出处理 ##

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		*{
        
    			padding: 0;
    			margin: 0;
    		}
    		p{
        
    			width: 300px;
    			height: 20px;
    			line-height: 20px;
    			/*border: 1px solid black;*/
    			white-space: nowrap;
    			/*去除换行*/
    			overflow: hidden;
    			text-overflow: ellipsis;
    			/*溢出的文本变成...*/
    
    		}
    	</style>
    </head>
    <body>
    	
    	 <p>谢谢小巫。18年8月，我在推荐上刷到了您的视频，随意的点了一个关注，没想到使我的命运发生了一个360°大转弯；12月，我无心地刷着B站，看见了您的直播间就点了进来，看了一会儿，我越看越觉得您非常可爱，就看到您下播，那时候金豆礼物还送不起(vx还没创，所以送不了；辣条还是可以的，我疯狂拾荒，拾到了非常多的辣条)。vx刚创好，我就迫不及待得向我妈要了10块搞牌子，后来手笔也大了(网上买鱼了解一下)；我从18年12月看直播一直持续到6月</p>
    </body>
    </html>

## 伪元素 ##

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		*{
        
    			padding: 0;
    			margin: 0;
    		}
    		/*伪元素天生为行元素*/
    		span::before{
        
    			content: "一张";
    			width: 100px;
    			height: 100px;
    			display: block;
    			background-color: red;
    		}
    		span::after{
        
    			content: "是的，确实这样";
    		}
    	</style>
    </head>
    <body>
    	<span>
    		很帅
    	</span>
    </body>
    </html>

## 两栏布局 ##

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		*{
        
    			padding: 0;
    			margin: 0;
    		}
    		.right{
        
    			width: 100px;
    			height: 100px;
    			background-color: #123;
    			position: absolute;
    			right: 0;
    			opacity: 0.5;
    		}
    		.left{
        
    			height: 100px;
    			background-color: orange;
    			margin-right: 100px;
    		}
    	</style>
    </head>
    <body>
    	<div class="right"></div>
    	<div class="left"></div>
    </body>
    </html>

## 两个经典bug使用bfc解决（margin塌陷margin合并） ##

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		*{
        
    			padding: 0;
    			margin: 0;
    		}
    		/*margin塌陷bug四种方式bfc解决*/
    		/*.wrapper{
    			margin-left: 100px;
    			margin-top: 100px;
    			width: 100px;
    			height: 100px;
    			background-color: black;
    			border-top: 1px solid red;
    			overflow: hidden;
    			溢出部分隐藏
    			display: inline-block;
    			position: absolute;
    			float: left;
    
    		}
    
    		.content{
    			margin-left: 50px;
    			margin-top: 50px;
    			width: 50px;
    			height: 50px;
    			background-color: green;
    		}*/
    		/*margin合并问题 因为要改html结构所以不用bfc解决他用像素解决*/
    		/*.box1{
    			background-color: red;
    			margin-right: 100px;
    		}
    		.box2{
    			background-color: green;
    			margin-left: 100px;
    		}
    		.demo1{
    			background-color: red;
    			margin-bottom: 100px;
    		}
    		.demo2{
    			background-color: green;
    			margin-top: 100px;
    		}
    		.wrapper{
    			overflow: hidden;
    		}*/
    	</style>
    </head>
    <body>
    	
    		
    	
    
    	
    
    	
    </body>
    </html>

## 浮动模型float ##

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		*{
        
    			padding: 0;
    			margin: 0;
    		}
    		.wrapper{
        
    			/*width: 350px;
    			height: 300px;*/
    			border: 2px solid blue;
    			display: inline-block;
    		}
    		/*触发bfc包裹元素*
    		凡是设置了positon:absolute; float:left/right;
    		把内部元素就转换成立inline-bl0ck;
    		/
    
    		/*利用伪元素清除浮动流*/
    		span{
        
    			width: 100px;
    			height: 100px;
    			background-color: orange;
    			/*position: absolute;*/
    			float: left;
    
    		}
    		.content{
        
    			float: left;
    			color: #fff;
    			background-color: black;
    			width: 100px;
    			height: 100px;
    		}
    		/*.wrapper::after{
    			content: "";
    			clear: both;
    			display: block;
    		}*/
    		/*p{
    			border-top: 0px solid green;
    			clear: both;
    		}*/
    		/*.box{
    			float: left;
    			width: 100px;
    			height: 100px;
    			background-color: black;
    			opacity: 0.5;
    		}
    		.demo{
    			display: inline-block;
    			width: 150px;
    			height: 150px;
    			background-color: green;
    		}
    	</style>
    </head>
    <body>
    	<div class="wrapper">
    		<div class="content">1</div>
    		<div class="content">2</div>
    		<div class="content">3</div>
    		
    		
    	</div>
    
    	
    	
    
    	<span>123</span>
    </body>
    </html>

## 导航栏浮动 ##

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style>
    		*{
        
    			padding: 0;
    			margin: 0;
    			color: #442244;
    			font-family: arial;
    		}
    		a{
        
    			text-decoration: none;
    		}
    		.nav::after{
        
    			content: "";
    			display: block;
    			clear: both;
    		}
    		.nav{
        
    			list-style: none;
    		}
    		.nav .list-item{
        
    			float: left;
    			margin: 0 10px;
    			height: 30px;
    			line-height: 30px;
    			/* border: 2px solid black; */
    		}
    		.nav .list-item a{
        
    			padding: 0 5px;
    			color: #f40;
    			font-weight: bold;
    			display: inline-block;
    			height: 30px;
    			border-radius: 15px;
    		}
    		.nav .list-item a:hover{
        
    			background-color: #f40;
    			color: #fff;
    		}
    	</style>
    </head>
    <body>
    	<ul class="nav">
    		<li class="list-item"><a href="#">天猫</a></li>
    		<li class="list-item"><a href="#">聚划算</a></li>
    		<li class="list-item"><a href="#">天猫超市</a></li>
    	</ul>
    </body>
    </html>