lesson4--html-css基础主要知识点

�H�

于 2019-05-18 16:02:37 发布

阅读量129

点赞数

分类专栏： html-css 文章标签： html-css

本文链接：https://blog.csdn.net/wywywy_/article/details/90298507

版权

html-css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、文字溢出处理

1.单行文本溢出处理

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单行文本溢出处理方法</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	.text{
		height:30px;
		width:300px;
		/*单行文本处理溢出方法必不可少的三件套*/
		/*先让多出来的文本不换行，在同一行展示*/
		white-space:nowrap;
		/*再让多余出来的文字隐藏起来*/
		overflow:hidden;
		/*最后让末尾打点展示*/
		text-overflow:ellipsis;
	}
	</style>
</head>
<body>
	<p class="text">明天会更好明天会更好明天会更好明天会更好</p>
</body>
</html>

效果：
在这里插入图片描述
2.多行文本溢出处理（在pc端，通常做截断处理）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多行文本溢出处理方法</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	.text{
		/*当行文本所占的高度是容器所占高度的1/2，
		  所以在容器里面只占两行，溢出部分隐藏处理
		*/
		height:60px;
		width:300px;
		line-height:30px;
		/*border:1px solid black;*/
		overflow:hidden;	
	}
	</style>
</head>
<body>
	<p class="text">明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好</p>
</body>
</html>

效果：
在这里插入图片描述

二、图片背景处理

设置背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>设置背景图片</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	
	div{
		height:300px;
		width:300px;
		border:1px solid black;
		background-image:url("1.jpg");
		background-size:100px 100px;
        background-repeat:no-repeat;
        /*background-position:right top;*/
       /* background-position:100px 100px;*//*以x y轴定位*/
       background-position:40% 50%;

	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

如何更好地处理文字代替图片的问题，让网速低只显示html的时候也能够用文字显示，当网速正常的时候就显示图片，文字消失
方法一：
在这里插入图片描述方法二：
padding里放背景图片，设置盒子高度为0，当css管用时，padding就会把内容区撑开，用overflow属性把文字隐藏起来

在这里插入图片描述

三、注意要点

1.（必须是父子级的块级元素）当父子级块级元素中，里面的子级要在父级里居中，并且在改变窗口的大小时，内容区不变，变得是旁白留白的部分（案例是红色的区域在改变）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	
	.wrapper{
		height:30px;
		background-color: #f00;
	}
	.content{
		/*auto：自适应，有了margin，就可以在居中显示并且改变窗口大小
		内容区部分都不会缩小*/
		margin :0 auto;
		height:30px;
		width:1200px;
		background-color: #f0f;
	}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="content"></div>
	</div>
</body>
</html>

在这里插入图片描述 2.如下案例中：span可以改变宽高的原因是因为加了position：absolute或者float：left/right，然后在内部就会隐式转换成display：inline-block，就可以改变宽高了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	
    span{
    	/*position:absolute;*/
    	float:left;
    	width:100px;
    	height:100px;
        background-color: #F40;
    }
	</style>
</head>
<body>
	<span>123</span>
</body>
</html>

3.会与里面的文字对齐，如果里面没有文字，就与盒子底部对齐
在这里插入图片描述 题目：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	/*设置容器的宽度*/
	.wrapper{
		width:320px;
	}
    /*鼠标移上去后容器的宽度*/
    .wrapper:hover{
    	width:400px;
    }
    /*设置图片，让文字环绕图片*/
     .wrapper .img{
    	height:100px;
    	width:100px;
    	float:left;
    }
    /*设置第一部分文本的样式*/
    .content1{
    	font-size:20px;
    	line-height:20px;
    	height:40px;
    	overflow:hidden;
    	color:#333;
    	margin-bottom:8px;
    }
    /*设置第二部分文本的样式*/
    .content2{
    	font-size:12px;
    	color:#666;
    	line-height:1.2em;
    }
   </style>
</head>
<body>
   <div class="wrapper">
   <img src="1.jpg" alt="烈哥" class="img">
   <p class="content1">烈哥很帅烈哥很帅烈哥很帅烈哥很帅烈哥很帅烈哥很帅烈哥很帅烈哥很帅烈哥很帅烈哥很帅</p>
   <p class="content2">烈哥很磕碜烈哥很磕碜烈哥很磕碜烈哥很磕碜烈哥很磕碜烈哥很磕碜烈哥很磕碜烈哥很磕碜</p>
   </div>
</body>
</html>

�H�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
lesson4--html-css基础主要知识点

一、文字溢出处理1.单行文本溢出处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单行文本溢出处理方法</title> <style> *{ margin:0; padding:0; } .text...
复制链接

扫一扫