H5 --- 盒子模型/字体

最新推荐文章于 2025-05-19 09:06:42 发布

月光派件中。

最新推荐文章于 2025-05-19 09:06:42 发布

阅读量716

点赞数

CC 4.0 BY-SA版权

文章标签： html5

本文链接：https://blog.csdn.net/weixin_46064684/article/details/108918672

本文介绍了CSS3中的盒子模型，包括content-box和border-box两种模式，以及如何设置盒子阴影。同时，文章详细讲解了字体效果，如文字阴影、文字描边、文字排列、省略号和自定义字体类型，特别是字体图标的使用，帮助提升网页设计的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子模型

原来的盒子，添加border,padding都可以让盒子本身变大，为了解决这个问题，css3推出了新的盒子模型
box-sizing:content-box,border-box
content-box是默认值计算方式 padding+border+width
border-box 盒子大小始终是元素width
盒子阴影（边框阴影）：
box-shadow:x y 模糊度（可选）颜色内阴影;
box-shadow: 20px 20px 20px yellow,30px 30px 30px green;

盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
			.box{
				width: 100px;
				height: 100px;
				float: left;
				border: 1px solid #ccc;
				box-sizing: border-box;
			}
			.box:first-child{
				background: green;
			}
			.box:nth-child(2){
				background: yellow;
			}
			.box:nth-child(3){
				background: blue;
			}
		</style>
	</head>
	<body>
		<!--盒子模型 的计算方式  margin+padding+border+content-->
		<!--新的css3盒子模型，可以在不改变父元素宽高等属性的情况下，让子元素一行显示-->
		<div class="wrap">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				width: 100px;
				height: 100px;
				background: red;
				margin: 100px auto;
				padding: 10px 20px;
				border: 15px solid yellow;
			}
			.wrap1{
				width: 100px;
				height: 100px;
				background: red;
				margin: 100px auto;
				padding: 10px 20px;
				border: 15px solid yellow;
				/*box-sizing: border-box;*/
				box-sizing: content-box;
			}
		</style>
	</head>
	<body>
		
		<div class="wrap">
		
		</div>
		<div class="wrap1">
		
		</div>
	</body>
</html>

盒子阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 300px;
				background: #ccc;
				margin: 100px auto;
				box-shadow:10px 10px 10px red  ;
				/*box-shadow:10px 10px 10px red,20px 20px 20px yellow,30px 30px 30px blue;*/
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

字体

文字阴影

text-shadow：x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡很卡很卡

例子：
层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				font-size: 100px;
				text-align: center;
				/*text-shadow: x y 模糊度  颜色;*/
				/*text-shadow: 2px 2px 2px red;*/
				text-shadow: 2px 2px 2px red,4px 4px 4px yellow,8px 8px 8px blue;
			}
		</style>
	</head>
	<body>
		<p>通天塔</p>
	</body>
</html>

文字描边

webkit-text-stroke:宽度颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				font-size: 100px;
				text-align: center;
				-webkit-text-stroke:2px red;
				unicode-bidi:bidi-override;
				direction:rtl;
			}
		</style>
	</head>
	<body>
		<p>通天塔</p>
	</body>
</html>

文字排列

direction 定义文字排列方式(全兼容)
rtl从右向左排列
ltr 从左向右排列
注意要配合unicode-bidi:bidi-override; 一块使用

省略号

/*单行文本省略号*/
	p{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/*多行文本省略号*/
	多行省略不兼容IE，要想兼容必须用插架或者滤镜写法（自行百度）
	p{
		display:-webkit-box;
		overflow:hidden;
		word-break:break-all;
		-webkit-box-orient:vertical;
		text-overflow:ellipsis;
		-webkit-line-clamp:20;
	}

自定义字体类型

@font-face {
	font-family:'二哈';
	src: url(fonts/Fontin_Sans_R_45b.otf);
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				font-size: 200px;
				text-align: center;
				font-family: 'fon_t';
			}
			@font-face {
				font-family:'fon_t';
				src: url(fon/Fontin_Sans_I_45b.otf);
			}
		</style>
	</head>
	<body>
		<!--<div>坎坎坷坷扩</div>-->
		<div>asdfghjk</div>
	</body>
</html>

字体图标 icon

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>-->
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<style type="text/css">
			.icon_t{
				/*字体图标的本质就是字体  不过长的想一个图形*/
				font-size: 200px;
				text-align: center;
				color: red;
			}
			.zanting{
				font-size: 200px;
				text-align: center;
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="icon iconfont icon_t">&#xe663;</p>
		<p class="icon iconfont icon-zanting zanting"></p>
		
	</body>
</html>