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

文字溢出处理

<!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>
	<!-- 溢出容器，要打点展示
		1.单行文本
		2.多行文本 只做阶段行刚好多少，然后溢出部分overflow : hidden
	 -->
	 <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>
	<!-- bfc block format context 
		块级格式化上下文-->
		<!-- 如何触发一个bfc
		position：absolute
		display：inline-block
		float：left/right
		overflow：hidden -->
	<!-- <div class="wrapper">
		<div class="content"></div>
	</div> -->

	<!-- <span class="box1">123</span>
	<span class="box2">234</span>
	<div class="demo1">1</div>
	<div class="wrapper">
		<div class="demo2">2</div>
	</div> -->

	
</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>
		<!-- <p></p> -->
		<!-- <div class="content">4</div>
		<div class="content">5</div>
		<div class="content">6</div>
		<div class="content">7</div>
		<div class="content">8</div>
		<div class="content">9</div> -->
	</div>

	<!-- 1.浮动元素产生了浮动流
		所有产生了浮动流的元素，
		只有块级元素看不到他们，
		产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到
		浮动元素
	 -->
	<!-- <div class="box"></div>
	<div class="demo"></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>

不会java不改名

发布了82 篇原创文章 · 获赞 21 · 访问量 2009

私信关注

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

文字溢出处理

伪元素

两栏布局

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

浮动模型float

导航栏浮动

猜你喜欢