前端自学 - CSS 小练习

一只小网虫

已于 2022-09-07 22:52:07 修改

阅读量498

点赞数 1

分类专栏： CSS 前端练习分享文章标签： css html5 html

于 2021-10-05 14:55:13 首次发布

本文链接：https://blog.csdn.net/m0_48407729/article/details/120613489

版权

CSS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端练习分享

4 篇文章 0 订阅

订阅专栏

一、内联元素之间的距离

对比效果演示：

解决办法：

设置 font-size: 0;可以解决该问题（该问题出现的原因是由于换行引起的间隙问题，浏览器默认换行为一个空格）；
脱离文档流也可以解决该问题；

二、多行文本省略

效果演示：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>    
    #box {
      width: 200px;
      height: 300px;
      border:2px solid red;
    }
    p {
      display: -webkit-box;/* 对象作为弹性伸缩盒子模型 */
      -webkit-box-orient: vertical;/* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-line-clamp: 4;  /*设置元素最多显示行数，父元素需填写宽度才明显*/
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;	/* 禁止换行 */
    } 
  </style> 
</head>
<body>
  <div id="box">
    <p>
      测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文
      测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文
      测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文
      测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文
      测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文
      测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文
    </p>
  </div>
</body>
</html>

三、网页缩放问题

效果演示：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box1 {
			width: 660px;
			margin: 0 auto;
			overflow: hidden;
		}
		.box1-item {
			float: left;
			box-sizing: border-box;
			width: 200px;
			height: 100px;
			border: 2px solid #000;
			margin-right: 20px;
			background: #ff0;
		}

		.box2 {
			width: 80%;
			margin: 20px auto 0;
			overflow: hidden;
		}
		.box2-item {
			float: left;
			box-sizing: border-box;
			width: 30%;
			height: 100px;
			border: 2px solid #000;
			background: #ff0;
		}

		.box3 {
			width: 50%;
			height: 100px;
			margin: 20px auto 0;
			background: #ccc;
		}
		.box3-txt {
			float: left;
			height: 30px;
			padding: 3px;
			border: 1px solid #000;
		}
		.box3-box {
			float: left;
			width: 300px;
			height: 50px;
			background: #333;
		}
	</style>
</head>
<body>
	<!-- 无论怎么缩放布局不会乱，放大后会出现滚动条 -->
	<div class="box1">
		<div class="box1-item"></div>
		<div class="box1-item"></div>
		<div class="box1-item"></div>
	</div>

  <!-- 无论怎么缩放布局不会乱，放大缩小都不会出现滚动条 -->
	<div class="box2">
		<div class="box2-item"></div>
		<div class="box2-item"></div>
		<div class="box2-item"></div>
	</div>

  <!-- 
    .box3 如果是固定宽度就不会乱，如果是百分比就会乱
   -->
	<div class="box3">
		<div class="box3-txt">这里有很多的文字,哈哈哈</div>
		<div class="box3-box"></div>
	</div>
</body>
</html>