CSS基础-06-元素大小和（设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height）

文章目录

1. 设置元素尺寸（height/width）
- 语法示例
- 完整示例
2. 最大值、最小值（max-height|width、min-height|width）
3. 设置行间距（line-height）
- 语法示例
- 完整示例

1. 设置元素尺寸（height/width）

语法示例

自动大小

 height:auto;width:auto;

像素设置

 height:100px;width:100px;

百分百设置

 height:50%;width:10%;

完整示例

代码

 <!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        p {
            border: 1px solid black;
            height:100px;width:100px;
        }
    </style>
</head>
 
<body>
<p>元素大小测试</p>
</body>
 
</html>

结果显示

2. 最大值、最小值（max-height|width、min-height|width）

语法示例

设置元素最大值

 max-height: 50px;
max-width:500px;

设置元素最小值

 min-height: 50px;
min-width:500px;

完整示例（最大值限制）

当元素高设置为400px，但是最大值限制为200px，最后元素高度为200px。

代码

 <!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        p {
            border: 1px solid black;
            height: 200px;
            width: 400px;
            max-width: 200px;
        }
    </style>
</head>
 
<body>
    <p>元素大小测试</p>
 
</body>
</html>

结果显示

在这里插入图片描述

完整示例（最小值限制）

设置对打宽度100px，自小宽度设置为50%。

代码

 <!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        p {
            border: 1px solid black;
            height: 200px;
            width: 100px;
            min-width: 50%;
        }
    </style>
</head>
 
<body>
    <p>元素大小测试</p>
 
</body>
 
</html>

在这里插入图片描述

3. 设置行间距（line-height）

语法示例

用像素设置

 line-height:10px;
line-height:50px;

用百分比设置

 line-height:30%;
line-height:200%;

用数值设置

 line-height:0.3;
line-height:2;

完整示例

代码

 <!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        p {
            text-decoration: underline;
        }
 
    </style>
</head>
 
<body>
    <p>平生无用是逍遥，</p>
    <p>应悔曾效楚歌狂。</p>
 
</body>
 
</html>

结果

在这里插入图片描述

posted on 2022-04-12 20:46 运维开发玄德公阅读(80) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

· CSS基础-12-伪类和伪元素-02-伪元素（元素第一行::first-line，首字母大写::first-letter，元素之前|之后::before|after）

· css尺寸

· (五).CSS 长度和颜色设置，CSS 基本选择器，盒子模型（显示模式），常用CSS属性：字体样式，文字颜色，文本样式

· 【学习笔记】HTML+CSS

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球运作规律
· 上周热点回顾（3.3-3.9）

CSS基础-06-元素大小和（设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height）

文章目录

1. 设置元素尺寸（height/width）

语法示例

完整示例

2. 最大值、最小值（max-height|width、min-height|width）

语法示例

完整示例（最大值限制）

完整示例（最小值限制）

3. 设置行间距（line-height）

语法示例

完整示例

导航

统计

合集

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>CROW-SONG</title>
	<style>
	p {
	border: 1px solid black;
	height:100px;width:100px;
	}
	</style>
	</head>

	<body>
	<p>元素大小测试</p>
	</body>

	</html>